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 eac