let h1 = 550;

let w2_button = 100;

let h2 = 480;

let w3_button = 100;

let h3 = 410;

let bgColor = 222;

​

let slider1;

let slider2;

let slider3; 

​

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

​

}

​

function mousePressed() {

  if (50 < mouseX && mouseX < 110 && 30 < mouseY && mouseY < 90) {

    if (bgColor == 222) {

      bgColor = 10;

    } else if (bgColor == 10) {

      bgColor = 222;

    }

  }

}

​

function draw() {

  background(bgColor,bgColor, bgColor, 40); 

  //line(100,0, 100, 600);

  //line(0, 400, 600, 400);

  push();

  translate(random(600), random(600));

  rotate(frameCount * 50.0);

  star(0, 0, 30, 70, 5);

  pop();

​

  push();

  strokeWeight(10);

  stroke(255);

  fill(color('red'));

  rect(80, 60, 60, 60, 30);

  pop();

  //slider1

  push();

  strokeWeight(5);

  rect(100, h1, 180, 15, 8); 

  push();

  noStroke();

  rect(w1_button, h1, 60, 50, 30);

  pop();

  let slider1 =  push();

  strokeWeight(5);

  rect(100, h1, 180, 15, 8); 

  push();

  noStroke();

  rect(w1_button, h1, 60, 50, 30);

  pop();

   if (mouseIsPressed) {

     if (mouseY > h1 - 25 && mouseY < h1 + 25 && mouseX > w1_button - 30 && mouseX < w1_button + 30) {

       w1_button = constrain(mouseX, 41, 159);

     }

   }

  pop();

​

​

  //slider2

  push();

  strokeWeight(5);

  rect(100, h2, 180, 15, 8); 

  push();

  noStroke();

  rect(w2_button, h2, 60, 50, 30);

  pop();

   if (mouseIsPressed) {

     if (mouseY > h2 - 25 && mouseY < h2 + 25 && mouseX > w2_button - 30 && mouseX < w2_button + 30) {

       w2_button = constrain(mouseX, 41, 159);

     }

   }

  pop();

  //slider3

  push();

  strokeWeight(5);

  rect(100, h3, 180, 15, 8); 

  push();

  noStroke();

  rect(w3_button, h3, 60, 50, 30);

  pop();

   if (mouseIsPressed) {

     if (mouseY > h3 - 25 && mouseY < h3 + 25 && mouseX > w3_button - 30 && mouseX < w3_button + 30) {

       w3_button = constrain(mouseX, 41, 159);

     }

   }

  pop();

}

​

​

​

​

function star(x, y, radius1, radius2, npoints) {

  let angle = TWO_PI / npoints;

  let halfAngle = angle / 2.0;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius2;

    let sy = y + sin(a) * radius2;

    vertex(sx, sy);

    sx = x + cos(a + halfAngle) * radius1;

    sy = y + sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

​