The quickest way to get started building a sim will be to use the web editor. That can be found here:

https://editor.p5js.org/

Press the play button and a small window will pop up that is all gray. This is your canvas being drawn with a gray background. It’s not very interesting because there is nothing to be drawn.

In the coding window, you will see two functions: setup() and draw(). These functions are the most basic elements of a p5 sketch.

The setup() function is called once in the beginning, when you press the play button. Then, the draw() function is called over and over again, about 30 times a second.

So, let’s start by putting something in the setup function:

1
2
3
4
5
6
7
8
9
10
11

function setup(){
  ellipse(10,30,20,40);
  // from collection
}

function draw(){

}

I put in a command to draw an ellipse. Inside the parenthesis for this command are 4 arguments. The indicate where the ellipse should be, and how big it should be. So, this ellipse will be located at x=10 and y=30 and it will have a horizontal diameter of 20px and a vertical diameter of 40px.

Congrats! You made an ellipse. However, it doesn’t do anything.

So, let’s put the ellipse command in the draw() function instead. This means it will get repeated about 30 times a second (depending on the speed of the computer).

1
2
3
4
5
6
7
8
9
10

function setup(){

}

function draw(){
  ellipse(50 + random(-5,5),50 + random(-5,5),20,20);
}

Notice, I also added a small random number to each of the position arguments: 50+random(-5,5). This means that every time the draw function is called, it will pick a new random number (between -5 and +5) to add to the original position. So, we expect a jittery, nervous looking ellipse on our canvas.

That should be enough to spark some interest. Maybe you’re wondering: are there other shapes? For sure. You’ll need to consult the reference docs to learn how they work.

Link to p5.js reference docs