Category Archives: Digital Selfie

but first…lemme take a selfie.

1

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);
}

Final Product
Portrait

Original Inspiration

Person Waving

Digital Self-Portrait

sf
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);
//quad(140,202,188,202,188,200,140,198);
//quad(260,202,215,202,215,200,260,198);
ellipse(170,211,18,18);
ellipse(230,211,18,18);
noFill();
stroke(0);
strokeWeight(3);
curve(165,235,185,255,215,255,235,235);
}

1st Time With p5

Originally, I planned on making some bouncing balls; but, one thing led to another and these happened.

Here was the original plan.

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

https://editor.p5js.org/ach549@nyu.edu/sketches/BkHyQjMcQ

Then, the self portrait…

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

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

Then this!

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

https://editor.p5js.org/ach549@nyu.edu/sketches/B1sZEJQ97

Digital Selfie

001

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);

quad(140,200,180,200,180,195,140,190);
quad(260,200,220,200,220,195,260,190);

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

quad(170,290,230,290,230,285,170,285);

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

 

without mouse
without mouse

 

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);
}

Tori’s Digital Selfie

Selfie

function setup() {
  createCanvas(400, 400);
}
function draw() {
background(255,125,0);
ellipseMode(RADIUS);
fill(195,178);
ellipse(200, 160, 75 ,80);
rect(185, 240, 30, 45);
ellipseMode(RADIUS);
fill(255);
ellipse(175, 150, 15, 10);
ellipseMode(CENTER);
fill(19,50,40);
ellipse(175, 150, 10, 10);
ellipseMode(RADIUS);
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);
}