let xSpeed, ySpeed; 

let circleColor;  

let angle = 0;    

let squareSize = 100; 

let squareX, squareY; 

let squareXSpeed = 2; 

let squareYSpeed = 3;

let stripeOffset = 0; 

​

function setup() {

  createCanvas(590, 550); 

  background(48, 25, 52); 

​

  // Initial position of the circle at the center

  x = width / 2;

  y = height / 2;

​

  // Initial position of the square at the center

  squareX = width / 2;

  squareY = height / 2;

​

  // Set initial speed values for the circle

  xSpeed = 3;

  ySpeed = 2;

​

  // Set initial color to yellow

  circleColor = color(255, 255, 0); // Yellow color

}

​

function draw() {

  // Draw semi-transparent background to create fading shadow effect

  background(48, 25, 52, 25); // The last parameter controls the opacity to leave the trace

​

  drawVerticalStripes(); // Call the function to draw animated vertical stripes

​

  // Draw and move the rotating square, with bouncing behavior

  push(); // Save current drawing state

  translate(squareX, squareY); // Move the origin to the square's current position

  rotate(radians(angle)); // Rotate by the angle (converted to radians)

  fill(255); // Set fill color to white

  noStroke(); // No outline

  rectMode(CENTER); // Set rectMode to center

  rect(0, 0, squareSize, squareSize); // Draw a square with size 100x100

  pop(); // Restore the previous drawing state

​

  // Increment the angle for clockwise rotation

  angle += 2; // Increase the angle for rotation

​

  // Update the position of the square

  squareX += squareXSpeed;

  squareY += squareYSpeed;

​

  // Check for collision with the edges of the canvas for the square

  if (squareX > width - squareSize / 2 || squareX < squareSize / 2) {

    squareXSpeed *= -1; // Reverse horizontal direction

    changeSquareSize(); // Change the size of the square

  }

  if (squareY > height - squareSize / 2 || squareY < squareSize / 2) {

    squareYSpeed *= -1; // Reverse vertical direction

    changeSquareSize(); // Change the size of the square

  }

​

  // Draw the bouncing circle with movement shadow trace

  fill(circleColor); // Set fill color to current circle color

  noStroke(); // Remove the outline of the circle

  ellipse(x, y, 50, 50); // Draw the circle with a diameter of 50

​

  // Update the position of the circle

  x += xSpeed;

  y += ySpeed;

​

  // Check for collision with the edges of the canvas for the circle

  if (x > width - 25 || x < 25) { // 25 is the radius of the circle (half of diameter)

    xSpeed *= -1; // Reverse horizontal direction

    changeCircleColor(); // Change color

  }

  if (y > height - 25 || y < 25) {

    ySpeed *= -1; // Reverse vertical direction

    changeCircleColor(); // Change color

  }

​

  // Update the offset to shift the vertical stripes

  stripeOffset += 2; // Adjust this value to control the speed of the shifting

}

​

function changeSquareSize() {

  // Change the square size to a random value between 50 and 150

  squareSize = random(50, 150);

}

​

function changeCircleColor() {

  // Change the color to a random color

  circleColor = color(random(255), random(255), random(255));

}

​

function drawVerticalStripes() {

  stroke(255, 255, 0); // Set the stroke color to yellow

  strokeWeight(4); // Set the width of the stripes

​

  // Draw vertical stripes with shifting offset

  for (let i = stripeOffset % 20; i < width; i += 20) {

    line(i, 0, i, height);

  }

}

​

​

​

​

​