let Stars=[]; //Array for Stars

function setup() {

  createCanvas(400, 400);

  //Loop to create x,y coords for stars

  for(let i=0;i<50;i++){

    let x= random(height);

    let y=random(width);

    Stars.push(createVector(x,y));

  }

​

}

​

//common function for drawing clouds

function drawCloud(x, y, size) {

  fill(255);

  noStroke();

  ellipse(x, y, size, size * 0.7);

  ellipse(x + size * 0.5, y, size, size * 0.7);

  ellipse(x - size * 0.5, y, size, size * 0.7);

  ellipse(x, y + size * 0.3, size, size * 0.7);

}

​

//What happens when mouse is clicked

function mouseClicked(){

  isDay=!isDay;

  //The following piece of code ensures that the stars are at new positions 

  //everytime the mouse is clicked

  Stars=[];

  for(let i=0;i<50;i++){

    let x= random(height);

    let y=random(width);

    Stars.push(createVector(x,y));

  }

}

​

function draw() {

  if(isDay){

  background(173,216,230);

  strokeWeight(2);

  // Sun

  fill(255, 255, 0);

  ellipse(50, 50, 40, 40);

​

​

  // Clouds

  drawCloud(100, 80, 40);

  drawCloud(300, 70, 50);}

  else{

    //night

    background(0);

    //Stars

    fill(250);

    noStroke();

    for(let i=0;i<Stars.length;i++){

      let Star=Stars[i]; //Star is variable of type Vector

      ellipse(Star.x,Star.y,2,2)

    }

     //Moon

    fill(200);

    ellipse(50,50,40,40);

  }

  // Face

  push();

  noFill();

  stroke(0);

  fill(255, 200, 150);

  ellipse(200, 200, 200, 200);

​

  // Eyes

 // Draw left eye

  fill(255);

  ellipse(170, 180, 30, 20); // Eye white

  fill(0);

  ellipse(170, 180, 15, 20); // Pupil

  fill(255);

  ellipse(170, 177, 5, 5); // Highlight

​

  // Draw right eye

  fill(255);

  ellipse(230, 180, 30, 20); // Eye white

  fill(0);

  ellipse(230, 180, 15, 20); // Pupil

  fill(255);

  ellipse(230, 177, 5, 5); // Highlight

​

  // Nose

  noFill();

  triangle(200, 200, 190, 220, 210, 220);

​

  // Ears

  fill(255,200,150)

  ellipse(100, 200, 30, 40);

  ellipse(300, 200, 30, 40);

​

  // Hair

  fill(100, 50, 50);

  arc(200, 140, 200, 120, PI, TWO_PI);

  triangle(100,180,100,140,120,140);

  triangle(300,180,300,140,280,140);

  // Mouth

  noFill();

  arc(200, 250, 100, 30, 0, PI);

  pop();

​

​

  // Half Ellipse for Lower Part of the Body

  fill('#F44336');

  arc(200, 400, 200, 200, PI, TWO_PI);

  //shirt 

  fill('white');

  quad(190,300,210,300,210,400,190,400); //rectangle

  fill('pink');

  circle(200,310,10); // (x,y,diameter)

  circle(200,330,10); 

  circle(200,350,10); 

  circle(200,370,10); 

  circle(200,390,10); 

  //Text 

  if(isDay){

  fill(0);}

  else{

    fill(255);

  }

  textSize(20);

  text("Click",180,20);

​

​

  //Convenience code to show x,y coords

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {

    // Display coordinates

    fill(0);

    textSize(16);

    text("Mouse Coordinates: " + mouseX + ", " + mouseY, 10, height - 10);

  }

​

}

​

​

​