let maxSlider = 31; //max value on the slider

let sliderX;

let defaultText = 'Moonrise and Moonset Time';

const buttonW = 50;

const sliderPadding = 20;

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  noStroke();

  rectMode(CENTER);

  textSize(14);

  textAlign(CENTER, CENTER);

  sliderX = width / 2;

}

​

function draw() {

   background(0);

   noStroke();

  //Time

  let hr = hour();

  let mn = minute();

  let sc = second();

  background(0);

  //if/else

  if(mouseX>width/2 + 80){

    background(0)

  }else{

   background(0,0,100); 

  }

  //Moon

  let x1 = map(sliderX, 0, 200, 0, 200);

  arc(sliderX,sliderX,100,100,0,x1,OPEN);

  strokeWeight(3);

  stroke(204,250,0);

  noFill();

  let end = map (hr, 0, 60, 0, 360);

  arc(sliderX,sliderX,100,100,0,end);

  let x2 = map(sliderX, 0, width, 0, 100, true);

  //Mountains

//further mountain

  fill(91, 71, 110);

  strokeWeight(0);

  triangle(360, 330, 760, 600, -40, 600);

//closer one

  fill(114, 89, 130);

  strokeWeight(0);

  triangle(160, 400, 500, 600, -260, 600);

​

  //Slider

  let currentPos = map(sliderX, sliderPadding, width - sliderPadding, minSlider, maxSlider);

  fill(255);

  stroke(255);

  rect(width / 2, height - buttonW, width - sliderPadding *6, buttonW/6, 25);

  ellipse(sliderX, height - buttonW, 30, 30);

​

  //Text

  noStroke();

  fill(255);

  text(defaultText, width / 2, height-100);

  //mousePressed

  if (mouseIsPressed) {

    if (mouseX > sliderPadding + buttonW / 2 && mouseX < width - (sliderPadding + buttonW / 2)) {

      sliderX = mouseX;

     }

     defaultText = ceil(currentPos);

}

}