let moonSize;

let rotateAngle;

let sunAngle;

let skyColor;

let oceanImg;

let sunImg;

let moonImg;

​

const Y_AXIS = 1;

const X_AXIS = 2;

let c1, c2;

​

var mouse = 0;

​

function preload(){

  oceanImg = loadImage('ocean.png');

  sunImg = loadImage('sun.png');

  moonImg = loadImage('moon.png');

  highSound = loadSound('high.wav');

  lowSound = loadSound('low.wav');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  angleMode(DEGREES);

  rectMode(CENTER);

  sunSize = height*0.25;

  moonSize = height*0.18;

  rotateAngle = 0;

  sunAngle = 90;

  skyColor = 50;

  skyChange = 0;

}

​

​

function draw() {

  background(skyColor);

  c1 = color(204,102,0,100);

  c2 = color(0,102,153,100);

  c3 = color(255,0);

  setGradient(0,0,width,height,c2,c1,Y_AXIS);

  if(mouse==0){

    skyColor = 50;

    Start();

  }

  if(mouse==1){

      if (sunAngle>360){

    sunAngle -=360;

  }

  if (sunAngle<0){

    sunAngle +=360;

  }

  if(sunAngle>=0 & sunAngle<=90){

    skyColor = map(sunAngle,0,90,80,255);

  }

  if(sunAngle<=360 & sunAngle>=270){

    skyColor = map(sunAngle,270,360,0,80);

  }

  if(sunAngle>=90 & sunAngle<=180){

    skyColor = map(sunAngle,90,180,255,80);

  }

  if(sunAngle>=180 & sunAngle<=270){

    skyColor = map(sunAngle,180,270,80,0);

  }

  //print(sunAngle);

  //print(skyColor);

    drawSun();

    drawMoon();

    drawMountain();

    setGradient(0,0,width,height,c3,c1,Y_AXIS);

    drawClock();

  }

}

​

function keyPressed(){

  if(key == 'c'){

    rotateAngle += 15;

    print("Right");

    highSound.play();

  }

  if(key == 'x'){

    rotateAngle -= 15;

    print("Left");

    lowSound.play();

  }

  sunAngle = 90+rotateAngle;

}

​

​

function mouseClicked(){

  mouse = 1;

}

​

function Start(){

  textAlign(CENTER);

  fill(250);

  textStyle(BOLD);

  textSize(height*0.09);

  text("Day and Night",width*0.5,height*0.32);

  textStyle(NORMAL);

  textSize(height*0.06);

  text("The Rotation of the Earth",width*0.5,height*0.45);

  textStyle(ITALIC);

  textSize(height*0.04);

  text("Tap the screen to start.",width*0.5,height*0.6);

}

​

function drawSun(){

  push();

  fill(211,33,45);

  translate(width*0.5,height*0.7)

  rotate(sunAngle);

  image(sunImg,-height*0.6-sunSize*0.5,-sunSize*0.5,sunSize,sunSize)

  //ellipse(-height*0.5,0,sunSize);

  pop();

}

​

function drawMoon(){

  push();

  fill(255,191,0);

  translate(width*0.5,height*0.9)

  rotate(sunAngle);

  image(moonImg,height*0.7-moonSize*0.5,-moonSize*0.5,moonSize,moonSize)

  //ellipse(height*0.5,0,moonSize);

  pop();

}

​

​

function drawMountain(){

  for(y=height*0.8; y<height*1.1; y+=height*0.07){

    fill(30+noise(y*100)*250,100+noise(y*100)*80,50+noise(y*100)*80,180);

    beginShape();

    curveVertex(-width*0.2,height*1.2);

    curveVertex(-width*0.2,height*1.2);

    for(x=-width*0.2;x<=width*1.2;x+=width*0.1){

       curveVertex(x,-abs(noise((x+y)*10))*height*0.4+y);

     }

    curveVertex(width*1.2,height*1.2);

    curveVertex(width*1.2,height*1.2);

    endShape();

  }

}

​

function drawClock(){

  translate(height*0.2,height*0.2);

  push();

  fill(255);

  for(i=0;i<=12;i++){

     rotate(30);

     rect(0,height*0.1,height*0.01);

   }

  pop();

  var dir = p5.Vector.fromAngle(2*PI/3+sunAngle/90*PI,height*0.05);

  push();

  stroke(255);

  strokeWeight(height*0.01);

  line(0,0,dir.x,dir.y);

  pop();

}

​

​

function setGradient(x, y, w, h, c1, c2, axis) {

  push();

  noFill();

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

  pop();

}