interactive self portrait 

  by Qingyun Zhu

  10/10/2022

*/

​

function setup() {

  createCanvas(400, 400);

   }

​

function elli(x,y,d,w,s)

{

  t=s%PI;

  noFill();

  stroke('rgb(255,255,255)');

  strokeWeight(w);

  //ellipse(x,y,d,d);

  for(i=0;i<20;i+=2){

    strokeCap(PROJECT);

    arc(x,y,d,d,t*0.1*PI*(i),t*0.1*PI*(i+1));

  }

}

​

function draw() {

  background("#C0EC8D");

      var x = 100;

      var y = 200;

      var h = 300; // height

      var w = 150

​

      var t = second();

      var Millis = millis();

      var s = millis()/1000;

      elli(70,300,130,6,s+0.5*PI);

​

      elli(100,20,60,4,s+0.8*PI);

​

      elli(390,170,120,6,s);

      elli(mouseX,mouseY,40,3,s+0.3*PI);

​

​

      strokeWeight(1)

      //hair part-1

      fill('#000000');

      noStroke();

      arc(x+95, y+80, w+30, h+50, PI, TWO_PI);

​

       //cloth

      beginShape();

      fill('#73CFF9');

      stroke(0);

      vertex(x+130,y+80);

      vertex(x+200,y+120);

      vertex(x+250,y+200);

      vertex(x-50,y+200);

      vertex(x,y+120);

      vertex(x+60,y+80);

      vertex(x+130,y+80);

      endShape(); 

​

      //neck

      noStroke();

      beginShape();

      fill('#FDEBE6');

      vertex(x+80,y+50);

      vertex(x+80,y+70);

      vertex(x+60,y+80);

      vertex(x+95,y+100);

      vertex(x+130,y+80);

      vertex(x+110,y+70);

      vertex(x+110,y+50);

      endShape();

​

      //face

      stroke(0);

      fill('#FDEBE6');

      ellipse(x+95, y, 110,130);

      //eyes

      if (mouseIsPressed) {

        close();

        } else {

          eye(mouseX,mouseY);

      }

​

​

       //hair part-2

      fill(0);

      noStroke();

      arc(x+95,y-20,110, 100, PI, TWO_PI);

      rect(x+50,y-40, 87, 20,2);

      stroke(x+153,y+45,230);

      line(x+70,y-40,170,180);

      line(x+90,y-40,190,180);

      line(x+110,y-33,210,180);

​

​

      //bow-knot

      fill('#F61D0D');

      noStroke();

      triangle(x+85,y+90,x+85,y+110,x+95,y+100);

      triangle(x+105,y+90,x+105,y+110,x+95,y+100);

      rect(x+93,y+97,w-145, h-293,2);

​

      //arm

      stroke('#017D8D');

      strokeWeight(1);

      line(x+20,y+150,x,y+200);

      line(x+180,y+150,x+200,y+200);

​

      //ears

      fill('#FDEBE6');

      noStroke();

      arc(x+42, y+10, 20, 20, 0.5*PI, 1.5*PI);

      arc(x+147, y+10, 20, 20, 1.5*PI, 0.5*PI);

​

      //nose

      noStroke();

      fill('#E49797');

      triangle(x+95,y+10,x+95,y+25,x+90,y+22);

      function eye(x,y) {

        if(x<=400)

          tx=x/400*15;

        else

          tx=15;

       if(y<=400)

         ty=y/400*30;

       else

        ty=30;

        noStroke();

​

        fill('#090909');

        rect(155+tx,190,15,23);//left

        rect(205+tx,190,15,23);//right

        stroke('#090909');

        line(160,190,180,190);

        arc(162+tx,213,15,15,0,PI);

        line(210,190,230,190);

        arc(212+tx,213,15,15,0,PI);

​

        noStroke();

        fill(255,255,255,50);

        ellipse(162+tx,225,10,10);

        ellipse(212+tx,225,10,10);

        fill(255,255,255);

        ellipse(170+tx,190+ty,8,5);

        ellipse(220+tx,190+ty,8,5);

​

        fill('#F91100');

        noStroke();

        triangle(190,240,200,240,195,245); 

​

      }

​

function close()

  {   

    strokeWeight(2)

      line(165,190,180,200);

      line(165,210,180,200);//left eye

      line(235,190,220,200);

      line(235,210,220,200);//right eye

      noFill();

      strokeWeight(1);

      arc(195,240,10,7,PI,0);

  }

  }

​

​