function preload() {

  img = loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/500px-Speaker_Icon.svg.png');

}

let volumeSlider = {

  pos: {x:0, y:0},

  radius: 12,

  velocity: {x:0, y:0}

};

​

let sticking = false;

​

​

function setup() {

  createCanvas(400, 400);

  volumeSlider.pos = {x:width-width/3, y:height/2};

  image(img, 0, 0);

}

​

function mouseOver() {

  return (mouseX > volumeSlider.pos.x - volumeSlider.radius

          && mouseX < volumeSlider.pos.x + volumeSlider.radius

          && mouseY > volumeSlider.pos.y - volumeSlider.radius

          && mouseY < volumeSlider.pos.y + volumeSlider.radius)

}

​

​

​

const solvePosition = (pos, vel, acc, dt) => {

  return pos + vel * dt + ((acc * (dt*dt)) / 2);

}

​

​

let G = 9.8 * 200;

let impulseVector;

let pulse_triggered = false;

​

function draw() {

  background(200);

  if (sticking) {

    let x = volumeSlider.pos.x;

    let y = volumeSlider.pos.y;

    if(!pulse_triggered) {

      let impulseVector = createVector(random(-0.3, 0.3), -1);

      let impulse = p5.Vector.mult(impulseVector, 200);

      volumeSlider.velocity.y = impulse.y;

      volumeSlider.velocity.x = impulse.x;

      pulse_triggered = true;

    }

    let dt = deltaTime /1000;

    volumeSlider.velocity.y = volumeSlider.velocity.y + G * dt;

    volumeSlider.pos.y = solvePosition(y, volumeSlider.velocity.y, G, dt);

    volumeSlider.pos.x = solvePosition(x, volumeSlider.velocity.x, 0, dt);

    stroke(1)

    strokeWeight(4)

    let length = 25; 

    line(width/2 - length, height/4 + length, width/2 + length, height/4 - length);

  }

  noStroke();

  //line

  rectMode(CENTER)

  fill(120)

  if(sticking) fill(180)

  rect(width/2, height/2, 240, 6, 3);

  //knob

  ellipseMode(CENTER)

  fill(0)

  ellipse(volumeSlider.pos.x, volumeSlider.pos.y, volumeSlider.radius, volumeSlider.radius)

  if(mouseOver()) { 

    cursor('grab') ;

    sticking = true;

  }

  else {

    cursor(ARROW)

  }

  imageMode(CENTER)

  image(img, width/2, height/4, 50, 50);

}