Final challenge: Catch the circle: cheat sheet

Drawing and animation with p5.js · In any playground, open Reference to copy these.

frameCount

How many frames have been drawn so far. It goes up by 1 every frame.

frameCount

dist

The straight distance between two points. Two things touch when it is small.

dist(mouseX, mouseY, ball.x, ball.y)

map

Turns a number in one range into the matching number in another.

map(i, 0, 11, 255, 120)

Example

function setup() {
  createCanvas(200, 130);
  noStroke();
  for (let i = 0; i < 10; i++) {
    fill(map(i, 0, 9, 255, 40), 120, 200);
    circle(20 + i * 18, 65, 16);
  }
}

mousePressed

p5 runs this each time the mouse is clicked. You never call it yourself.

function mousePressed() {
  ...
}

sin and cos

cos gives how far across and sin how far up or down for a point going round a circle (angle in radians; radians(30) converts degrees).

150 + cos(angle) * 100