Similarly, while I've messed messed around in p5.js before, leveraging my years of Processing mojo in a more purely javascript-y way, I don't have the usual "ceremonial" stuff down pat, and so to reduce the friction of starting a new project, I gift my future self with the following:
UPDATE: Remember you may want to use something like
python -m SimpleHTTPServer 8000
(and then view http://localhost:8000
to run a little server, if you are loading files etc)
UPDATE: I'm now providing myself two versions, the first is simpler, uses global functions, and puts the canvas on the page for you. The second only puts one variable in the global namespace and lets you have more control over the CSS styling of the canvas, but requires prefixing all P5 calls with a variable (e.g. p.line(x,y); not just line(x,y);) Also you could substitute p5.js or p5.min.js with one another or use the CDN links
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js
Global Mode:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>p5.js boilerplate</title>
<script src="p5.js"></script>
<script>
function setup(){
var canvas = createCanvas(500, 500);
canvas.parent("canvasParent");
};
function draw(){
stroke(random(255),128);
line(random(500),random(500),mouseX,mouseY);
}
</script>
<style>
body {
background-color: #333;
color: #bbb;
text-align:center;
font-family:sans-serif;
}
a {
color: #bbb;
}
#canvasParent {
background-color:#3d3d3d;
padding:20px;
display: inline-block;
}
</style>
<body>
<div id="canvasParent"></div>
<h2>title <a href="view-source:.">source</a></h2>
</body>
</html>
Instance Mode:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>p5.js boilerplate</title>
<script src="p5.min.js"></script>
<style>
#appCanvas {
width:500px;
height:500px;
border: solid 1px black;
}
</style>
<script>
var app = function(p) {
p.setup = function() {
p.createCanvas(500, 500);
};
p.draw = function(){
p.stroke(p.random(255),128);
p.line(p.random(500),p.random(500),p.mouseX,p.mouseY);
}
}
var myApp = new p5(app,'appCanvas');
</script>
</head>
<body>
<div id="appCanvas"></div>
</body>
</html>
It contains some arbitrary bits that I find useful (I like to work at 500x500 because of my blog, for instance) but is pretty minimal, easy to reset once copy and pasted. And I added just a touch of fun to the draw() routine, so I can see it working. (You can see it in action on my website, where I have a random copy of p5.js)
I love the idea of p5, though I admit having to remember to prefix every command with "p." (or whatever variable I've assigned) is annoying.
In other dev blogging... on FB I posted this:
I really feel like a better person, empowered and creative and capable, when I take time to sit and hack in an environment I'm fluent in, especially sitting in front of a big monitor rather than just grabbing time on the subway. Between a techie conference, helping friends in need, a band gig, and various social fun stuff, I haven't had a solid morning or afternoon for that for weeks.
I wonder if this feeling is anything like what people who get nurtured by being out in nature feel when they go camping. I mean, different, obviously, but deeply resonate and restorative nonetheless.
Oh. The other thing: I just realized that for YEARS a gmail filter I set up has been shunting all mail notifications of comments added here away and out of my inbox. I was getting too much material from the "OpenOffice.org" list, so I created a filter for "[dev]'. Turns out that filter wasn't as literal as I had assumed, so something like "[Kirk's UI Dev Blog]", or anything with the word "dev" in it, was shoved away as well. Ah, technology.
No comments:
Post a Comment