var r = 0;

var b = 0;

​

// stroke width

​

var wi = 5;

​

// button

​

​

var button = false;

​

var x1 = 80;

var y1 = 80;

var w1 = 100;

var h1 = 100;

​

​

// Slider

​

var dragging = false; // Is the slider being dragged?

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

​

// ellipse variables for slider

var x = 100;

var y = 60;

var w = 50;

var h = 50;

// Start and end of slider

var sliderStart = 300;

var sliderEnd = 800;

// Offset for dragging slider

var offsetX = 0;

​

// animation

​

var x2 = 0;

var y2 = 0;

​

​

function setup() {

  createCanvas(1024, 768);

}

​

function draw() {

  background(200,0,200);

      stroke(255);

​

    // button

  // The button is pressed if (mouseX,mouseY) is inside the ellipse and mousePressed is true.

  if ((dist(mouseX, mouseY, x1, y1) < w1/2) && mouseIsPressed) {

    button = true; 

  } else {

    button = false;

  }

​

 if (button) {

   b = 0;

   wi = 10;

​

  } else {

    stroke(255);

       b = 255;

       wi = 5;

  }

  fill(255,120,255);

  ellipse(x1,y1,w1,h1);

​

    // slider

  // Is it being dragged?

  if (dragging) {

    x = mouseX + offsetX;

  }

  // Keep ellipse within limits of slider

  x = constrain(x, sliderStart, sliderEnd-w);

​

  // Draw a line for slider

  stroke(2);

  line(sliderStart, y+h/2, sliderEnd, y+h/2);

​

  stroke(0);

  // Fill according to state

  if (dragging) {

    fill (50);

  } else {

    fill (255,120,255);

  }

  // circle slider

  ellipse(x, y, w, h);

​

  // map the slider's range to a value between 0 and 255

 var r = map(x,sliderStart,sliderEnd-w,0,255);

fill(r);

  // animated ellipse

   if (x2 > 0.5) {

    strokeWeight(wi);

    stroke(255, 255, b)

    fill(r,0,100)

    ellipse(x2, y2, x2+1, y2+1);

  } 

  else {

    rect(x2, y2+10, x2+1, y2+1);

  }

​

  x2 += 10;

  if (x2 > width) {

    x2 = 0;

    y2 += 20;

  }

​

  if (y2 > height) {

    background(255);

    x2 = 0;

    y2 = 0;

  }

​

}

​

​

​

function mousePressed() {

  // Did I click on slider?

  if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {

    dragging = true;

    // If so, keep track of relative location of click 

    offsetX = x-mouseX;

  }

}

​

function mouseReleased() {

  // Stop dragging

  dragging = false;

}