let W=550;

  createCanvas(W+20,W);

  // yellow background

  background(235,175,60);

  // table

  fill(38,53,95);

  rect(0,W/2,W+20,W/2);

    //--- pattern on table---

    stroke(255);

    strokeWeight(3);

    //horizontal line

    line(0, 5/8*W, W+20, 5/8*W);

    line(0, 6/8*W, W+20 ,6/8*W);

    line(0, 7/8*W, W+20, 7/8*W);

    //straight line

    line(1*W/6, W/2, 0*W/6 ,W);

    line(2*W/6, W/2, 1*W/6 ,W);

    line(3*W/6, W/2, 2*W/6 ,W);

    line(4*W/6, W/2, 3*W/6 ,W);

    line(5*W/6, W/2, 4*W/6 ,W);

    line(6*W/6, W/2, 5*W/6 ,W);

    //--- pattern on table---

    push();

    //pop on line 88

    translate(30,0);

    // move the main charactor

      // ----- cup -----

      //plate under the cup

      noStroke();

      fill(220);

      ellipse(1/3*W,5/6*W,335,135);

​

      //cup base

      fill(255);

      ellipse(1/3*W,5/6*W,155,30);

      triangle(105,460,260,460,(105+260)/2,410);

​

      //cup body

      ellipse(1/3*W,1/2*W+30,230,270);

      //left

      rect(68,170,230/2,270/2);

      //right

      rect(68+230/2,170,230/2,270/2);

      //nose

      triangle(290,310,330,300,290,210);

​

      //top ellipse

      ellipse(1/3*W,1/3*W-15,230,65);

      //coffee

      fill(200,70,50);

      ellipse(1/3*W,1/3*W-10,184,45);

​

      //eye

      fill(0);

      circle(260,258,25);

      //handle

      noFill();

      stroke(255);

      strokeWeight(25);

      ellipse(1/7*W,W/2+10,100,150);

        //   ---letteart---

        //body

        fill(255);

        noFill();

        stroke(255);

        strokeWeight(6);

        arc(1/3*W,1/3*W-5,120,20,0,PI);

        arc(1/3*W,1/3*W-13,100,15,0,PI);

        arc(1/3*W,1/3*W-19,60,10,0,PI);

        //top heart

        fill(255);

        ellipse(1/3*W-5,1/3*W-25,6,6);

        ellipse(1/3*W+5,1/3*W-25,6,6);

        //middle line

        ellipse(1/3*W,1/3*W-5,5,38);

    pop();

  //get back to normal x,y coordinate

  //spoon

  fill(255);

  push();

  translate(335,450);

  rotate(PI/2.8);

  ellipse(0,0,45,60);

  pop();

  //spoon grip

  fill(255);

  strokeWeight(10);

  line(355,440,470,385);

  //sugar

  rect(430,W/2-35,30,30);

  rect(475,W/2-35,30,30);

  rect(450,W/2-80,30,30);

    //--- hair cloud ---

    push();

    //left cloud

    translate(10,15);

    scale(0.8);

​

    ellipse(100,80,80,30);

    ellipse(120,50,40,30);

    ellipse(170,50,70,40);

    ellipse(200,80,60,40);

    ellipse(150,85,80,60);

​

    //right cloud

    translate(300,70);

    scale(0.6);

​

    ellipse(100,80,80,30);

    ellipse(120,50,40,30);

    ellipse(170,50,70,40);

    ellipse(200,80,60,40);

    ellipse(150,85,80,60);

​

    pop();

    //glasses

    noFill();

    stroke(0);

    strokeWeight(5);

    rect(260,235,55,50,20);

    line(315,253,335,245);

    line(260,260,98,230);

  // active to print mouseX & mouseY,

  // put whole codes in function draw

  //-----

  // fill(255)

  // let X=mouseX;

  // let Y=mouseY;

  // noStroke();

  // textSize(20);

  // text(mouseX,500,50);

  // text(mouseY,500,80);

  //-----    

}

​

// function draw(){

// }

​

​

​