🔢 Math Helpers

Useful math functions for games — random numbers, measuring distance, and keeping values in range.

random(min, max?)

Gives you a random number. With one argument, it picks between 0 and that number. With two arguments, it picks between the first and second number.

Parameter	Type	Description
`min`	`number`	The lowest possible value (or the max if only one argument)
`max`optional	`number`	The highest possible value

Returns: A random number in the range

Tip: random(10) gives 0 to 10. random(5, 15) gives 5 to 15. The result includes decimals — use Math.floor(random(10)) if you want whole numbers.

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  noStroke();

  for (let i = 0; i < 50; i++) {
    fill("rgba(100, 50, 255, 0.5)");
    circle(random(400), random(300), random(5, 20));
  }
}

dist(x1, y1, x2, y2)

Measures the distance between two points. Super useful for collision detection in games!

Parameter	Type	Description
`x1`	`number`	X of the first point
`y1`	`number`	Y of the first point
`x2`	`number`	X of the second point
`y2`	`number`	Y of the second point

Returns: The distance in pixels

Tip: To check if two circles are touching, see if dist() between their centers is less than the sum of their radii.

function setup() {
  size(400, 300);
}

function draw() {
  background("white");
  let centerX = 200, centerY = 150;
  let d = dist(mouseX, mouseY, centerX, centerY);

  if (d < 50) {
    fill("tomato");
  } else {
    fill("dodgerblue");
  }

  noStroke();
  circle(centerX, centerY, 50);

  fill("black");
  textSize(16);
  text("Distance: " + Math.round(d), 10, 20);
}

constrain(val, lo, hi)

Keeps a number within a range. If the number is too low, it returns the minimum. If too high, it returns the maximum. Otherwise, it returns the number unchanged.

Parameter	Type	Description
`val`	`number`	The number to constrain
`lo`	`number`	The minimum allowed value
`hi`	`number`	The maximum allowed value

Returns: The constrained number

Tip: Perfect for keeping a player character inside the canvas: x = constrain(x, 0, width).

let x = 200;

function setup() {
  size(400, 200);
}

function draw() {
  background("white");

  if (keyIsDown("ArrowLeft")) x -= 3;
  if (keyIsDown("ArrowRight")) x += 3;

  x = constrain(x, 20, 380);

  fill("dodgerblue");
  noStroke();
  circle(x, 100, 20);

  fill(150);
  textSize(12);
  text("Arrow keys move, but can't leave the canvas!", 50, 180);
}

map(value, fromLow, fromHigh, toLow, toHigh)

Remaps a number from one range to another. For example, if the mouse goes from 0 to 400, you can map it to a size from 10 to 100.

Parameter	Type	Description
`value`	`number`	The number to remap
`fromLow`	`number`	Lower bound of the current range
`fromHigh`	`number`	Upper bound of the current range
`toLow`	`number`	Lower bound of the target range
`toHigh`	`number`	Upper bound of the target range

Returns: The remapped number

Tip: map(50, 0, 100, 0, 400) returns 200 — because 50 is halfway in the first range, so it's halfway in the second range too!

function setup() {
  size(400, 300);
}

function draw() {
  background("white");

  let circleSize = map(mouseX, 0, 400, 10, 100);
  let r = map(mouseX, 0, 400, 0, 255);
  let b = map(mouseY, 0, 300, 255, 0);

  fill("rgb(" + r + ",100," + b + ")");
  noStroke();
  circle(200, 150, circleSize);
}

lerp(a, b, t)

Blends between two numbers. t=0 gives you the first number, t=1 gives you the second, and t=0.5 gives you halfway between them. Great for smooth movement!

Parameter	Type	Description
`a`	`number`	The starting value
`b`	`number`	The ending value
`t`	`number`	How far between them (0 to 1)

Returns: The blended number

Tip: Use a small t (like 0.05) for smooth easing — the circle will glide toward the target instead of jumping.

let x = 200, y = 150;

function setup() {
  size(400, 300);
}

function draw() {
  background("white");

  x = lerp(x, mouseX, 0.05);
  y = lerp(y, mouseY, 0.05);

  fill("dodgerblue");
  noStroke();
  circle(x, y, 30);

  fill(180);
  textSize(12);
  text("Circle follows mouse smoothly!", 100, 280);
}

randomInt(a, b?)

Gives you a random whole number (no decimals). With one argument, picks from 0 up to (but not including) that number. With two arguments, picks between them (inclusive).

Parameter	Type	Description
`a`	`number`	Max (exclusive) or min (if b given)
`b`optional	`number`	Max (inclusive)

Returns: A random integer

Tip: randomInt(6) gives 0, 1, 2, 3, 4, or 5 — like rolling a die! randomInt(1, 6) gives 1 through 6.

function setup() {
  size(400, 300);
}

function draw() {
  background("midnightblue");
  noStroke();

  for (let i = 0; i < 20; i++) {
    let x = randomInt(0, 400);
    let y = randomInt(0, 300);
    let s = randomInt(5, 15);
    fill("rgba(255,255,255,0.6)");
    circle(x, y, s);
  }
}