by Alina Perdomo

9/21/22 */

​

//background

var xBackCircle = 50;

var yBackCircle = 75;

​

​

var x = 200;

var y = 300;

var hairSize = 150;

​

function setup() {

  createCanvas(400, 600);

  }

​

function draw() {

  //background

  r = map(mouseY, 0, 255, 200, 0);

  b = map(mouseY, 0, 255, 0, 70);

  background(r, 0, b); 

​

  x= width / 2;

  y= height / 2;

  //background

  noStroke();  

  //1st row

   fill('#6DC7B4');

  circle(xBackCircle,yBackCircle,150);

   fill('#645DA9');

  circle(xBackCircle+150,yBackCircle,150);

   fill('#F47729');

  circle(xBackCircle+300,yBackCircle,150);

  //2nd row

  fill('#F6B0CF');

  circle(xBackCircle,yBackCircle+150,150);

  fill('#6DC7B4');

  circle(xBackCircle+150,yBackCircle+150,150);

  fill('#EF4153');

  circle(xBackCircle+300,yBackCircle+150,150); 

        //3rd row

  fill('#F47729');

  circle(xBackCircle,yBackCircle+300,150);

  fill('#6DC7B4');

  circle(xBackCircle+150,yBackCircle+300,150);

  fill('#645DA9');

  circle(xBackCircle+300,yBackCircle+300,150);

          //4th row

  fill('#EF4153');

  circle(xBackCircle,yBackCircle+450,150);

  fill('#6DC7B4');

  circle(xBackCircle+150,yBackCircle+450,150);

  fill('#F6B0CF');

  circle(xBackCircle+300,yBackCircle+450,150);

  //hair (back)

      //right

   stroke('#34251D');

  fill('#34251D');

  circle (x, y-95,hairSize+50);

   circle (x+70, y-90,hairSize);

   circle (x+100, y-30,hairSize+20);

  circle (x+110, y+30,hairSize+10);

  circle (x+130, y+50,hairSize-20);

   circle (x+120, y+150,hairSize-20);

   circle (x+80, y+160,hairSize-20);

  //left

    stroke('#34251D');

  fill('#34251D');

   circle (x-70, y-90,hairSize);

   circle (x-100, y-30,hairSize+20);

  circle (x-110, y+30,hairSize+10);

  circle (x-130, y+50,hairSize-20);

   circle (x-120, y+150,hairSize-20);

   circle (x-80, y+160,hairSize-20);

​

  //neck

  noStroke();

  rectMode(CENTER);

  fill('#FCD1BB');

  rect(x,y+170,80,100); 

  //headshadow

    fill('#CCA28B');

  arc(x,y+120,80,40,0,PI);

    //earrings

        //left

  noFill();

  strokeWeight(3);

  stroke('#DBA514');

  ellipse(x-100,y+45,30,60);

        //right

  noFill();

  stroke('#DBA514');

  ellipse(x+100,y+45,30,60);  

  //head

  noStroke();

  fill('#FCD1BB');

  ellipse(x, y-20, 235, 310); 

  //body

  fill('#000000');

  rect (x,y+340,370,300,100); 

  //vneck

  fill('#FCD1BB');

   beginShape();

  vertex(x-40, y+190);

  vertex(x+40, y+190);

  vertex(x, y+310);

 endShape(CLOSE);

  //necklace

  stroke('#DBA514');

  strokeWeight(5);

  bezier(x-39, y+190, x, y+210, x, y+210, x+39, y+190);

    //nose

  fill ('#F4C1A6');

  stroke('#CCA28B');

  strokeWeight(0.5);

  circle (x-11,y+32,17);

  circle (x+11,y+32,17);

  noStroke();

  rect(x,y+10,23,50);

  circle (x,y+35,20);

  //lips

        //top

  fill('#EA9292');

  circle (x-6,375,15);

  circle (x+6,375,15);

  triangle(x+8, y+82, x+8, y+67, x+38, y+82);

  triangle(x-8, y+82, x-8, y+67, x-38, y+82);

        //bottom

  fill('#CA5D5D');

 noStroke();

  arc(x,y+80,70,28,0,PI);

   //hair bangs (right)

  fill('#34251D');

  strokeWeight(20);

  stroke('#34251D');

​

  beginShape();

  vertex(x, y-150);

  bezierVertex(x+10, y-120, x+20, y-115, x+40, y-120);

  bezierVertex(x+40, y-120, x+60, y-120, x+60, y-100);

  bezierVertex(x+60, y-100, x+50, y-70, x+90, y-70);

  bezierVertex(x+90, y-70, x+110, y-70, x+110, y-40);

  bezierVertex(x+110, y-30, x+100, y, x+140, y-10);

  bezierVertex(x+140, y-100, x+50, y/3, x, y-180);

 endShape(CLOSE);

      //hair bangs (left)

  beginShape();

  vertex(x+20, y-150);

  bezierVertex(x-10, y-120, x-20, y-115, x-40, y-120);

  bezierVertex(x-40, y-120, x-60, y-120, x-60, y-100);

  bezierVertex(x-60, y-100, x-50, y-70, x-90, y-70);

  bezierVertex(x-90, y-70, x-110, y-70, x-110, y-40);

  bezierVertex(x-110, y-30, x-100, y, x-140, y-10);

  bezierVertex(x-140, y-100, x-50, y/3, x, y-180);

 endShape(CLOSE);

    //brows

  let eyeY = map(mouseY,y/4, y, y-10,y);

  fill('#26180F');

  rectMode(CORNER);

  strokeWeight(2);

      //right    

  beginShape();

  vertex(x +20, y-43);

  vertex(x+20, y-33);

  vertex(x+60,eyeY-40);

  vertex(x+80,y-35);

  vertex(x+60,eyeY-47);

 endShape(CLOSE);

      //left

  beginShape();

  vertex(x-20, y-43);

  vertex(x-20, y-33);

  vertex(x-60,eyeY-40);

  vertex(x-80,y-35);

  vertex(x-60,eyeY-47);

 endShape(CLOSE);

  // save('selfportrait_v2.png');

 } 

​

​

​