https://editor.p5js.org/Guli/full/cmL7dFMrF
Our hometask for the first week was to create a self portrait to practice using the simple drawing functions in p5js. For the assignment, I had an idea to use my avatar in Duolingo as a refernce. I really liked my Duolingo avatar — the colors, the shape, and the style, thus recreated it while adding more ideas.
The colors in the avatar are yellow for the background and orange for the dress. The avatar has smiling eyes that are curved at the bottom, along with sparkles. For the body, I simplified the design by making the head float, rather than directly being attached to the body. The idea of a floating head came from one of my chilhood cartoons Phineas and Ferb.
The curls and the curious expression with sparkles in the eyes are the highlights of the portrait. I am proud of myself for thinking off using human face color circles under the eyes to give the impression of smiling eyes. Drawing the curls also proved to be not a straightforward task, with me adjusting and readjusting the position and size of each brown circle untl achieved the look I wanted.
In my future works, I could make the design interactive, so the art changes color or moves as the viewer comes into contact with the work. In terms of the design itself, I can use codes like arc() and rotate(), adding more creativity to the work.
function setup() { createCanvas(600, 400); noStroke(); } function draw() { background(255, 241, 167); // yellow bg // Face ---------------------------------------------------> fill(255, 226, 214); // face color rect(200, 120, 200, 150, 40); // face shape // Eyes ---------------------------------------------------> fill("white"); ellipse(width/2 - 40, height/2 - 20, 75, 70); // left eye ellipse(width/2 + 40, height/2 - 20, 75, 70); // right eye // Pupils fill(61, 61, 61); // dark pupil ellipse(width/2 - 40, height/2 - 20, 45, 45); // left ellipse(width/2 + 40, height/2 - 20, 45, 45); // right // Blue part of pupil fill(57, 94, 130, 200); ellipse(width/2 - 40, height/2 - 10, 35, 30); // left ellipse(width/2 + 40, height/2 - 10, 35, 30); // right // Sparkles drawSparkle(width/2 - 35, height/2 - 27, 15); // left eye sparkle drawSparkle(width/2 + 35, height/2 - 27, 15); // right eye sparkle // Under-eye curves fill(255, 226, 214); ellipse(width/2 - 40, height/2 + 20, 90, 60); // left ellipse(width/2 + 40, height/2 + 20, 90, 60); // right // Nose ---------------------------------------------------> fill(248, 172, 148); // nose color beginShape(); vertex(width/2, height/2 - 10); // top vertex(width/2 - 7, height/2 + 10); // left vertex(width/2, height/2 + 17); // bottom vertex(width/2 + 7, height/2 + 10); // right endShape(CLOSE); // Mouth ---------------------------------------------------> fill(179, 93, 110); // lip color ellipse(width/2, height/2 + 45, 20, 20); // lip position } // sparkle in the eye function ----> function drawSparkle(cx, cy, size) { fill("white"); // sparkle color quad( cx, cy - size/2, // top cx + size/2, cy, // right cx, cy + size/2, // bottom cx - size/2, cy // left ); // circular sparkle fill("white"); // circle sparkle color ellipse(width/2 - 50, height/2 - 15, 8); // left ellipse(width/2 + 50, height/2 - 15, 8); // right // HAIR ---------------------------------------------------> fill(84, 54, 41); // hair color // Top ellipse(width/2, height/2 - 120, 120, 90); // top middle ellipse(width/2 + 60, height/2 - 115, 110, 85); // top right ellipse(width/2 - 60, height/2 - 115, 110, 85); // top left // Left ellipse(width/2 - 120, height/2 - 60, 90, 100); // left top ellipse(width/2 - 140, height/2 + 10, 95, 110); // left bottom // Right ellipse(width/2 + 120, height/2 - 60, 90, 100); // right top ellipse(width/2 + 140, height/2 + 10, 95, 110); // right bottom // BODY ---------------------------------------------------> fill(243, 161, 63); ellipse(width/2, height - 10, 170, 200); // body position }