Create a gist now

Instantly share code, notes, and snippets.

Create a simple web comic with p5js.
<!DOCTYPE html>
<html>
<head>
<title>p5js Example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.8/p5.js"></script>
<body>
<h1>Processing.js Test</h1>
<p>Using p5js to create simple canvas comic graphics... (sorry for the embarrassingly bad joke.)</p>
</body>
<script>
// define variables here so they are available to all functions
var gratio = 1.618;
function setup() {
// put setup code here
createCanvas(870, 400);
// settings
fill(0, 0, 0, 2); // rgba
textFont("sans");
noLoop(); // should be the last line. Stops draw() function from being cont called
}
function draw() {
// put drawing code here
// comic box
for (var i=0; i<3; i++) {
rect(i*290,0,280,300); // x, y, w, h
}
stroke(0);
// first panel
translate(0, 0); //x, y
textAlign(LEFT);
text("Dude! Are you going to Economicon this year?", 10, 10, 200, 200);
textAlign(RIGHT);
text("Yeah, and I've totally got my chainsaw ready.", 170, 100, 100, 200);
fill(50);
rect(90,190,100,100);
textSize(12);
stroke(255,0,0);
textAlign(CENTER);
text("Economicon", 140, 215);
// second panel
translate(290, 0);
stroke(0);
textAlign(LEFT);
text("...", 10,30);
textAlign(RIGHT);
text("...", 270,120);
// third panel
translate(290, 0);
textAlign(CENTER);
text("Economics geek communication problems...", 100,125,100,200);
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment