let rollover = false; // Is the mouse over the slider?

​

let r = 20;

let cx = 20;

​

function setup() {

  createCanvas(510, 510);

  x = random(width);

  y = random(height);

  xspeed = 10;

  yspeed = 3;

}

​

function draw() {

  background(0);

​

  //capture range

  rectMode(CENTER);

  stroke(200, 0, 0);

  strokeWeight(2);

  noFill();

  square(mouseX, mouseY, 40,10);

  square(mouseX, mouseY, 50,15);

​

  //draw the ball

  noStroke();

  fill(255);

  circle(x, y, r);

​

  if (

    x - 20 > mouseX ||

    y - 20 > mouseY ||

    x + 20 < mouseX ||

    y + 20 < mouseY

  ) {

    x = x + xspeed;

    y = y + yspeed;

    if (x + r >= width) {

      xspeed = -xspeed;

      x = width - r;

    } else if (x <= 0) {

      xspeed = -xspeed;

      x = 0;

    }

​

    if (y + r >= height) {

      yspeed = -yspeed;

      y = height - r;

    } else if (y <= 0) {

      yspeed = -yspeed;

      y = 0;

    }

  } else {

    x = mouseX;

    y = mouseY;

  }

​

  //slider bar

  fill(100, 0, 0);

  rect(width / 2, 25, 470, 10, 5);

​

  //use slider to change ball speed

  if (dragging) {

    fill(255, 0, 0);

    if (mouseX <= 20) {

      noStroke();

      circle(20, 25, 25);

      cx = 20;

      xspeed = (5 * 20) / 40;

      yspeed = (5 * 20) / 10;

    } else if (mouseX > 490) {

      noStroke();

      circle(490, 25, 25);

      cx = 490;

      xspeed = (5 * 490) / 20;

      yspeed = (5 * 490) / 40;

    } else if (37 < mouseX <= 217) {

      noStroke();

      circle(mouseX, 25, 25);

      cx = mouseX;

      xspeed = (5 * mouseX) / 30;

      yspeed = (5 * mouseX) / 20;

    }

  } else {

    circle(cx, 25, 20); //document slide position when mouse released

  }

}

​

function mousePressed() {

  // Did I click on slider?

  dragging = true;

}

​

function mouseReleased() {

  // Stop dragging

  dragging = false;

}

​