let ballX, ballY;

let ballRadius = 20;

let xSpeed = 5;

let ySpeed = 3;

let speedSlider;

​

function setup() {

  createCanvas(400, 400);

  ballX = random(ballRadius, width - ballRadius);

  ballY = random(ballRadius, height - ballRadius);

​

  // Create the speed slider

  speedSlider = createSlider(.1, 10, 1, .1);

  speedSlider.position(10, 10);

  speedSlider.size(380);

}

​

function draw() {

  background(220);

​

  // Update ball speed based on the slider value

  let sliderValue = speedSlider.value();

  if (xSpeed > 0)

    xSpeed = sliderValue

    else xSpeed = -sliderValue;

  if (ySpeed > 0)

    ySpeed = sliderValue

    else ySpeed = -sliderValue;

​

  // Move the ball

  ballX += xSpeed;

  ballY += ySpeed;

​

  // Check for wall collisions

  if (ballX < ballRadius || ballX > width - ballRadius) {

    xSpeed *= -1;

  }

  if (ballY < ballRadius || ballY > height - ballRadius) {

    ySpeed *= -1;

  }

​

  // Draw the ball

  fill(0, 0, 255);

  circle(ballX, ballY, ballRadius * 2);

}