Learning p5.js - An Introduction


Recently I've been playing with p5js, a creative coding and interactive visualization library inspired by Processing, as stated from their website:

p5js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. - p5js.org

Processing for the Web

Processing is a Java based language for creating interactive art and visualizations. It's pretty awesome for desktop projects, however it doesn't really translate to the web. This is where p5js comes to the rescue...

p5js allows you to write Processing-like programs using JavaScript. Your "sketch" runs in the browser and uses HTML5 Canvas behind the scenes.

So, what does a p5js "sketch" look like?

var playing = false;

function setup() {
  createCanvas(646, 224);
  background(243,241,236);
}

function draw(){
  if (playing == false) return;
  // after 360 frames, clear the sketch
  if (frameCount % 360 == 1){
    background(243,241,236);
  }
  // draw a blue triangle
  stroke('#00a1d4');
  strokeWeight(3);
  noFill();
  translate(random(-50, width-50), random(-50, height-50));  
  rotate(frameCount);
  triangle(0, 100, 50, 0, 100, 100);
}

function mouseClicked(){
  playing = !playing;
}

The p5js code above turns into: (click to play/pause)


Set it up

Let's walk through this example code to see how it works. p5 will look for a number of special functions. At a bare minimum we need to create a function called setup, this function is called right away by p5.

function setup() {
  createCanvas(646, 224);
  background(243,241,236);
}

Go Fullscreen

In our example code we create a canvas that is 646 pixels wide by 224 pixels high. You can set the canvas to fill the entire page by using windowWidth and windowHeight like this:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Did you notice the windowResized function we added? This is called by p5 everytime the user resizes the browser. This way our canvas will always match he size of the browser!

Drawing Triangles

p5 will call the draw function repeatedly (60 times per second by default). So all of our animation code goes inside the draw function.

We want to draw triangles at a random position within the canvas, with a unique rotation. To do this we can use the translate rotate triangle and random functions provided by p5js:

function draw(){
  translate(random(-50, width-50), random(-50, height-50));  
  rotate(frameCount);
  triangle(0, 100, 50, 0, 100, 100);
}

Moving Things Around

We can move the X and Y position of our triangle by a random abount between -50 and the screen size minus 50:

var x = random(-50, width-50);
var y = random(-50, height-50);
translate(x, y);

Because we're using a range between -50 and width or height minus 50 we will potentially draw the triangle half on or half off the canvas!

Rotation

In order to have an ever increasing rotation applied to our triangles we are using the frameCount.

rotate( frameCount );

frameCount is the number of times that draw has been called since the start of the program. This will mean that each frame we will have a triangle that is rotated just a little bit more than the previous frame.

Create a Triangle

Now that we've moved and rotated the triangle we need to draw it! The easiest way is to use the builtin triangle function.

triangle(0, 100, 50, 0, 100, 100);

The triangle function takes 6 parameters. Each pair of parameters represent a Point of (X, Y) values. So for our example (0, 100) is the bottom left point, (50, 0) is the top middle point, and (100, 100) is the bottom right point.

Applying Style

In order for the triangle to be styled how we want, we can use the provided functions: stroke, strokeWeight, and noFill. Stroke changes the outline color, strokeWeight changes how thick the outline is and noFill makes our triangle center transparent.

function draw(){
  // draw a blue triangle
  stroke('#00a1d4');
  strokeWeight(3);
  noFill();

  translate(random(-50, width-50), random(-50, height-50));  
  rotate(frameCount);
  triangle(0, 100, 50, 0, 100, 100);
}

Clear the Canvas

Another thing we're doing in draw is clearing the screen after 360 triangles have been drawn.

if (frameCount % 360 == 1){
  background(243,241,236);
}

Using the frameCount and javascripts Remainder operator % we tell if draw has been called 360 times. If it has we clear the background by using the background function.

Toggle On/Off

The final thing we do in our example is to allow the animation to be stopped and started by clicking.

First we create a variable called playing and set it to false. Next inside of our draw function we check to see if playing is false, and if it is we return which means we don't do anything else in the draw function and it exits.

var playing = false;

function draw(){
  if (playing == false) return;

  // code down here won't happen if playing is false
  // ...
}

Click to Toggle

Then we use the special mouseClicked function to toggle the true/false state of our playing variable everytime a user clicks!

function mouseClicked(){
  playing = !playing;
}

If you want to learn more take a look at the Getting Started page on p5js.org. In the future i'm planning to write more "Learning p5js" posts, covering things like:

Load Comments
Back to Top

© 2017 Derek Anderson.