Self-portrait in p5.js

Erika Noma
3 min readSep 15, 2021

--

For my first coding exercise in p5.js, I drew a self-portrait using primitive shapes.

Source code

function setup() {
createCanvas(600, 600);
}
function draw() {
background("#B0E0E6");

//hair background
fill("#10104c");
quad(217, 290, 382, 290, 450, 400, 150, 400)
//head
noStroke();
fill("#E4B1AB")
circle(300, 250, 180);
//hair
noFill();
stroke("#000032")
strokeWeight(2);
//left hair
fill("#000032");
bezier(300, 160, 100, 180, 280, 300, 150, 400);
//right hair
fill("#000032");
bezier(300, 160, 500, 180, 320, 300, 450, 400);
noStroke();//neck
fill("#E4B1AB");
quad(280, 310, 320, 310, 330, 370, 270, 370);
//body
fill("#E4B1AB");
quad(270, 370, 330, 370, 460, 430, 140, 430);
rect(140, 430, 320, 70);
//earrings
fill("#00FA9A")
stroke("#DB7093")
strokeWeight(4);
//left
quad(217, 290, 237, 340, 217, 360, 197, 340);
//right
quad(382, 290, 402, 340, 382, 360, 362, 340);
noStroke();
//quads inside the earrings
fill(0,0,50)
//left
quad(217, 320, 227, 340, 217, 350, 207, 340);
//right
quad(382, 320, 392, 340, 382, 350, 372, 340);

//glasses
fill(0,0,50)
stroke("#DB7093")
strokeWeight(6);
line(280, 250, 320, 250);
rect(235, 225, 55, 55, 10);
rect(315, 225, 55, 55, 10);
//lips
//top
push();
translate(0,-100);
fill("#e38fab");
noStroke();
arc(290,400,20,10,PI,0);
arc(310,400,20,10,PI,0);

//bottom
fill("#DB7093");
noStroke();
arc(300,400,40,20,0,PI);
pop();
//leaves
noStroke();
fill("#7BB661");
ellipse(100, 550, 150, 200);
ellipse(200, 550, 150, 200);
ellipse(300, 550, 150, 200);
ellipse(400, 550, 150, 200);
ellipse(500, 550, 150, 200);

fill("#0E4A38");
ellipse(0, 550, 80, 400);
ellipse(55, 550, 50, 300);
ellipse(100, 550, 40, 250);
ellipse(150, 550, 50, 300);
ellipse(200, 550, 40, 250);
ellipse(250, 550, 50, 300);
ellipse(300, 550, 40, 250);
ellipse(350, 550, 50, 300);
ellipse(400, 550, 40, 250);
ellipse(450, 550, 50, 300);
ellipse(500, 550, 40, 250);
ellipse(550, 550, 50, 300);
ellipse(600, 550, 40, 250);
ellipse(650, 550, 50, 300);

fill("#B7D468")
ellipse(40, 550, 30, 180);
ellipse(80, 550, 30, 150);
ellipse(170, 550, 30, 180);
ellipse(270, 550, 30, 180);
ellipse(370, 550, 30, 180);
ellipse(470, 550, 30, 180);
ellipse(570, 550, 30, 180);


//flowers
//orange
push();
fill("#FFAA1D")
translate(150, 550);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 80);
rotate(PI/5);
}
pop();

//left blue
push();
fill("#84B7EB")
translate(270, 520);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//middle pink
push();
fill("#E24FAC")
translate(240, 580);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//yellow
push();
fill("#E8E942")
translate(320, 430);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//right orange
push();
fill("#FFAA1D")
translate(350, 530);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 80);
rotate(PI/5);
}
pop();

//left pink
push();
fill("#E24FAC")
translate(220, 400);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//left purple
push();
fill("#B026FF")
translate(200, 480);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//right purple
push();
fill("#B026FF")
translate(440, 570);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//right blue
push();
fill("#84B7EB")
translate(470, 490);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//pink
push();
fill("#E24FAC")
translate(400, 420);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

//right yellow
push();
fill("#E8E942")
translate(420, 540);
noStroke();
for (let i = 0; i < 10; i ++) {
ellipse(0, 30, 20, 60);
rotate(PI/5);
}
pop();

}

--

--