let x1; let y1; let w1;

​

/// 2 

let x2; let y2; let w2; let h2; let rollover2 = false; let c2; let click2 = false;

​

///3 

let x3; let y3; let r3; let drag3 = false; let roll3 = false; let c3; let offx3; let offy3;

​

/// 4

let drag4 = false; let roll4 = false; let x4; let y4; let d4; let sstart; let send; let offy4; let c4

​

/// 5 

let drag5; let roll5; let x5; let y5; let d5; let angle = 0; let offangle = 0;

​

​

​

function setup() {

  createCanvas(1000, 1000);

  rectMode(CENTER);

  angleMode(DEGREES)

​

  //1 

  x1 = 150;

  y1 = 150;

  w1 = 80;

​

  //2 

  x2 = 500;

  y2 = 500;

  w2 = 380;

  h2 = 115;

  c2 = 0;

​

​

  // 3

  x3 = 660;

  y3 = 250;

  r3 = 70;

  c3 = 0;

​

​

  // 4

  x4 = 890;

  y4 = 110;

  d4 = 55;

  sstart = 110;

  send = 893;

  offy4 = 0;

  c4 = 0;

​

​

  // 5

  x5 = 210;

  y5 = 812;

  d5 = 230

​

​

}

​

​

​

​

​

​

​

​

​

function draw() {

  background(255, 255, c);

  noStroke();

​

  // 4

​

  var c = map(y4, sstart, send-d4, 220, 0); 

  // 2

  // Blue switch button / rollover / pressed

​

  if (click2) {

    background(c, c, c);

​

  } else {

    background(255, 255, c);

  }

​

  fill(0, c2, 255);

  rect(x2, y2, w2, h2)

​

  if (mouseX > (x2 - (w2 / 2)) && mouseX < (x2 + (w2 / 2)) && mouseY < (y2 + (h2 / 2)) && mouseY > (y2 - (h2 / 2))) {

    rollover2 = true;

    c2 = 255;

  } else {

    rollover2 = false;

    c2 = 0;

  }

​

    // 1 

  //hold down green square

​

  fill(0, 165, 60);

  rect(x1, y1, w1, w1);

​

  if (mouseX > (x1 - (w1 / 2)) && mouseX < (x1 + (w1 / 2)) && mouseY < (y1 + (w1 / 2)) && mouseY > (y1 - (w1 / 2)) && mouseIsPressed) {

    background(0, 165, 60);

  }

​

  // 3     

  // drag circle 1

​

  fill(255, c3, 0);

​

​

  if (dist(mouseX, mouseY, x3, y3) < r3 / 2) {

    roll3 = true;

  } else {

    roll3 = false;

  }

​

  if (drag3) {

    x3 = mouseX + offx3;

    y3 = mouseY + offy3;

  }

​

​

  if (drag3){

    c3 =255;

  }

  else if (roll3) {

    c3 = 100;

  } else {

    c3 = 0;

  }

  circle(x3, y3, r3);

​

​

  // 4 -

  // Round - slider / rollover / pressed

​

  fill(255, c4, 140);

​

  if (drag4) {

    y4 = mouseY + offy4;

  }

​

  if (roll4){

    c4 = 100 ;

  }

  else {

    c4 = 0;

  }

  if (dist(mouseX, mouseY, x4, y4) < d4/2){

    roll4 = true;

  }

  else {

   roll4 = false ;

  }

  y4 = constrain(y4, sstart, send)

​

  stroke(255, 0, 140);

  line(890, sstart, 890, send);

​

  noStroke();

  circle(x4, y4, d4);

​

​

  // 5 - smile - knob 

if (drag5){

 let dx5 = mouseX -x5;

  let dy5 = mouseY -y5;

  let mouseAngle = atan2(dy5, dx5);

  angle = mouseAngle - offangle;

}

​

  if (drag5){

   fill(0, 255, 0);

  }

  else if (roll5){

   fill(150, 255, 0) ;

  }

  else {

    fill(220, 255, 0);

  }

  push();

  translate(x5, y5);

  rotate(angle);

  circle(0, 0, d5)

  stroke(255)

  strokeWeight(6)

  line (-36, -60, -36, 18)

  line (36, -60, 36, 18)

  arc (0, 0, d5-75, d5-75, 0, 180)

  pop();

  if (dist(mouseX, mouseY, x5, y5) < d5/2){

    roll5 = true

  }

  else {

   roll5 = false 

  }

}

​

​

function mousePressed() {

  if (rollover2) {

    noStroke();

    click2 = !click2;

  }

    if (roll3) {

    drag3 = true;

    offx3 = x3 - mouseX;

    offy3 = y3 - mouseY;

  }

    if (roll4){

    drag4 = true;

      offy4 = y4-mouseY;

  }

  if (roll5){

   drag5 = true;

     let dx5 = mouseX -x5;

  let dy5 = mouseY -y5;

    offangle = atan2(dy5, dx5) - angle

  }

}

​

​

​

function mouseReleased() {

  drag3 = false;

  drag4 = false;

  drag5 = false;

}