Learning Mathematics Through Programming and Interactive Graphics with p5.js

Juan Carlos Ponce Campuzano

Meanjin DELTA

Brisbane, Australia, November 23-28, 2025

Workshop

• What is p5.js?

What do we cover?

Part I

• Geometric transformations:

   Translation, Rotation, and Scaling

Part III

• The for loop & Conditionals

• A brief introduction to the online editor

• Motion

• Functions (If time allows it)

Part II

Part I

• What is p5.js?

• A brief introduction to the online editor

What is p5.js?

p5.js is a library and a set of tools that make it easier to use the JavaScript programming language for creative coding.

Written by

Lauren McCarthy

American artist & Computer programmer

2013

2013: Lauren McCarthy

Programming language based on

JavaScript

What is p5.js?

2013: Lauren McCarthy

Programming language based on

JavaScript

2001: Casey Reas & Ben Fry

creators of Processing

Programming language based on Java

What is p5.js?

An advantage of using p5.js is that it is based on

JavaScript

Open source

What is p5.js?

An advantage of using p5.js is that it is based on

JavaScript

The three main components of almost every website!

Open source

What is p5.js?

The main goal of p5.js (and Processing) is to learn programming through simple instructions.

What is p5.js?

😕

???

The main goal of p5.js (and Processing) is to learn programming through simple instructions.

What is p5.js?

😃

😕

Brief intro to the online editor

Sketch

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

function draw() {
  background(128, 191, 255);
  rect(80, 190, 180, 100);
  ellipse(130, 130, 200, 200);
}

Sketch: Example 1

🔗Demo

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

function draw() {
  background(249, 199, 79);
  fill(248, 150, 30);
  strokeWeight(10);
  stroke(243, 114, 44);
  rect(80, 190, 180, 100);
  fill(144, 190, 109);
  strokeWeight(20)
  stroke(87, 117, 144);
  ellipse(130, 130, 200, 200);
  fill(67, 170, 139);
  strokeWeight(25);
  stroke(249, 65, 68);
  rect(210, 250, 120, 120);
}

Sketch: Example 2

🔗Demo

Part II

• Geometric transformations:

   Translation, Rotation, and Scaling

Geometric transformations: Translation

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

function draw() {
  background(204);
  
  translate(mouseX, mouseY);
  rect(0, 0, 50, 50)

}

Geometric transformations: Translation

Activity 1

Observe what happens when we change the position coordinates of the rectangle from

(0, 0) to (-15, -15),

that is, rect(-15, -15, 30, 30)

 

Also, explore other values in the translate() function in your code and observe how the defined translation behaves.

Geometric transformations: Translation

Geometric transformations: Rotation

function setup() {
  createCanvas(400, 400);
}
 
function draw() {
  background(204);
  
  rotate(mouseX/100);
  rect(120, 120, 160, 20)
 
}

Move the mouse on the Canvas

Geometric transformations: Rotation

Activity 2

Observe what happens when we change the position coordinates of the rectangle from

(120, 100) to (-80, -10),

that is, rect(-80, -10, 160, 20)

 

With this change, where is the origin (0, 0)?

With respect to which point will the figure rotate?

Geometric transformations: Rotation

Translation and then Scaling

let angle = 0;
translate(mouseX, mouseY); 
rotate(angle);
rect(-15, -15, 30, 30); 
angle += 0.1;

Define a variable:

In the draw() write the following:

A variable stores a value in memory so it can be used later in a program. It can be reused multiple times, and its value can be easily changed while the program runs.

In the previous example, change the order of the translate() and rotate() functions. Observe what happens.

With respect to which point does the figure rotate in this case? Where does the figure move to?

Geometric transformations: Scaling

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

function draw() {
  background(204);
  
  translate(mouseX, mouseY);
  scale(mouseX/100);
  rect(0, 0, 50, 50)

}

Move the mouse on the Canvas

Geometric transformations: Scaling

Activity 3 - Notice that in the previous example, the scale() function also affects the square's border, when the scale value increases, the border becomes thicker, and vice versa. To keep the border consistent as the figure changes size, divide the border thickness by the scale factor. To do this, define the following variable inside the draw() function:

let scalarFactor = mouseX / 200;
scale(scalarFactor); 
strokeWeight(1 / scalarFactor); 
rect(-15, -15, 30, 30);

Then modify the code as follows:

Explore and analyze what happens on the canvas with these changes. Why do we divide the variable mouseX by 200? Can we divide it by a different value? What happens if we change this number?

Geometric transformations: Scaling

A little Challenge

Move the mouse on the Canvas

In the sketch on the right, an animation appears when the mouse moves over the canvas.

How could you recreate this same animation using the functions covered in this session? 

Part III

• The for loop & Conditionals

• Motion

• Functions (If time allows it)

The for loop

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

function draw() {
  background(220);

  for (let y = 32; y < height; y += 8) {//vertical
    for (let x = 12; x < width; x += 15) {// horizontal
      fill(25, 55, 255, 140);
      ellipse(x, y, 16 - y / 10, 16 - y /10);
    }
  }
  
}

How would you do this?

The for loop

Conditionals

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

function draw() {
  background(220);

  stroke(0);
  strokeWeight(10);
  line(40, 0, 120, height);

  if (mouseIsPressed === true) {
    stroke(0); // black
  } else {
    stroke(255, 0, 0); // red
  }

  square(200, 200, 50);
}
  • In the sketch on the right, you can see that the circle only grows and changes color when the mouse is inside it. How could you recreate this interaction?

Challenges

  • Create an interactive sketch where a square changes color with the mouse. That is, when the cursor is inside the square, it has one color, but when it’s outside, it has a different color.

Conditionals

Motion

function setup() {
  // Instructions to get the sketch ready
  // Runs once
}

function draw() {
  // Instructions for drawing, calculating, etc...
  // Runs continuously
}
function draw() {
  // Instructions for drawing, calculating, etc...
  // Runs continuously
}
function draw() {
  // Instructions for drawing, calculating, etc...
  // Runs continuously
}

Motion

function draw() {
  // Instructions for drawing, calculating, etc...
  // Runs continuously
}

To create smooth motion, p5.js tries to run the code inside the draw() function at a rate of 60 frames per second.

A frame is one execution of the draw() function, and the frame rate indicates how many frames are drawn per second. 

So, a program that draws 60 frames per second executes all the code inside the draw() function 60 times per second.

Motion

let angle = 0;
let amplitude = 100;
let offset = 100;
let vel = 0.05;

let diameter = 80;

function setup() {
  createCanvas(450, 200);
}

function draw() {
  background(0);
  let y = offset + sin(angle + 0.5) * (amplitude - diameter/2);
  circle(width/2, y, diameter);
  angle += vel;
}

Motion

let x = 50;
let speed = 1.5;
let direction = 1;

let diameter = 80;

function setup() {
  createCanvas(500, 200);
}

function draw() {
  background(0);
  x += speed * direction;
  if (x > width - diameter / 2 || x < diameter / 2) {
    direction = -direction; // Change direction
  }
  if (direction == 1) { // Moving to the right
    fill(255, 255, 0);
    circle(x, 100, diameter);
    fill(0);
    circle(x + 10, 80, 10);
  } else { // Moving to the left
    fill(255, 255, 0);
    circle(x, 100, diameter);
    fill(0);
    circle(x - 10, 80, 10);
  }
}

Motion

Functions

  • setup()
  • draw()
  • createCanvas()
  • line()
  • ellipse()
  • fill()
  • etc...
function myFuncion() {
  // Mis instrucciones
}

It i possible to define our own functions:

Built-in functions in p5.js

Functions

function setup() {
  myFuncion();
}

function myFuncion() {
  // Mis instrucciones
}

A computer executes programs sequentially, that is, one line of code at a time.

When a function is executed, the computer jumps to where the function is defined and runs the code there, then returns to where it was previously.

How to define functions?

function setup() {
  createCanvas(500, 200);
}

function draw() {
  background(220);
  
  for(let x = 50; x <= width; x+=100){
    pacman(x, 100, x/300);
  } 
}

function pacman(x, y, s){ 
  // x, y = position
  // s = scaling factor
  
  push();
  translate(x,y);
  scale(s);
  arc(0, 0, 50, 50, 3.67, 8.9)
  pop();
  
}

Documentation

p5js.org/reference/

Tutorials

p5js.org/tutorials/

Community

p5js.org/about/#community-statement

Learning Mathematics Through Programming and Interactive Graphics with p5.js

By Juan Carlos Ponce Campuzano

Learning Mathematics Through Programming and Interactive Graphics with p5.js

Learning Mathematics Through Programming and Interactive Graphics with p5.js

  • 43

More from Juan Carlos Ponce Campuzano