Beginner’s Guide to Creative Coding using p5js

Creative coding has emerged as one of the best mediums to learn programming. It offers no barriers and people with different fields of interests can easily learn programming through it. It offers a platform for artists, students and professionals to translate their creativity onto digital medium. You have no experience with coding stuff? Well, creative coding doesn’t require you to!

p5js is one such medium to bring out your creativity on the computer. p5js is a client-side JavaScript library for creating graphics and interactive experiences originally based on it’s older cousin Processing (a Java library). Processing was developed by Ben Fry and Casey Reas in 2001 and till date are continuously updating the library. Later on, it got adopted by Lauren McCarthy, an LA based artist, to make it web accessible. Without further ado, let’s get our hands on it.

Creators of p5js provide us with a web-based editor at editor.p5js.org. If you’re uncomfortable with it, you can add a CDN link to p5js inside the HTML and you’re ready to go. For the sake of simplicity, we’re going to use the web editor. It has got some other advantages too, like saving and loading your sketches. Now you’re just an account away to start coding wonders! Assuming you are already done with the account, let’s understand the interface of the editor.

So, you’ve got a header with options like New, Save, Reference, etc. It’ll help you with loading your saved sketches or help you find a function you’re looking for. The middle white space with some text is your main space. Your code for the sketch goes here. Above it, there are two buttons for playing and stopping your code execution. The grey area below the main space is your console. If there are any errors with your code, it’ll get logged over here. Beside the main space, there’s a space called preview. It’ll show your code output. That’s it for the interface. Let’s understand the core structure of p5js sketch.

Any p5js sketch will follow a very simple structure. It is recommended to understand this programming structure to understand what really is happening with your code. As soon as you start the web editor, you’ll get two functions – setup() and draw(). Whatever you write in the sketch() will get executed once during the code lifetime and the code in draw() will get executed as many times as your display’s refresh rate (which is mostly 60 frames per second).

To make more sense, add ‘ellipse(100, 100, 120, 120)’ after the line ‘background(220)’. It should look like this now.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  ellipse(100, 100, 120, 120);
}

And when you play the sketch, it’ll render like this.

Now, let’s break down the code to understand it better. In the setup function, the line createCanvas(400, 400);  is executing only once. It basically sets up the blank canvas of width and height 400px on which you can start adding different shapes, lines and what not.

The function draw is executing 60 times a second. So, whatever you write inside it will get executed 60 times a second. Here, we have two lines. The first line background(220); adds background to the canvas every time the draw function is called. After that, the ellipse(100, 100, 120, 120);  draws an ellipse at coordinates (100, 100) of width 120px and height 120px. And it does this, you guessed it correctly, 60 times a second. Because we are telling the code to draw ellipses at one position, we are not able to see any changes to the canvas. Let’s learn some new functions !

Modify the code to look like this.

function setup() {
  createCanvas(400, 400);
  
  noStroke();
  fill(240, 0, 0);
}

function draw() {
  background(220);
  
  ellipse(mouseX, mouseY, 120, 120);

Over here, noStroke(); removes stroke applied to any elements from there on. fill(240, 0, 0); takes 3 arguments as red, blue and green color within the range of 0-255. In this case, it takes 240 as Red value and hence fills elements with red color. You might’ve noticed already that we are using mouseX and mouseY as coordinates for drawing ellipses. mouseX and mouseY are system variables which contain mouse’s X and Y coordinates respectively among the canvas. Go ahead and click the Play button to get more idea on how it works. Now that you’re aware of these functions, can you guess what the code below performs ?

function setup() {
  createCanvas(400, 400);
  
  fill(4,66,191);
  strokeWeight(3);
  stroke(4,75,217);
  
  background(242,126,99);
}

function draw() {
  ellipse(mouseX, mouseY, 120, 120);
}

Kudos to you if you guessed it correctly ! Try experimenting as much as possible to get a grasp of which function does what. Head over to the p5js reference page to find more such shapes to create. We’ll be going through some advanced p5js coding on the next part of the series. Until then, have fun experimenting !