const ySunEnd = 300;

let darkSkyTransparency = 255;

​

function setup() {

  createCanvas(600, 600);

  ySunPosition = height;

  //background("blue");

}

​

function draw() {

 //background("blue");

  background(115,221,236);

  if(ySunPosition > ySunEnd){

    noStroke();

    // draw night sky.

    fill(0,0,160, darkSkyTransparency--);

    rect(0,0,600,600 );

    // draw sunrise stripes.

    let sunRiseStripeHeight = 100;

    fill('yellow');

    rect(0, 300, 600, sunRiseStripeHeight);

    fill('orange');

    rect(0, 400, 600, sunRiseStripeHeight);

    fill("red");

    // rect(x, y, width, height)

    rect(0, 500, 600, sunRiseStripeHeight);

  }else{

    // sun has risen, draw grass

    fill('green'); 

    rect(0, 550, 600, 50);  

    //draw clouds

    fill('lightgray');

    ellipse(80, 50, 180, 50);

    ellipse(150, 150, 200, 60);   

    ellipse(300, 100, 140, 50);   

    ellipse(470, 80, 180, 60);

  }

  stroke('black')

  fill("yellow"); 

  circle(300,ySunPosition,150);

  fill('orange');

  circle(300,ySunPosition,100);

  if(ySunPosition > ySunEnd){

    ySunPosition = ySunPosition - 1;

  }

 // print("ySunPosition=", ySunPosition);

}