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
}
