let ballSpeed = 3; // speed of the ball

let ballDiameter = 30; // diameter of the ball

let grayValue; // grayscale value for the ball's color

​

function setup() {

  createCanvas(600, 200); 

  ballX = width / 2; // start ball in the center

}

​

function draw() {

  background(220); 

​

  // update the ball's position

  ballX += ballSpeed;

​

  // check for collision with the edges

  if (ballX < 0 || ballX > width - ballDiameter) {

    ballSpeed *= -1; // reverse the direction

  }

​

  // calculate the grayscale value based on position

  if (ballX < width / 2) {

    grayValue = 255 - (ballX / (width / 2)) * 255; // from white to gray

  } else {

    grayValue = (ballX - width / 2) / (width / 2) * 255; // from gray to black

  }

​

  // set the fill color

  fill(grayValue); // fill color

  ellipse(ballX, height / 2, ballDiameter, ballDiameter); // draw the ball

}

​