Author: Sharon

Sharon Yang Project 06 Abstract Clock

Project

/*Sharon Yang
Section C
junginny
Project-06
*/

function setup() {
    createCanvas(640, 480);
}

function draw() {
    //fetch time
    var H = hour();
    var M = minute();
    var S = second();
    background(182,211,232);
    angleMode(DEGREES);

    //ground
    fill(109,67,48);
    noStroke();
    rect(0,455,640,480);

    //rain drops for seconds
    strokeWeight(2);
    stroke(255);
    var rainSpeed;
    rainSpeed = 0;
    frameRate(1);
    for (var i = 0; i <= S; i++) {
        push();
        translate(random(10,width-10),rainSpeed);
        line(0,rainSpeed,0,rainSpeed+30);
        rainSpeed+=15; 
        pop();
    }

    //plants for minutes
    var amountMap; //number of plants = minutes
    var plantY;
    fill(97,120,50);
    if (M == 1) {
        strokeWeight(2);
        stroke(97,120,50);
        push();
        translate(width/2,height-25);
        plantY = random(-20,-60);
        line(0,0,0,plantY);
        noStroke();
        ellipse(-5,plantY,10,5);
        ellipse(5,plantY,10,5);
        pop();
    }
    else {
        for (var amount = 1; amount <= M; amount++) {
            amountMap = map(amount-1,0,M-1,15,width-25); 
            strokeWeight(2);
            stroke(97,120,50);
            push();
            translate(0,height-25);
            plantY = random(-20,-60);
            line(amountMap,0,amountMap,plantY);
            noStroke();
            ellipse(amountMap-5,plantY,10,5);
            ellipse(amountMap+5,plantY,10,5);
            pop();
        }
    }

    //petals on the flower for hours
    if (H > 12) { //0~12 hours 
        H = H % 12
    }
    stroke(97,120,50);
    strokeWeight(4);
    line(320,230,320,455);
    noStroke();
    fill(242,155,174);
    for (var i = 0; i < H; i++) {
        push();
        translate(320,220);
        rotate(i * 30);
        ellipse(0,-25,15,60);
        pop();
    }
    noStroke();
    fill(175,23,104);
    ellipse(320,220,40,40);//bigger flower center
    fill(95,40,100);
    ellipse(320,220,25,25);//smaller flower center

}

For this project, I wanted to incorporate graphics with the clock function, and so I decided to make a flower to indicate the hours, the plants to indicate the minutes and the raindrops to indicate the seconds. I encountered several challenges including placing the plants without them overlapping as their number increases each minute. I resolved that my using the map function. The rotation and translation of the flower petals was also quite difficult but it became more simple once I converted the time to 12 hours instead of 24 hours.

Sharon Yang Looking Outward 05 – 3D Art

Sergi Caballer is a 3D character modeler working at Walt Disney Animation Studios. He is the creator of 3D characters in various movies, some of the very well-known ones including Zootopia and The Pirate!. The 3D art project that I especially admire and so looked further into was Crocodile character from the film ‘Justin and the Knights of Valour’. As the film targeted towards quite young kids, the character is made to look both witty and friendly though crocodiles are typically described to be terrifying and vicious. Yet, the features of a crocodile in the character are mostly present and are quite realistic. As Caballer elaborates on this art work, it consisted of character modeling, facial shapes modeling and UV´s, which are all intricate processes, and it has taken two years (from 2009 to 2010) for completion. The work was done through using Softimage and uvLayout. He has fully adjusted the main facial structures as well as the additional corrective shapes, allowing for the character’s greater facial movements, once again, appropriate for the film’s audience.

Sergi Caballer’s Crocodile in the film ‘Justin and the Knights of Valour’ 2009-2010

 

Sharon Yang Project 05 Wallpaper

Project

/*Sharon Yang
Section C
junginny
Project-05
*/


function setup() {
    createCanvas(500,600);
    background(253,254,210);
    noStroke();
    //6 rows of donuts
    for (var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //hexagonal formation
            for (var x = 0; x < 6; x++) { 
                fill(225,182,128);
                noStroke();
                ellipse(30+x*110, 20+y*110, 75, 75); //base of donut
                if (x % 2 == 0) {
                    fill(246,166,199); //strawberry glaze
                }
                else {
                    fill(95,42,22); //chocolate glaze
                }
                noStroke();
                ellipse(30+x*110, 20+y*110, 65, 65);
                fill(253,254,210);
                noStroke();
                ellipse(30+x*110, 20+y*110, 30, 30); //donut hole
                //sprinkles!
                if (x % 2 == 0) {
                    strokeWeight(3); //chocolate sprinkles
                    stroke(95,42,22);
                    line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
                    line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
                    line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
                    line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
                }
                else {
                    strokeWeight(3); //colorful sprinkles
                    stroke(185,85,130);
                    line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
                    stroke(255);
                    line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
                    stroke(239,245,174);
                    line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
                    stroke(62,170,230);
                    line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
                }
            }
        }
        else { 
            for (var x = 0; x < 4; x++) {
                fill(225,182,128);
                noStroke();
                ellipse(90+x*110, 20+y*110, 75, 75);
                if (x % 2 == 1) {
                    fill(246,166,199);
                }
                else {
                    fill(95,42,22);
                }
                noStroke();                
                ellipse(90+x*110, 20+y*110, 65, 65);
                fill(253,254,210);
                noStroke();
                ellipse(90+x*110, 20+y*110, 30, 30);
                //sprinkles!
                if (x % 2 == 1) {
                    strokeWeight(3); //chocolate sprinkles
                    stroke(95,42,22);
                    line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
                    line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
                    line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
                    line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
                }
                else {
                    strokeWeight(3); //colorful sprinkles
                    stroke(185,85,130);
                    line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
                    stroke(255);
                    line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
                    stroke(239,245,174);
                    line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
                    stroke(62,170,230);
                    line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
                }
            }
        }
    }
    noLoop();
}

While the project was very straightforward and quite easy, it was also a lot of fun and I could understand better the use of for loops and nested for loops. I feel more comfortable declaring the variables I need within the for loops and adjusting the increments.

I have been inspired by the google image attached.

Sharon Yang Project 04 String Art

Project 04

/*Sharon Yang
Section C
junginny
Project-04
*/

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(255);
    var x1;
    var x2;
    var y1;
    var y2;
    var colorLR = 20;
    var colorLG = 45;
    var colorLB = 80;
    //Left curve
    x1 = 0;
    x2 = 0;
    y1 = 0;
    y2 = 0;
    push();
    for (var jL = 1;jL <= 100; jL+=1) {
        translate(jL,jL);
        strokeWeight(1-(jL/20));
        stroke(colorLR,colorLG,colorLB);
        for (var iL = 1;iL <= 50; iL+=2.8) {
            x2 = iL*8;
            y1 = iL*6;
            line(x1-jL,height-y1-jL,x2-jL,y2-jL);
        }
    //Change color value - gradient
    colorLR+=10;
    colorLG+=10;
    colorLB+=10;
    }
    pop();
    //Right curve - resetting variables
    x1 = 0;
    x2 = 0;
    y1 = 0;
    y2 = 0;
    colorLR = 25;
    colorLG = 50;
    colorLB = 90;
    push();
    for (var jR = 1;jR <= 100; jR+=1) {
        translate(-jR,jR);
        strokeWeight(1-(jR/20));
        stroke(colorLR,colorLG,colorLB);
        for (var iR = 1;iR <= 50; iR+=2.8) {
            x1 = iR*8;
            y2 = iR*6;
            line(x1,0,width,y2);
        }
    //Change color value - gradient
    colorLR+=10;
    colorLG+=10;
    colorLB+=10;
    }
    pop();
}

Using for loops to create various lines to put them together into a harmonious art piece helped me explore the order in for loops and/or nested for loops. I played with the stroke weights as well as the colors to create an effect of a gradient.

Sharon Yang Looking Outwards – 04

The computed audio artwork is called ‘Déguster l’augmenté’ created by Erika Marthins. She aims to add a new dimension to the perception of food and experience of meals. She has explored three desserts and transformed them into generative art pieces; the record made of chocolate that brings the sense of taste to a different sensation – auditory is what I especially admire. The regular records are made of wax; recreating the texture as well as the algorithm – the lines on the record that creates the sounds – using chocolate that can emulate it. The collaboration between the chefs, artists and scientists is incredibly innovative and unparalleled which brings attention to the creators’ ingenuity and artistic sensibilities. She achieves bringing a change into a highly common experience or a highly common object through a technological innovation, allowing us to interact with them to a whole new level.

Sharon Yang Project 03 Dynamic Drawing

Project 03


function setup() {
    createCanvas(640,480);
}

function draw() {
    background(245,189,65);
    noStroke();
    fill(255);
    //arms
    var bodyWidth=280;
    var leftArmCenterX=mouseX;
    var leftArmCenterY=mouseY;
    leftArmCenterX=constrain(leftArmCenterX,20,160);
    var rightArmCenterX=mouseX;
    var rightArmCenterY=mouseY;
    rightArmCenterX=constrain(rightArmCenterX,480,620);
    //left arm
    push();
    translate(leftArmCenterX,leftArmCenterY);
    rotate(radians(135));
    fill(255);
    ellipse(0,0,80,80);
    pop();
    //right arm
    push();
    translate(rightArmCenterX,rightArmCenterY);
    rotate(radians(225));
    ellipse(0,0,80,80);
    pop();
    strokeWeight(60);
    stroke(255);
    line(leftArmCenterX,leftArmCenterY,width/2-(bodyWidth*0.35),280);
    line(rightArmCenterX,rightArmCenterY,width/2+(bodyWidth*0.35),280);
    //body
    noStroke();
    arc(width/2,420,bodyWidth,540,PI,2*PI);
    arc(width/2,420,bodyWidth,80,0,PI);
    //collar 
    var collarWidth=bodyWidth*0.7;
    fill(255,0,0);
    ellipse(width/2,220,collarWidth,100);
    fill(245,189,65);
    ellipse(width/2,270,40,40);
    //ears
    strokeWeight(1);
    fill(255);
    //left ear
    var earChangeY=mouseY/48;
    var earHeight=20+(earChangeY*1.5);
    var earChangeX=mouseX/64;
    var earLPos=(width/2)-110-(earChangeX*3);
    triangle(earLPos,earHeight,380,100,200,150);
    fill(255,0,0);
    triangle(earLPos+10,earHeight+15,370,100,210,150);
    //right ear
    fill(255);
    var earRPos=(width/2)+110+(earChangeX*3);
    triangle(earRPos,earHeight,260,100,440,150);
    fill(255,0,0);
    triangle(earRPos-10,earHeight+15,260,100,430,150);
    //head
    fill(255);
    ellipse(width/2,140,240,200);
    //face
    fill(0);
    //mouth
    fill(255);
    stroke(0);
    strokeWeight(3);
    var mouthMoveX=mouseX/64;
    var mouthMoveY=mouseY/32;
    var endMouthLeft=0.7*PI+(mouthMoveX/PI);
    var endMouthRight=2.3*PI-(mouthMoveY/PI);
    endMouthLeft=constrain(endMouthLeft,0.5*PI,1.2*PI);
    endMouthRight=constrain(endMouthRight,1.8*PI,2.5*PI);
    arc(width/2-15,170,30,30,0,endMouthLeft);
    arc(width/2+15,170,30,30,endMouthRight,PI);
    //nose
    fill(0);
    triangle(width/2,170,width/2-15,150,width/2+15,150);
    //eyes
    var strokeD=((mouseX/64)+(mouseY/48)/2);
    strokeD=constrain(strokeD,3,5);
    var eyeD=strokeWeight(strokeD);
    //left eye
    noFill();
    arc((width/2)-50,130,40,30,PI*1.1,2*PI);
    //right eye
    arc((width/2)+50,130,40,30,PI,1.9*PI);
    //whiskers
    var whiskerMoveX=mouseX/64;
    var whiskerMoveY=mouseY/32;
    var whiskerLeftX=width-width/1.7+whiskerMoveX-20;
    var whiskerY=135+whiskerMoveY;
    var whiskerRightX=width-whiskerLeftX;
    stroke(0);
    strokeWeight(3);
    line(whiskerLeftX,whiskerY,280,145);
    line(whiskerLeftX,whiskerY+30,280,165);
    line(360,145,whiskerRightX,whiskerY);
    line(360,165,whiskerRightX,whiskerY+30);
    //feet
    fill(255);
    var footPos=430;
    stroke(0);
    arc(width/2.7,footPos,70,90,1.05*PI,2.05*PI);
    arc(width-(width/2.7),footPos,70,90,0.95*PI,1.95*PI);

}

Through the project, I understood better setting the variables as well as the motion using push and pop function. I found changing the position and size of objects using mouseX and mouseY is interesting highly applicable.

Sharon Yang Looking Outwards – 03

The project ‘Cloud Village’ has been developed by Philip F. Yuan and his team with digital fabrication technology. It is an outdoor pavilion was put together with a purpose to develop the rural areas in China without harming the nature and the people there. I admire not only the high elaborateness of the building but also the fact that it is made of recycled plastic material. As it is a severe environmental crisis in China especially in the countryside, it offers a highly sustainable solution to the issues in the Chinese rural areas.

In order for the pavilion to best suit its purpose of providing a public resting space for the residents in rural regions as well as obtaining a creative and an aesthetic presence, the form and the structure has been optimized by a use of topological optimization algorithm. Such a technological innovation allows for an architecturally innovative approach such as having a waved geometry as the roof. In the process of digital fabrication, the geometry of the pavilion is pixelated into various components to use a crystalized printing tool-path for each of them. The project therefore demonstrates the ideal incorporation of the computational generation to the design as well as the fabrication of art.

Sharon Yang Looking Outwards – 02

Algorithmic artwork that I find highly inspirational and intriguing are of  Herbert W. Franke, named ‘Lightforms’ (Lichtformen) and ‘Ultra Light'(Ultralicht). Franke is a German scientist and artist of the 1950s. His contributions to digital art is admirable as he pioneered the very first form of generative/algorithmic art. His first work in the mid 1950s was created through using an oscilloscope and a camera to generate patterns in groups of continuous lines. (Source: dada.compart-bremen.de/item/agent/188) The artwork ‘Lichtformen’ consists of a multitude of mathematically generated curves without any interruptions or kinks. The gradient has been created through mechanically generating vibrations.

The following image is the Dracula series created in 1970/71. It has been generated by computer graphics based on “Dragon curves”, which is a form of mathematical fractals. (Source: digitalartmuseum.org/franke/1953-1978a.html)

The creativity of the artist to pioneering incorporating scientific and mathematical algorithms into arts is very inspiring and his artworks continue to inspire many scientists and artists in the field.

Sharon Yang Project 02 Variable Face

Project2_Variable_face

/*Sharon Yang
Section C
junginny
Project-02-B
*/

//variables for the cooridinates and the size of the facial features, 
//the face and the eyes; 
var eyeWidth = 68;
var eyeHeight = 52;
var faceWidth = 360;
var faceHeight = 320;
var faceX = 232
var faceY = 320

//variables for colors, for the hair and eyebrows 
var fillR = 50;
var fillG = 41;
var fillB = 46;
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(254,230,240);

    //hair behind the face, the color variables used for the hair color
    //to be randomized 
    fill(fillR,fillG,fillB);
    rect(50,254,360,354);

   //face
    noStroke();
    fill(253,227,204);
    ellipse(faceX, faceY, faceWidth, faceHeight);

    //eyes, setting variables for the X coordinates of the left and
    //the right eyes using the width of the canvas and the face for
    //the eye positions to suit the face shape as it changes
    var LeftEyeX = width*0.48-faceWidth*0.2;
    var RightEyeX = width*0.48+faceWidth*0.2;
    fill(0);
    ellipse(LeftEyeX, faceHeight, eyeWidth, eyeHeight);
    ellipse(RightEyeX, faceHeight, eyeWidth, eyeHeight);

    //pupils, setting variables for the X coordinates of the left and
    //the right pupils using the left and right X coordinate variables
    //to remain at an appropriate position within the eyes as the size
    //the size and the shape of the eyes change
    var LeftPupilX = LeftEyeX*1.14;
    var RightPupilX = RightEyeX*1.07;
    fill(255);
    ellipse(LeftPupilX, faceHeight, 12, 12);
    ellipse(RightPupilX, faceHeight, 12, 12);

    //hair and bangs, the Y coordinates have been determined by the
    //face height as it varies 
    noStroke();
    fill(fillR,fillG,fillB);
    arc(86,faceHeight*0.9,140,200,HALF_PI,PI+HALF_PI);
    arc(32,faceHeight*1.2,140,200,PI+HALF_PI,HALF_PI);
    arc(84,faceHeight*1.65,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*0.87,140,200,PI+HALF_PI,HALF_PI);
    arc(440,faceHeight*1.24,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*1.65,140,200,PI+HALF_PI,HALF_PI);
    arc(236,faceHeight*0.7,408,280,PI,PI+PI,OPEN);
    arc(40,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(90,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(130,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(170,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(220,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(280,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(320,faceHeight*0.59,190,200,0,QUARTER_PI);

    //nose, the X and Y coordinates as well as the size determined 
    //by the face size as it varies
    noStroke();
    stroke(223,197,168);
    strokeWeight(4);
    line(faceWidth*0.67,faceHeight*1.07,faceWidth*0.70,faceHeight*1.14);
    line(faceWidth*0.70,faceHeight*1.14,faceHeight*0.72,faceHeight*1.16);

    //brows, setting variables for the height of the brows - the distance
    //from the eyes
    var browHeight = 274

    noFill();
    //the color variables used to randomize the colors of the brows
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    //the position of the brows determined by the position and the size of the 
    //eyes
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-15, browHeight);
    curveVertex(LeftEyeX+15, browHeight);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    endShape();

    noFill();
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-15, browHeight);
    curveVertex(RightEyeX+15, browHeight);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    endShape();
    
    //mouth, setting variables for the berzier point function
    //determining the position of the mouth in relative to the face
    //size, the edges of the mouth are assigned values for it to
    //be randomized and change in their positions
    noFill();
    stroke(237,34,93);
    strokeWeight(7);
    var x1 = 170,
    x2 = faceWidth*0.6,
    x3 = faceWidth*0.7,
    x4 = 300;
    var y1 = 410,
    y2 = faceHeight*1.35,
    y3 = faceHeight*1.37,
    y4 = 410;
    bezier(x1, y1, x2, y2, x3, y3, x4, y4);

    //ears, setting variable for the Y coordinate of the ears for
    //for the position of the earrings, the position of the ears 
    //determined by the face size
    var earY = faceHeight+20
    fill(253,227,204);
    noStroke();
    arc(faceX - faceWidth/3,earY,100,100,HALF_PI,PI+HALF_PI);
    arc(faceX + faceWidth/3,earY,100,100,PI+HALF_PI,HALF_PI);

    //earrings, the position determined by the position of the ears
    //which varies as the face size changes 
    fill(255);
    ellipse(faceX - faceWidth/3-20,earY+30,14,14);
    ellipse(faceX + faceWidth/3+20,earY+30,14,14);

    //neck
    noStroke();
    fill(253,227,204);
    rect(176,460,120,100);
    fill(253,227,204);
    ellipse(295,591,127,100);

    //shoulders
    fill(5,57,111);
    rect(46,520,400,200,80);

    //v-neck on the shirt
    fill(253,227,204);
    noStroke();
    triangle(230,600,176,520,296,520);
    stroke(255);
    strokeWeight(13);
    line(176,520,230,600);
    line(230,600,296,520);
}

//when the user presses the mouse
//the values of the variables are randomized and reassigned
//varying the size of the face and the eyes, and the positions
//of the brows, and the colors of the hair and the brows
function mousePressed() {
    faceWidth = random(340, 380);
    faceHeight = random(300,340);
    eyeWidth = random(60,80);
    eyeHeight = random(24,66);
    browArc = random(5, 50);
    browHeight = random(246,340);
    browHeight = constrain(browHeight,faceHeight*0.9+20,faceHeight+eyeHeight/2+10);
    x1 = random(100,180);
    y1 = random(380,600);
    x4 = random(270,340);
    y4 = random(380,600);
    fillR = random(20,80);
    fillG = random(10,70);
    fillB = random(16,76);
}

Creating an animation was fun yet quite complex requiring to use many variables and equations instead of the usual coordinates. It really helped me understand setting the variables as well as the random functions. I also had to learn other functions including the curve vertex and the berzier point as using ellipses and arcs limited creating certain motions.

Sharon Yang Project 01 Self-Portrait

sharon-project01

/*Sharon Yang
Section C
junginny
Project-01-Face
*/

function setup() {
    createCanvas(600,800);
    background(254,230,240);

}
function draw() {
    //hair behind the face
    fill(50,41,46);
    rect(100,535,402,370);
    rect();

    //face
    fill(253,227,204);
    noStroke();
    ellipse(290,400,450,400);

    //bangs
    fill(50,41,46);
    noStroke();
    arc(290,320,430,280,PI,PI+PI,OPEN);
    arc(101,308,190,200,0,QUARTER_PI);
    arc(150,308,190,200,0,QUARTER_PI);
    arc(74,308,190,200,0,QUARTER_PI);
    arc(190,308,190,200,0,QUARTER_PI);
    arc(230,308,190,200,0,QUARTER_PI);
    arc(280,308,190,200,0,QUARTER_PI);
    arc(340,308,190,200,0,QUARTER_PI);
    arc(400,308,190,200,0,QUARTER_PI);
    //hair
    noStroke();
    arc(119,390,140,200,HALF_PI,PI+HALF_PI);
    arc(68,560,140,200,PI+HALF_PI,HALF_PI);
    arc(110,670,140,200,HALF_PI,PI+HALF_PI);
    arc(470,390,140,200,PI+HALF_PI,HALF_PI);
    arc(521,560,140,200,HALF_PI,PI+HALF_PI);
    arc(490,670,140,200,PI+HALF_PI,HALF_PI);
    //eyebrows
    fill(0);
    arc(200,415,100,65,PI,TWO_PI);
    fill(253,227,204);
    arc(200,425,120,65,PI,TWO_PI);
    fill(0);
    arc(390,415,100,65,PI,TWO_PI);
    fill(253,227,204);
    arc(390,425,120,65,PI,TWO_PI);
    //eyes
    fill(0);
    ellipse(200,430,85,60);
    ellipse(390,430,85,60);
    fill(255);
    ellipse(225,440,15,15);
    ellipse(415,440,15,15);

    //nose
    stroke(223,197,168);
    strokeWeight(4);
    line(290,460,310,470);
    line(310,470,300,483);
    fill(223,197,168);    

    //mouth
    fill(254,126,130);
    noStroke();
    ellipse(300,520,185,44);
    fill(253,227,204);
    ellipse(300,514,170,38);

    //dimples
    stroke(223,197,168);
    strokeWeight(3);
    arc(194,520,15,15,HALF_PI,PI,OPEN);
    arc(400,520,15,15,TWO_PI,HALF_PI,OPEN);

    //neck
    noStroke();
    fill(253,227,204);
    rect(235,608,120,100);
    fill(253,227,204);
    ellipse(295,591,127,100);

    //shoulders
    fill(5,57,111);
    rect(100,660,400,200,80);

    //v-neck on the shirt
    fill(253,227,204);
    noStroke();
    triangle(230,660,295,770,360,660);
    stroke(255);
    strokeWeight(13);
    line(238,662,300,770);
    line(360,662,300,770);

    //ears
    fill(253,227,204);
    noStroke();
    arc(128,460,100,100,HALF_PI,PI+HALF_PI);
    arc(461,460,100,100,PI+HALF_PI,HALF_PI);

    //earrings
    fill(255);
    ellipse(123,495,14,14);
    ellipse(473,495,14,14);
}

I found the self-portrait project really fun but quite time consuming and tough as I was not yet familiar with the functions in javascript. In order to create shapes, curves and lines, I had to look up the functions that would result in creating the objects I wanted. When I could not figure out some of the advanced functions, it required creativity to create the objects using different shapes. As I could not quite figure out using the berzier function, I used arcs to make the curls on my hair. Finding the right coordinates was also quite tedious at first, but I got used to it and so it took less time perfecting them.