let red = 0;

let green = 15;

​

//variables for butterfly position

let butterflyX = 150;

let butterflyY = 360;

​

//variable for sun position

let sunHeight = 500; //stopping point below horizon

​

//boolean state variables 

let sunrise = true; // true for sunrise, false for sunset

let running = true; // if the sketch is running

​

function setup() {

  createCanvas(600, 400);

  noStroke();

  textSize(30);

}

​

function draw() {

  sky();

  sun();

  mountains();

  tree(150,320,10)

  tree(210,320,10)

  butterfly();

  bird(130,160,100)

  cloud(500,75,100);

  menu();

}

​

function menu() {

  // Control panel.

  fill(220);

  rect(0, 0, 70, 40);

​

  // Play button.

  if (running === true) {

    fill(255, 0, 0);

  } else {

    fill(0);

  }

  triangle(10, 10, 10, 30, 30, 20);

​

  // Pause button.

  if (running === false) {

    fill(255, 0, 0);

  } else {

    fill(0);

  }

  rect(45, 10, 5, 20);

  rect(55, 10, 5, 20);

}

​

function sky() {

  // Draw the sky.

  background(red, green, 0);

  // Update the sky's color.

  if (running) {

    if (sunrise) {

        red += 4;

        green += 1;

    } else {

        red -= 4;

        green -= 1;

    }

  }

}

​

function sun() {

  // Draw the sun.

  fill(255, 135, 5, 60);

  circle(300, sunHeight, 180);

  fill(255, 100, 0, 100);

  circle(300, sunHeight, 140);  

​

  // Update the sun's position.

  if (running) {

    if (sunrise) {

      if (sunHeight > 130) {

        sunHeight -= 2;

      } else {

        sunrise = false

        running = false

      }

    } else {

      if (sunHeight < 500) {

        sunHeight += 2;

      } else {

        sunrise = true;

        running = false;

      }

    }

  }

}

​

function mountains() {

  fill(110, 50, 18);

  triangle(200, 400, 520, 253, 800, 400);

  fill(110,95,20);

  triangle(200,400,520,253,350,400);  

  fill(150, 75, 0);

  triangle(-100, 400, 150, 200, 400, 400);

  fill(100, 50, 12);

  triangle(-100, 400, 150, 200, 0, 400); 

  fill(150, 100, 0);

  triangle(200, 400, 450, 250, 800, 400);

  fill(120, 80, 50);

  triangle(200, 400, 450, 250, 300, 400);

}

​

function tree(x, y, size) {

  fill(80, 30, 20);

  rect(x - size, y, size * 2, size * 6);

  fill(20, 130, 5); 

  triangle(x - size * 3, y, x, y - size * 8, x + size * 3, y);

}

​

function butterfly() { // random walk butterfly

  if (running) {

  butterflyX += random(-1, 1);

  butterflyY += random(-1, 1);

  }

  text('🦋', butterflyX, butterflyY);

}

​

function bird(x,y,size) {

  noFill();

  stroke(0);

  arc(x-size/2,y,size,size,PI+1,2*PI); 

  arc(x+size/2,y,size,size,PI,-1)

  noStroke();

}

​

function cloud(x,y, size) {

  fill(255);

  ellipse(x,y,size,size/1.3)

  ellipse(x+size/2,y-size/5,size/1.5,size/1.5);

}

​

​

// menu functionality through mouseclick

function mousePressed() {

  if (mouseX < 35 && mouseY < 40) {

    running = true;

  }

  if (mouseX > 35 && mouseX < 70 && mouseY < 40) {

    running = false;

  }

}

​