# but first…lemme take a selfie. So for my digital selfie, I decided to take a more abstract approach. I asked my closest friends to help me out with this one. I asked them what they notice first about me and what I’m known for. The top two things they told me were my lips and my bold brows. So that’s exactly what I did!

Here’s my code:

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

function draw() {
background(255,179,102);

//INNER PART OF LEFT BROW
fill(102,51,0);
//rect(x, y, w, h);
rect(95, 70, 70, 20);
noStroke();

//TAIL OF LEFT BROW

//INNER PART OF RIGHT BROW
fill(102,51,0);
//rect(x, y, w, h);
rect(215, 70, 70, 20);
noStroke();

//LEFT SIDE OF TOP LIP
//first pair:left point.
//second pair:bottom right point.
//third pair:top right point.
fill(255,77,77);
triangle(115, 280, 200, 280, 185, 250);
noStroke();

//RIGHT SIDE OF TOP LIP
//first pair:top left point.
//second pair:left point.
//third pair: bottom left point.
fill(255,77,77);
triangle(205, 250, 187, 280, 275, 280);
noStroke();

//BOTTOM LIP
arc(197, 285, 155, 70,0, HALF_PI + HALF_PI);
fill(255,77,77);
//fill(255,102,102);
//fill(255,102,102);

}

# Digital Selfie

I created a quick minimalist ‘selfie’ that mimics the SVG avatar I used for my IMA application website. I also wanted to make sure that it scales correctly with window size, so all height, width, and position values are made as modifications of the window height (h).

P5 Code

```function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
var w = windowWidth;
var h = windowHeight;
background(20);
noStroke();

fill(90,75,66);
ellipse((w/2)-(h/8),h/4,h/4);

fill(193,180,154);
rect((w/2)-(h/5.4),h/3.5,h/8,h/6);

fill(211,191,168);
ellipse((w/2)-(h/8),h/3.7,h/4);

fill(211,191,168);
ellipse((w/2)-(h/8),h/3.7,h/4);

fill(25,113,180);
ellipse((w/2)-(h/8),h/1.7,h/3);
rect((w/2)-(h/3.48),h/1.8,h/3.06,h/3.06);
}```

Original Inspiration # selfie

https://editor.p5js.org/full/SJrg53F5Q

# Digital Self-Portrait

function setup() {
createCanvas(400, 400);
}
function draw() {
background(255, 204, 0);
c=color(252,212,183);
fill(c);
noStroke();
ellipse(200, 200, 160, 155);
fill(0,0,0);
arc(200, 190 ,160 ,165, 3.14, 0, CHORD);
triangle(120,180,150,160,130,280);
triangle(255,160,281,180,265,283);
ellipse(200,105,50,50);
ellipse(170,211,18,18);
ellipse(230,211,18,18);
noFill();
stroke(0);
strokeWeight(3);
curve(165,235,185,255,215,255,235,235);
}

# Digital Selfie Code:

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

function draw() {
background(255,0,0);
fill(252,212,183);//meat
stroke(252,212,183);
ellipse(200,200,195,250);
fill(0);//Black
stroke(0);
triangle(90,200,110,75,150,75);
triangle(150,175,110,75,175,75);

rect(110,73,179,50);

triangle(310,200,290,75,250,75);
triangle(250,175,290,75,225,75);

ellipse(200,120,100,50);

ellipse(170,200,10,10);
ellipse(230,200,10,10);

fill(255,0,0);//erase
stroke(255,0,0);
triangle(50,180,200,0,0,0);
triangle(350,180,200,0,400,0);
triangle(0,400,190,400,100,220);
triangle(400,400,210,400,300,220);

/*fill(0);//reference
stroke(0);
line(100,0,100,400);
line(200,0,200,400);
line(300,0,300,400);
line(0,100,400,100);
line(0,200,400,200);
line(0,300,400,300);
*/
}

# Robert digital self-portriat

https://editor.p5js.org/zy1133/sketches/rkBWSbSqQ

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

function draw() {
background(255);
//out
line(90,180,110,300);
line(110,300,150,370);
line(150,370,185,380);
line(185,380,215,380);
line(215,380,250,370);
line(250,370,290,300);
line(290,300,320,120);
fill(51);
bezier(100,100,125,20,200,20,320,120);
bezier(100,100,80,100,80,100,90,180);

//eye
noFill();
bezier(130,190,150,186,150,186,165,190);
noFill();
bezier(235,190,250,186,250,186,270,190);
arc(147.5,195,35,35,3.4,6,open);
arc(252.5,195,35,35,3.4,6,open);
fill(20);
ellipse(mouseX-160.5,182,10,10);
ellipse(mouseX-55.5,182,10,10);
noFill();
bezier(140,160,145,158,145,158,165,160);
noFill();
bezier(260,160,255,158,255,158,235,160);

//nose
noFill();
bezier(200,225,225,270,200,262,185,260);

//mouth
noFill();
bezier(160,300,200,320,200,320,240,300);

//mouse
fill(255,125,0);
rect(295, 350, 27, 10);
}

# Digital Selfie

For my self portrait I wanted to recreate a self portrait I made earlier this summer.

Here is the original self portrait: Here is my p5 version! It is definitely a very minimalistic take but I like it!

# Hhhh (p5.js things)

There’s kind of a planet/space theme among these. # Tori’s Digital Selfie function setup() {
createCanvas(400, 400);
}
function draw() {
background(255,125,0);
fill(195,178);
ellipse(200, 160, 75 ,80);
rect(185, 240, 30, 45);
fill(255);
ellipse(175, 150, 15, 10);
ellipseMode(CENTER);
fill(19,50,40);
ellipse(175, 150, 10, 10);
fill(255);
ellipse(220, 150, 15, 10);
ellipseMode(CENTER);
fill(19,50,40);
ellipse(220, 150, 10, 10);
fill(188, 70);
arc(197, 175, 25, 25, HALF_PI + HALF_PI, TWO_PI);
fill(255);
arc(200, 200, 50, 50, 0, PI, CHORD);
fill(80,30,0);
arc(210, 130, 130, 120, PI+TWO_PI+QUARTER_PI, QUARTER_PI, CHORD );
arc(205, 125, 140, 100,HALF_PI +QUARTER_PI +QUARTER_PI, QUARTER_PI+PI ) ;
arc(186, 170, 130, 150,HALF_PI +QUARTER_PI +QUARTER_PI, QUARTER_PI+PI,CHORD );
fill(0,130,220);
rect(125, 255, 160, 200, 20);
}