Skip to content

Instantly share code, notes, and snippets.

@potterzot

potterzot/index.html

Last active August 27, 2015 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save potterzot/5ce8168b7dd9086acb28 to your computer and use it in GitHub Desktop.
Save potterzot/5ce8168b7dd9086acb28 to your computer and use it in GitHub Desktop.
Download ZIP
Create a simple web comic with p5js.
Raw
index.html
<!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