createCanvas(400, 400);

  background(1, 22, 80);

}

​

var startX, startY;

var toX, toY;

var incr = 2.5; 

​

function draw() {

  var Skin = color(199, 148, 100);

  var Neck = color(173, 127, 83);

  var shirt = color(60, 65, 64);

  var black = color(25, 12, 1);

  var glasses = color(56, 0, 0,127);

  var mouth = color(250, 220, 204,100);

  var lips = color(135, 92, 86);

  var hair = color(24,21,17);

  var lake = color(38, 91, 120); 

  background(1, 22, 80, 1.5);

  if (random() > 0.95) {

    stroke(255);

    point(random(width), random(height));

  }

  // draw stars

  if (random() > 0.95 && incr >= 2.5) {

    startX = random(width);

    startY = random(height/2);

    toX = random(startX+5, width);

    toY = random(startY+5, height/2); // on top of the canvas since we have a ground 

    incr = 0; //Everytime a star is created the step is set to 0

  }

  // draw shooting stars

  if (incr < 2.5) { // fade background 

    let nextincr = incr + 0.02; //Incrementing

    strokeWeight(4);

    stroke(1, 22, 80, 30); // Drawing the line as same as the background

    line(startX, startY, toX, toY); 

    strokeWeight(2);

  //draw star

    if (incr < 1) { //Drawing actual star

      stroke(255); //White color

      line(lerp(startX, toX, incr), lerp(startY, toY, incr), 

      lerp(startX, toX, nextincr), lerp(startY, toY, nextincr));

      background(1, 22, 80, 1.4);

    }

     incr = nextincr; //Step up 

  }

  //draw ground

  noStroke();

  fill(0, 10, 20);

  rect(0, height*0.6, width, height);

  //draw lake

  noStroke();

  fill(lake);

  ellipse(0, height+38, width*2.2, height*0.95);

  //draw moon

  fill(230,230,180);

  ellipse(25,29,29,29);

  //draw mountains

  fill((66, 129, 165))

  noStroke();

  triangle(width-100, height*0.6, height, height*0.6, height-50, 110);

  fill(35, 144, 79)

  noStroke();

  triangle(width-125, height*0.6, height-25, height*0.6, height-75, 120);

  //Code for body and Face

  noStroke();

  fill(Skin);

  rect(width/2-35, height/2, 70, 100); // Neck Rectangle 

  fill(shirt);

  rect(width/2-75, height/2+75, 150, 130);

  ellipse(width/2-70, height-5, 120, 240); //left shoulder

  ellipse(width/2+70, height-5, 120, 240); //right shoulder

  fill(255);

  quad(247, 322, 262, 338, 253, 338, 241, 328);

  //.  top1

  quad(240, 329, 250, 338, 243, 338, 236, 334);

  triangle(235, 335, 240, 338, 230, 338);

​

  fill(Skin);

  ellipse(width/2, height/2+75, 70, 60);

​

  fill(Neck);

  ellipse(width/2, height/2+10, 82, 100);

​

  fill(Skin);

  ellipse(width/2-2, height/2-30, 120, 155);

​

  //Ears

  ellipse(width/2-62, height/2-27, 20, 40);

  ellipse(width/2+60, height/2-27, 20, 40);

  fill(hair);

  quad(width/2+55, height/2-20, width/2+25, 115, 251, 100, 257, 150);

  ellipse(width/2+40, height/2-90, 27, 39);

  ellipse(width/2-10, height/2-100, 100, 45);

  quad(width/2-55, height/2-20, 155, 115, 141, 100, 137, 150);

​

  //Eyes

  fill(255);

  ellipse(175, 173, 10, 12);

  ellipse(225, 173, 10, 12);

  fill(black);

  ellipse(175, 173, 5, 5);

  ellipse(225, 173, 5, 5);

  //Eyebrows

  noFill();

  stroke(black);

  strokeWeight(3);

  strokeWeight(3);

  arc(width/2-25, height/2-32, 39, 30, 3.1 + QUARTER_PI, TWO_PI-0.6);

  arc(width/2+25, height/2-32, 39, 30, 3.1 + QUARTER_PI, TWO_PI-0.6);

​

  // Glassess

  fill(glasses);

  stroke(0.1);

  ellipse(width/2-25, height/2-28, 30, 30);

  ellipse(width/2+25, height/2-28, 30, 30);

  line(width/2-40,height/2-27,width/2-60,height/2-45);

  line(width/2+40,height/2-27,width/2+55,height/2-45);

  line(width/2-10,height/2-27,width/2+11,height/2-27);

  // Mouth 

  fill(mouth)

  stroke(lips)

  arc(width/2, height/2+20, 40, 20, 0, PI);

  line(width/2-20, height/2+20, width/2+20, height/2+20);

  //Nose 

  stroke(Neck);

  strokeWeight(2);

  fill(Neck)

  ellipse(width/2, height/2-2, 12, 22);

  //Additional line for shirt

  stroke(lake);

  strokeWeight(3);

  line(width/2-75, height-60 ,width/2-75, height);

  line(width/2+75, height-60 ,width/2+75, height);

​

  //Mouse coordinate printed on screen

  fill(255, 50, 30);

  text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

}

​