👾 Sprites & Collision

Sprites are movable game objects — rectangles with position, size, velocity, and color. Create them, draw them, move them, and check for collisions!

createSprite(x, y, w, h)

Creates a new sprite — a game object with position, size, and velocity. The sprite starts with no velocity, white color, and visible. You can change these properties anytime!

Parameter	Type	Description
`x`	`number`	X position of the top-left corner
`y`	`number`	Y position of the top-left corner
`w`	`number`	Width in pixels
`h`	`number`	Height in pixels

Returns: A Sprite object with {x, y, w, h, vx, vy, color, visible}

Tip: A sprite is just a plain object — you can add your own properties too! Like player.score = 0 or player.name = "hero".

let player = createSprite(100, 200, 30, 30);
player.color = "dodgerblue";

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

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

  if (keyIsDown("ArrowLeft")) player.x -= 3;
  if (keyIsDown("ArrowRight")) player.x += 3;
  if (keyIsDown("ArrowUp")) player.y -= 3;
  if (keyIsDown("ArrowDown")) player.y += 3;

  drawSprite(player);
}

drawSprite(sprite)

Draws a sprite on the canvas as a colored rectangle. It uses the sprite's own .color property, ignoring the current fill/stroke settings.

Parameter	Type	Description
`sprite`	`Sprite`	The sprite to draw

Tip: If sprite.visible is false, drawSprite() won't draw anything. Use this to hide sprites without deleting them!

let box = createSprite(150, 100, 60, 60);
box.color = "tomato";

let coin = createSprite(50, 50, 20, 20);
coin.color = "gold";

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

function draw() {
  background("midnightblue");
  drawSprite(box);
  drawSprite(coin);
}

moveSprite(sprite)

Moves a sprite by adding its velocity to its position (x += vx, y += vy). Set .vx and .vy on the sprite to control how fast and in what direction it moves.

Parameter	Type	Description
`sprite`	`Sprite`	The sprite to move

Tip: Positive vx moves right, negative moves left. Positive vy moves down, negative moves up.

let ball = createSprite(50, 140, 20, 20);
ball.color = "gold";
ball.vx = 2;

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

function draw() {
  background("midnightblue");
  moveSprite(ball);
  drawSprite(ball);

  if (ball.x > width) ball.x = -ball.w;
}

collides(a, b)

Checks if two sprites are overlapping. Returns true if any part of sprite A is touching any part of sprite B. This is AABB (axis-aligned bounding box) collision detection.

Parameter	Type	Description
`a`	`Sprite`	The first sprite
`b`	`Sprite`	The second sprite

Returns: true if the sprites overlap, false if not

Tip: collides() checks rectangles. For circle collision, use dist() instead.

let player = createSprite(50, 130, 30, 30);
player.color = "dodgerblue";
let target = createSprite(200, 130, 40, 40);
target.color = "tomato";

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

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

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

  if (collides(player, target)) {
    target.color = "gold";
  } else {
    target.color = "tomato";
  }

  drawSprite(player);
  drawSprite(target);

  fill("white");
  textSize(14);
  text("Move into the red box!", 120, 20);
}

overlap(sprite, x, y)

Checks if a single point (x, y) is inside a sprite. Great for checking if the mouse is over a sprite, or if a bullet hit something.

Parameter	Type	Description
`sprite`	`Sprite`	The sprite to check
`x`	`number`	X position of the point
`y`	`number`	Y position of the point

Returns: true if the point is inside the sprite

let button = createSprite(150, 120, 100, 50);
button.color = "dodgerblue";
let message = "Hover over me!";

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

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

  if (overlap(button, mouseX, mouseY)) {
    button.color = "gold";
    message = "You found me!";
  } else {
    button.color = "dodgerblue";
    message = "Hover over me!";
  }

  drawSprite(button);
  fill("white");
  textSize(16);
  text(message, 140, 100);
}

applyGravity(sprite, amount?)

Makes a sprite fall by increasing its vertical velocity (vy) each frame. The default gravity strength is 0.5, but you can pass a different value.

Parameter	Type	Description
`sprite`	`Sprite`	The sprite to apply gravity to
`amount`optional	`number`	How strong the gravity is (default: 0.5)

Tip: A smaller amount (like 0.2) makes floaty gravity. A bigger amount (like 1.0) makes heavy gravity. Try different values!

let ball = createSprite(200, 50, 20, 20);
ball.color = "tomato";

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

function draw() {
  background("midnightblue");
  applyGravity(ball);
  moveSprite(ball);

  if (ball.y + ball.h > height) {
    ball.y = height - ball.h;
    ball.vy *= -0.8;
  }

  drawSprite(ball);
}

bounceEdges(sprite)

Makes a sprite bounce off the canvas edges. When the sprite hits a wall, its velocity is reversed and its position is clamped so it stays inside.

Parameter	Type	Description
`sprite`	`Sprite`	The sprite to bounce

Tip: bounceEdges checks all four edges — top, bottom, left, and right.

let balls = [];

function setup() {
  size(400, 300);
  for (let i = 0; i < 5; i++) {
    let b = createSprite(random(350), random(250), 20, 20);
    b.color = "hsl(" + (i * 72) + ", 80%, 60%)";
    b.vx = random(-4, 4);
    b.vy = random(-4, 4);
    balls.push(b);
  }
}

function draw() {
  background("midnightblue");
  for (let i = 0; i < balls.length; i++) {
    moveSprite(balls[i]);
    bounceEdges(balls[i]);
    drawSprite(balls[i]);
  }
}