Let’s look at some things that are both easy to do in p5.js and are potentially useful for physics and astronomy sims.

1. Changing the size of things

Here we see a circle that is located at the center (x = width/2 and y=height/2). Its radius is set by the third argument: sin(theta). theta is a variable that will change every frame, as indicated by the line:

theta += 0.001

which increments theta by 0.01 about 30 times per second. (every time the draw function repeats)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var theta=0;

function setup() {
  canvas = createCanvas(300, 200);
}

function draw() {
  background(200);
  ellipse(width/2,height/2,100*sin(theta))
  theta+=0.01;
}


You could also change the size based on user input. Here is a circle hooked up to a slider:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setup() {
  canvas = createCanvas(300, 200);
  aSlider = createSlider(0,100,50,1)
  aSlider.position(10,10)
}

function draw() {
  background(200);
  radius = aSlider.value()
  ellipse(width/2,height/2,radius)
}


2. Making things move

Since shapes and added objects will need positions, we can keep changing them all the time, which is just another way of saying the thing is moving. Now, instead of changing the radius argument of the ellipse function, we’ll change the vertical position: y = height/2 + 30*sin(theta). Again, we’ll change theta by 1 every frame.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var theta = 0;
function setup() {
  canvas = createCanvas(300, 200);  
}

function draw() {
  background(200);
  radius = 20
  ellipse(width/2,height/2+30*sin(theta),radius)
  theta+=.1;
}


And of course, this change could be effected by user input too:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function setup() {
  canvas = createCanvas(300, 200);
  aSlider = createSlider(-100,100,0,1)
  aSlider.position(10,10)
}

function draw() {
  background(200);
  yOffset = aSlider.value()
  ellipse(width/2,height/2-yOffset,20)
}


Naturally, we can combine these things into a single sketch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var theta = 0;
function setup() {
  canvas = createCanvas(300, 200);
  aSlider = createSlider(-100,100,0,1)
  aSlider.position(10,10)
}

function draw() {
  background(200);
  yOffset = aSlider.value()
  ellipse(width/2,height/2-yOffset,50*sin(theta))
  theta+=.01
}


another way to move things:

We can also make things change position by using the translate(∆x,∆y) function. This simply translates the position of everything below it in the draw routine. This time we’ll move a rectangle (rect()).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function setup() {
  canvas = createCanvas(300, 200);
  xSlider = createSlider(0,width,0,1)
  ySlider = createSlider(0,height,0,1)
  xSlider.position(10,10)
  ySlider.position(10,40)
}

function draw() {
  background(200);
  translate(xSlider.value(),ySlider.value())
  rect(0, 00, 50, 80);
}


Similar to translate, is the rotate() function. This will rotate the object. Here we translate the object to the center

x = width/2 and y = height/2

Then rotate it by a constantly increate theta value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var theta = 0;
function setup() {
  canvas = createCanvas(300, 200);
  rectMode(RADIUS)
}

function draw() {
  background(200);
  translate(width/2,height/2)
  rotate(theta)
  rect(0, 0, 10, 15);
  theta+=.01;
}


Note the the order of translate and rotate makes a difference. This sketch below will rotate it, then translate, which effectively changes the center of rotation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var theta = 0;
function setup() {
  canvas = createCanvas(300, 200);
  rectMode(RADIUS)
}

function draw() {
  background(200);
  rotate(theta)
  translate(width/2,height/2)
  rect(0, 0, 10, 15);
  theta+=.01;
}


For more on making things move, see this tutorial here: making-things-move

3. Doing things over and over

Perhaps the most useful feature of using computers is that they are happy doing the same thing over and over. So, let’s say we wanted to make many things, all doing similar, but slightly different actions. This sketch is structure to

a) create a class called makeABall() (think of it like a collections of function )

b) repeatedly create instances of this class and store them in an array (this uses a for loop)

c) update the array and in doing so, update each of the balls.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var balls = []
function setup() {
  canvas = createCanvas(300, 200);
  for (var i=0; i<50; i++) {
    balls.push(new makeABall());
  }
}

function draw() {
  background(200);
  translate(width/2,height/2)
  for (var i=0; i<balls.length; i++) {
    balls[i].update();
    balls[i].display();
  }
}

function makeABall(){
  this.theta = random(0,360);
  this.r = random(30,50);
  this.diameter = random(10, 30);
  this.update = function() {
    this.theta+=.01
  };
  this.display = function() {
    ellipse(this.r*cos(this.theta), this.r*sin(this.theta), this.diameter);
  };
}


The most confusing part of the above sketch is probably all the this. things there. Those just add a little bit of information to the balls. For example, this.theta defines the rotation of that particular ball (not all the balls since we want each one to be a little different.)

4. Much more

If you’re feeling comfortable with the basics now, take a look at these examples:

p5 examples

or the sciencesims catalog:

science sims

for many more sketches to spark your creativity.