function setup() {

  createCanvas(400, 400);

}

​

//called every frame

function draw() {

  //making the sunset background

  background("#6863D9");

  noStroke();

  fill("#988ce2");

  rect(0,60,400,60);

  noStroke();

  fill("#8158b8");

  rect(0,120,400,60);

  noStroke();

  fill("#F27158");

  rect(0,180,400,60);

  noStroke();

  fill("#FCA965");

  rect(0,240,400,60);

  //making the sun

  noStroke();

  fill("#f86c1e");

  circle(200,310,100);

  //making the cloud

  noStroke();

  fill(250,95,85)

  circle(37,78,80)

  noStroke();

  fill(250,95,85)

  circle(75,47,95)

  noStroke();

  fill(250,95,85)

  circle(94,101,75)

  noStroke();

  fill(250,95,85)

  circle(142,68,80)

  noStroke();

  fill(250,95,85)

  circle(171,102,70)

  //making the window

  //big bottom box

  noStroke();

  fill("#183f59");

  rect(0,300,400,100);

  //left vertical

  noStroke();

  fill("#183f59");

  rect(0,0,15,300);

  noStroke();

  fill(250,95,85)

  circle(208,84,60)

  noStroke();

  fill(250,95,85)

  circle(130,89,60)

  noStroke();

  fill(250,95,85)

  circle(342,232,60)

  noStroke();

  fill(250,95,85)

  circle(375,204,60)

  noStroke();

  fill(250,95,85)

  circle(322,196,60)

  noStroke();

  fill(250,95,85)

  circle(352,164,60)

  noStroke();

  fill(250,95,85)

  circle(297,225,60)

  noStroke();

  fill(250,95,85)

  circle(280,183,60)

  noStroke();

  fill(250,95,85)

  circle(256,206,60)

  //right vertical

  noStroke();

  fill("#183f59");

  rect(400-15,0,15,300);

  //middle vertical

  noStroke();

  fill("#183f59");

  rect(200-7.5,0,15,300);

  //top horizontal

  noStroke();

  fill("#183f59");

  rect(0,0,400,15);

  //middle horizontal

  noStroke();

  fill("#183f59");

  rect(0,160,400,12);

  //highlight top left

  noStroke();

  fill(255,255,255,70);

  rect(30,30,20,50);

  noStroke();

  fill(255,255,255,70);

  rect(30,30,50,20);

  //highlight top right

  noStroke();

  fill(255,255,255,70);

  rect((200-7.5)+30,30,20,50);

  noStroke();

  fill(255,255,255,70);

  rect((200-7.5)+30,30,50,20);

  //highlight bottom left

  noStroke();

  fill(255,255,255,70);

  rect(30,190,20,50);

  noStroke();

  fill(255,255,255,70);

  rect(30,190,50,20);

  //highlight bottom right

  noStroke();

  fill(255,255,255,70);

  rect((200-7.5)+30,190,20,50);

  noStroke();

  fill(255,255,255,70);

  rect((200-7.5)+30,190,50,20);

  //body

  noStroke();

  fill(35);

  rect(150,270,100,400-270);

  ellipse(150, 370, 70, 200)

  ellipse(250, 370, 70, 200)

  noStroke();

  fill(50);

  ellipse(198, 294, 135,45);

  ellipse(198, 294+40,150,45);

  ellipse(198, 294+80,170,45);

  //zipper

  stroke(40);

  strokeWeight(10);

  line(200,275,200,400);  

  stroke(70);

  strokeWeight(2);

  line(200,275,200,400);

  rect(200,316,5,7);

  //arms

  stroke(40);

  strokeWeight(3);

  line(162, 313, 162, 400);

  line(236, 313, 236, 400);

  //scarf

  noStroke();

  fill("#101D6B");

  ellipse(200,268,140,60);

  ellipse(200,248,110,60);

  ellipse(200,200,120,150);

  fill("#001e4e");

  ellipse(200,200,100,130);

  noFill();

  stroke("#001e4e")

  arc(199,261,100,40,0,PI)

  //face

  noStroke();

  fill("#f4c2a8");

  ellipse(200,215,95,100);

  triangle(198,141,162,185,234,181);

  fill("#d6a17e");

  triangle(198,141,182,161,214,161);

  fill(213,100,124,70);

  ellipse(167,221,25,20);

  ellipse(231,221,25,20);

  stroke("#d6a17e");

  noFill();

  arc(199,221,4,2,0,PI)

  stroke(213,100,124);

  noFill();

  arc(198,232,30,4,0,PI)

  //glasses

  fill(255,255,255,90);

  quad(164,190,191,190,188,215,167,215);

  quad(205,190,232,190,228,215,209,215);

  noFill();

  strokeWeight(2);

  stroke(35);

  quad(164,190,191,190,188,215,167,215);

  quad(205,190,232,190,228,215,209,215);

  line(164,201,156,194);

  line(190,201,207,201);

  line(244,194,230,201);

  //eyes

  noFill();

  strokeWeight(5);

  arc(219,205,20,20,PI,0);

  arc(176,205,20,20,PI,0);

  strokeWeight(3);

  arc(175,180,20,4,PI,0);

  arc(222,180,20,4,PI,0);

}

​

//to find exact coordinate of where my mouse is

function mouseClicked(){

  console.log('coordinate at ('+ mouseX + ", " + mouseY + ")")

}