The aim of this post is to give you a basic understand of Processing and p5.js so you can get started quickly. If you have any questions feel free to ask me in class!

Getting Started

Download processing here. Processing uses Java to create your visuals, but you do not need to know a lot about Java to use it (though it wouldn't hurt!). When you start a new document, it will be blank.

Type the following:

void setup() {   
}  

void draw() {  
}

The first method, setup, will run only once when the program begins. It executes everything inside the curly braces. The second function, draw, will run in a continuous loop again executing whatever is inside the curly braces.

Setup

The logical first place to start is the setup method. Type the following:


void setup() {
  size(1280, 720);
  background(0,0,0,255);
 } 

void draw() { }

size() creates a new canvas that is 1280px by 720px. You could input any height and width for your canvas. background() chooses the color of the background. The first digit is the red value, the second green, and the third blue. All color values range from 0 to 255. The last digit is the alpha value, where 255 is totally opaque and 0 is totally transparent. So this background will be black and opaque.

Always remember to put a semicolon at the end of each line! This is like a period at the end of a sentence.

Draw

Next, type the following:


void setup() { 
   size(1280, 720); 
   background(0,0,0,255); 
    } 
 
 void draw() { 
    stroke(255,255,255,255);
   if (mousePressed) {     
       fill(255,255,255,255);   
   } 
   else {     
      fill(0,0,0,255);  
   }   
   ellipse(mouseX, mouseY, 80, 80); 
 }

stroke() and fill() define the color of the stroke and fill, respectively, of your shapes. Think each of each one as its own paint brush. The shapes will be the same color until you tell it to change. In this example, the stroke will stay black the whole time because we only define it once, while the the fill will change to white if the mouse is pressed. Each time the mouse changes states, the fill color will change and will remain the same until it changes again. Finally, there is the ellipse() method. The first argument is the x-coordinate where your ellipse center will be, the second is the y-coordinate. The third argument is the width of the ellipse and the fourth is the height. In this example, our ellipse's center will be at the mouse point (mouseX and mouseY are variables that refer to the coordinates of the mouse). and will be a circle that has a diameter of 80px.

Each time the draw() function goes through one loop, it draws a new frame without erasing what came before it. You could, for example, add the same background function from before to another if statement to reset the frame each time you press the space bar, for example.

Press the play button at the top of the screen to run your program!

p5.js vs Processing

p5.js and Processing are basically the same thing, except p5 uses JavaScript and Processing uses java. What this means is that p5 can be used in webpages! The syntax for the two are basically the same, there are just some minor syntax differences. The example below will work in p5 just like the above program:

function setup() { 
   createCanvas(1280, 720); 
   background(0,0,0,255); 
    } 
 
 function draw() { 
    stroke(255,255,255,255);
   if (mouseIsPressed) {     
       fill(255,255,255,255);   
   } 
   else {     
      fill(0,0,0,255);  
   }   
   ellipse(mouseX, mouseY, 80, 80); 
 }

I like to use the Alpha Editor because it does all of the setting up for you. You can also save your work in the cloud if you create an account. Plus, you can download the project and it will be ready to use in a web browser; just open index.html!