Self-Portrait
For the first assignment, we were asked to make a self-portrait using p5js. For this, I wanted to create a drawing that reflects my personality. I am usually bright and cheerful and tend to get excited about little things – so I wanted to represent this in my self-portrait. With this assignment, I also aimed to familiarize myself with as many p5js features and tools as possible.
Process
For this, I first went through the p5js reference to learn about the colors and different shape tools (ellipse, triangle, quad, bezier, curves, etc.) and practiced them to get a grip on how to draw lines and shapes. Then, I used a bottom-up approach by starting with the most minor facial features and building them up to the whole face, hair, and then the background and interactivity. I used ellipse to draw the eyes, quad for the nose and neck, and then arcs for the lips. Then I used bezier and quad for the hair and so on. With the face, I felt like I could not get as intricate because it would have required a lot more lines/shadows, etc and I found the process tiring. However, the next part was my favorite – it was the background, borders, and interactivity. For this, I got to use for-loops and experiment with different backgrounds and color schemes before I landed on one that I liked best. I initially tried multi-colored quads in the background, then a check background made with a for loop, and finally the pastel-colored stripes.
Interactivity
Something I really wanted to add was an element of randomness in my design – hence the moving circles in the background that randomly change positions when the mouse is pressed. Moreover, their concentration varies relative to the position of the mouse. As you slide the mouse toward the top-right corner, the circles become more saturated and as you move further along the x and y axis, they grow further apart.
I also added other interactions when the mouse is pressed and moved. One is the moving circles. On top of that, the face also smiles bigger, the eyebrows rise, the pupils dilate, and the cheeks become pinker when the mouse is pressed displaying the excitement the avatar feels when seeing the moving circles. Also, some strokes appear as well.
Code
function setup() {
createCanvas(500, 500);
}
function draw() {
let faceX = 250, faceY=210, faceWidth = 180, faceHeight=220;
background('#C8C7D7');
//background stripes
noStroke();
let b = true;
for(let i=0; i<500; i+=10){
for (let y=0; y<500; y+=10){
if(b==true)
{fill('#EDECF2')
b=false;}
else{
b=true;
fill('#C8C7D7');}
rect(i,y,10,10)
}
}
let c=true;
for(let i=0; i<500; i+=20){
for (let y=0; y<500; y+=20){
if(c==true)
{fill('#C8C7D7')
c=false;}
else{
b=true;
fill('#EDECF2');}
rect(i,y,10,10)
}
}
//background circles when mouse is pressed
if(mouseIsPressed){
stroke(205)
for(let i = 0; i<100; i++)
{
fill('#A89DBD')
num1= random(5);
num2 = random(5);
ellipse(mouseX*num1,mouseY*num2, 15, 15);
}
}
//hair
fill("#4d2511");
quad(150, 150, 350, 150, 400, 400, 100, 400);
fill(255, 213, 173);
quad(200, 230, 300, 230, 320, 280, 180, 280);
//face
noFill()
noStroke()
arc(250, 350, 100, 80, 0, PI);
stroke(0)
fill(252, 210, 155);
ellipse(faceX,faceY,faceWidth,faceHeight);
fill(252, 210, 155);
//neck
noStroke()
quad(220, 280, 280, 280, 300, 360, 200, 360);
//eyes
fill(255)
ellipse(215,190, 35,30 )
ellipse(285,190, 35,30)
fill(0);
ellipse(215,190, 20,25);
ellipse(285,190, 20,25);
fill(255);
//eye balls
ellipse(219,193, 8,8);
ellipse(289,193, 8,8);
//eye balls dilate when mouse is pressed
if(mouseIsPressed)
{
ellipse(219,193, 10,10);
ellipse(289,193, 10,10);
}
//nose
fill(250, 188, 130);
quad(260,250, 240,250, 250,210, 260,250);
line(260,250, 250, 210);
line(240,250, 250, 210);
line(240,250, 260,250);
//eyebrows
//eyebrows raised if mouse is pressed
if (mouseIsPressed){
fill('rgb(146,63,8)')
rect(200,150, 30,8)
rect(270,150, 30,8)
}
else{
fill('#4A2500')
rect(200,160, 30,8)
rect(270,160, 30,8)}
//hair
noStroke()
fill("#4A2500");
bezier(250,100, 50, 100, 180, 250, 100,400);
bezier(250,100, 450, 100, 320, 250, 400,400);
//lips
fill('darkred')
noFill();
//lips get bigger/smile when mouse is pressed
if (mouseIsPressed){
fill(180, 13, 61);
arc(250, 265, 50, 50, 0, PI);
}
else{
fill(180, 13, 61);
arc(250, 270, 50, 30, 0, PI);
}
//blush when mouse is pressed
if (mouseIsPressed){
fill('rgb(250,187,129)');
ellipse(200,250,25,15);
ellipse(300,250,25,15);
}
noStroke();
if(mouseIsPressed)
{ stroke(240); }
x=10
for(let i =0;i<20;i++){
fill('#D8E2EB')
ellipse(x,20,40,60);
ellipse(x,480,40,60);
ellipse(0,x,60,40);
ellipse(500,x,60,40);
x=x+30;
}
//bow on head
fill('#A89DBD')
quad(140,130, 190,170, 190,130, 140,170)
fill(120);
text('Press and move the cursor...', 10, 485);
}
Reflection
Overall, the process was very insightful and allowed me to practice a range of p5js features. When I started out, I felt the process is boring but as I delved more into the programming concepts such as using for loops or random, and when I played around with the features, especially to create interactivity, it actually became very interesting and fun!
In the future, I want to improve further by using other features. For example, I came across Blendmode which I found very interesting but I could not learn much about it in the scope of this project. Thus, I want to learn about it and its other features later.