Animation with p5.js and ChatGPT

p5-code-chatgpt.js

let canvasWidth = 360; // Adjust based on device's width
let canvasHeight = 640; // Adjust based on device's height

let ball = {
  x: 200,
  y: 200,
  diameter: 50,
  xSpeed: 5,
  ySpeed: 4,
  color: '' // Color will be set in setup
};

let backgroundColor; // Variable to store the background color

function setup() {
  createCanvas(canvasWidth, canvasHeight);
  ball.color = getRandomColor(); // Initialize ball color
  backgroundColor = getRandomColor(); // Initialize background color
  noStroke();
}

function draw() {
  background(backgroundColor);
  
  // Update ball position
  ball.x += ball.xSpeed;
  ball.y += ball.ySpeed;
  
  // Check for collision with the walls
  if (ball.x > width - ball.diameter / 2 || ball.x < ball.diameter / 2) {
    ball.xSpeed *= -1;
    ball.color = getRandomColor(); // Change ball color on bounce
    backgroundColor = getRandomColor(); // Change background color on bounce
  }
  if (ball.y > height - ball.diameter / 2 || ball.y < ball.diameter / 2) {
    ball.ySpeed *= -1;
    ball.color = getRandomColor(); // Change ball color on bounce
    backgroundColor = getRandomColor(); // Change background color on bounce
  }

  // Draw the ball
  fill(ball.color);
  ellipse(ball.x, ball.y, ball.diameter);
}

// Function to generate a random color
function getRandomColor() {
  return color(random(255), random(255), random(255));
}