​

// notes: change single letter variable names IMPORTANT

​

// cloud variables

let cloudx = 150;

let cloudy = 150;

let cloud_speed = 0.7;

​

function makeCloud(cloudx, cloudy) {

  fill(250)

  noStroke();

  ellipse(cloudx, cloudy, 70, 50);

  ellipse(cloudx + 10, cloudy + 10, 80, 50);

  ellipse(cloudx - 15, cloudy + 10, 80, 50);

}

​

​

// simple slider

let dragging = false; // is the slider being dragged?

let rollover = false; // is the mouse over the slider?

​

// clouds:

var cloud1 = 0;

var cloud2 = 0;

var cloud3 = 0;

var on = true;

​

​

// rectangle variables for slider

let x = 100;

let y = 400;

let w = 20;

let h = 50;

​

// start and end of slider

let sliderStart = 200;

let sliderEnd = 500;

​

// offset for dragging slider

let offsetX = 0;

​

function setup() {

  createCanvas(700, 500);

}

​

​

function clouds() {

  noStroke()

  fill(245, 250, 250, 200);

  ellipse(100, 200, 200, 80);

  ellipse(120, 210, 150, 90);

}

​

​

function draw() {

  strokeWeight(3);

  background(255);

​

​

  // is the slider being dragged?

  if (dragging) {

    x = mouseX + offsetX;

  }

  // keep rectangle within limits of slider

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

​

  // draw a line for slider

  stroke(0);

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

​

  stroke(0);

  // fill according to state

  if (dragging) {

    fill(0);

  } else {

    fill(255);

  }

  // draw rectangle for slider

  rect(x, y, w, h);

​

​

  // sky || frame

  let a = map(x, sliderStart, sliderEnd - w, 65, 37);

  let b = map(x, sliderStart, sliderEnd - w, 212, 39);

  let c = map(x, sliderStart, sliderEnd - w, 255, 138);

  fill(a, b, c);

  rect(50, 50, 600, 300);

  // sun (and updating the color based on position of slider)

  if (b > 180) {

    noStroke();

    fill(255, 247, 0);

    circle(120, 120, 110);

  } else if (b > 160) {

    noStroke();

    fill(255, 247, 0, 200);

    circle(120, 120, 110);

  } else if (b > 150) {

    noStroke();

    fill(255, 139, 0);

    circle(120, 120, 110);

  } else if (b > 110) {

    noStroke();

    fill(255, 139, 0, 100);

    circle(120, 120, 110);

  }

​

​

  // clouds

  noStroke();

  fill(255);

  ellipseMode(CENTER);

​

​

  ellipse(250, 150, 60, 70);

  ellipse(280, 140, 60, 80);

  ellipse(330, 140, 100, 60);

  ellipse(270, 170, 60, 50);

  ellipse(310, 165, 160, 50);

​

​

  // new clouds

  makeCloud(cloudx, cloudy-50);

  makeCloud(cloudx + 100, cloudy + 100);

  // mountains:

  fill("#A78D62");

  noStroke();

  triangle(100, 348.5, 400, 348.5, 250, 150);

  fill("#9C6D21");

  triangle(300, 348.5, 500, 348.5, 400, 200);

  // making the clouds move

  cloudx+=cloud_speed;

  // making the clouds move withing the frame only

  if (cloudx > width-200 || cloudx < 110){

    cloud_speed *= -1; // the speed would be constant in each could travel

    // cloud_speed *= -2; // but this artwork is called crazy clouds so :x

  }

  // moon

  let d = map(x, sliderStart, sliderEnd - w, 65, 37);

  let e = map(x, sliderStart, sliderEnd - w, 212, 39);

  let f = map(x, sliderStart, sliderEnd - w, 255, 138);

​

  if (b < 140) {

    noStroke();

    fill(255, 90);

    circle(580, 120, 110);

  }

  if (b < 130) {

    noStroke();

    fill(255, 100);

    circle(580, 120, 110);

  }

  if (b < 120) {

    noStroke();

    fill(255, 150);

    circle(580, 120, 110);

  }

  if (b < 110) {

    noStroke();

    fill(255);

    circle(580, 120, 110);

  }

}

​

​

// mouse functions on the slider

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 to corner of rectangle

    offsetX = x - mouseX;

  }

}

​

function mouseReleased() {

  // stop dragging

  dragging = false;

}

​

​