P5.js Shape Animation Code Snippets

Posted on Feb 15, 2025 in Physical Education

P5.js Shape Animation

This code demonstrates a simple shape animation using the P5.js library. It creates a shape that moves around the canvas and changes its color and size when it hits the edges.

Code Snippets:

Snippet 1: Color Object

Creates an object to store the color (red, green, blue, alpha) of the shape.


/* COMPLETE 1*/
// Create one object to store the color (r, g, b, a)
var shapeColor = {
  r: 0,
  g: 0,
  b: 0,
  a: 255
};
/* END 1*/

Snippet 2: Variable Initialization


var position = {
  x: 0,
  y: 0
};
var size, directionX, directionY;
var strokeWeight_;
var canvasX, canvasY;
var speed;

function setup() {
  /* COMPLETE 2*/
  // Initialize variables
  strokeWeight_ = 2;
  speed = 6;
  /* END 2*/
  canvasX = 600;
  canvasY = 400;
  createCanvas(canvasX, canvasY);
  generateShape();
}

Snippet 3: Display and Animate


function draw() {
  background(0);
  strokeWeight(strokeWeight_);
  /* COMPLETE 3*/
  // Call the functions to display and animate the shape
  displayShape();
  animateShape();
  /* END 3*/
}

Snippet 4: Shape Generation

Generates random values for the shape’s color, size, and direction.


function generateShape() {
  position.x = width / 2;
  position.y = height / 2;
  /* COMPLETE 4*/
  // Generate random values for the color, size, direction
  shapeColor.r = random(0, 255);
  shapeColor.g = random(0, 255);
  shapeColor.b = random(0, 255);
  shapeColor.a = random(100, 255);
  size = random(10, 60);
  directionX = random(-1, 1);
  directionY = random(-1, 1);
  /* END 4*/
}

Snippet 5: Shape Display

Displays the shape (an ellipse) on the canvas.


function displayShape() {
  /* COMPLETE 5*/
  // Display the shape
  fill(shapeColor.r, shapeColor.g, shapeColor.b, shapeColor.a);
  noStroke();
  ellipse(position.x, position.y, size, size);
  /* END 5*/
}

Snippet 6: Shape Animation

Animates the shape by updating its position and checking for edge collisions.


function animateShape() {
  /* COMPLETE 6*/
  // Animate the shape
  position.x += directionX * speed;
  position.y += directionY * speed;

  checkEdges();
  /* END 6*/
}

// Check if the shape is outside the canvas
function checkEdges() {
  if (position.x < 0 || position.x > width || position.y < 0 || position.y > height) {
    generateShape();
  }
}

Additional Code (Error Correction)

The following code snippets contain errors and are not properly formatted. They appear to be related to collision detection and object interaction, but need significant correction.


//Example of incorrect code:
var distance = dist(player.x, player.y, ball.x, ball.y);
if (distance < player.size / 2 + ball.size / 2)
  if (player.x - player.size / 2 < 0) {  player.x = 0 + player.size / 2; }
if (player.x + player.size / 2 > 400) { player.x = 400 - player.size / 2; }
if (player.y - player.size / 2 < 0) {  player.y = 0 + player.size / 2; }
if (player.y + player.size / 2 > 400) {  player.y = 400 - player.size / 2; }
if (ball.x - ball.width / 2 < pala.x + pala.width) {
  if (ball.x + ball.width / 2 > pala.x) {
    if (ball.y - ball, height / 2 < pala.y + pala.height) {
      if (ball.y + ball.height / 2 > pala.y) {
        speed = -speed;
      }
    }
  }
}

This section requires further context (definitions of `player`, `ball`, and `pala` objects) to be corrected and integrated properly.

P5.js Shape Animation Code Snippets