Project 1: My Self Portrait

Aysha Portrait

function setup() {
    createCanvas(350, 500);
    background(215, 167, 119)
}

function draw() {
    strokeWeight(0);
    fill(107, 70, 27) // eyes
    ellipse(100, 140, 50);
    ellipse(250, 140, 50);
    fill(252, 226, 215, 150); // pupils
    ellipse(105, 145, 30); 
    ellipse(255, 145, 30);
    fill(107, 70, 27); // eyelids
    triangle(75, 139, 70, 115, 107, 116);
    triangle(275, 139, 280, 115, 243, 116);
    noFill(); // nose
    strokeWeight(5);
    stroke(107, 70, 27);
    arc(175, 240, 80, 80, PI/4, 3/4 * PI);
    stroke(107, 70, 27); // mouth
    strokeWeight(0);
    fill(157, 117, 74);
   // ellipse(175, 405, 110, 60);
    fill(215, 167, 119);
    rect(110, 370, 120, 40);
    fill(144, 93, 37);
    ellipse(175, 410, 110, 40);
    fill(215, 167, 119);
    rect(110, 410, 120, 30);
    strokeWeight(0); // white plaid
    fill(252, 226, 215, 100);
    rect(25, 0, 35, 500);
    rect(290, 0, 35, 500);
    rect(157, 0, 35, 500);
    rect(0, 60, 350, 35);
    rect(0, 190, 350, 35);
    rect(0, 320, 350, 35);
    rect(0, 450, 350, 35);
    fill(107, 70, 27, 35); // brown plaid
    rect(90, 0, 35, 500);
    rect(225, 0, 35, 500);
    rect(0, 0, 350, 30)
    rect(0, 125, 350, 35);
    rect(0, 255, 350, 35);
    rect(0, 385, 350, 35);

    noLoop();
}

I’m not a very visual thinker, and it was more difficult than I expected to translate my idea into simple shapes.

Project 1: My Self Portrait

file

//Georgia Miller 
//Section D
function setup() {
    createCanvas(800,1000,);
    background(229,255,204);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    fill(204,102,0);
    strokeWeight(0);
    ellipse(315,490,480,720); //back of hair
    ellipse(340,340,440,430); //mid piece
    fill(255,229,191); 
    ellipse(500,525,240,200); //cheek
    ellipse(215,520,50,150); //ear
    ellipse(425,400,400,380); //forehead
    beginShape(QUADS); //chin and jaw
    vertex(255,580);
    vertex(320,695);
    vertex(530,720);
    vertex(555,710);
    endShape(CLOSE);
    beginShape(QUADS); //chin and jaw
    vertex(320,695);
    vertex(530,720);
    vertex(555,710);
    vertex(580,590);
    endShape(CLOSE);
    beginShape(QUADS); //chin and jaw
    vertex(230,460);
    vertex(255,580);
    vertex(500,690);
    vertex(525,570);
    endShape(CLOSE);

    fill(88,45,0);
    beginShape(); //eyebrows
    vertex(600,380)
    bezierVertex(480,330,540,365,510,357);
    bezierVertex(540,300,590,335,600,380);
    endShape();
    beginShape();
    vertex(480,370);
    bezierVertex(455,430,460,350,295,410);
    bezierVertex(330,350,435,346,480,370);
    endShape();

    fill(204,102,0); //bangs
    beginShape();
    vertex(450,155);
    bezierVertex(760,100,675,435,625,475);
    bezierVertex(560,230,610,345,450,155);
    endShape();
    beginShape();
    vertex(450,155);
    bezierVertex(645,100,610,380,570,430);
    bezierVertex(530,230,610,400,450,155);
    endShape();
    beginShape();
    vertex(450,155);
    bezierVertex(530,205,550,400,515,430);
    bezierVertex(500,200,530,345,450,155);
    endShape();
    beginShape();
    beginShape();
    vertex(400,200);
    bezierVertex(390,250,350,300,380,440);
    bezierVertex(340,350,315,234,400,200);
    endShape();
    beginShape();
    vertex(385,130);
    bezierVertex(320,360,230,100,330,490);
    bezierVertex(380,370,300,300,385,130);
    endShape();
    beginShape();
    fill(250)
    vertex(300,130);
    bezierVertex(260,360,170,100,240,490);
    bezierVertex(300,370,220,300,300,130);
    endShape();
    strokeWeight(0);


    fill(0) //eyeliner
    beginShape(QUADS);
    vertex(330,430);
    vertex(450,435);
    vertex(500,465);
    vertex(410,465);
    endShape();
    beginShape(QUADS);
    vertex(610,430);
    vertex(545,435);
    vertex(530,465);
    vertex(580,450);
    endShape();
    beginShape(TRIANGLES); //eyelashes
    vertex(395,465);
    vertex(400,470);
    vertex(380,475);
    endShape();
    beginShape(TRIANGLES);
    vertex(410,475);
    vertex(425,475);
    vertex(405,490);
    endShape();
    beginShape(TRIANGLES);
    vertex(580,470);
    vertex(585,470);
    vertex(590,465);
    endShape();
    beginShape(TRIANGLES);
    vertex(590,460);
    vertex(595,450);
    vertex(600,465);
    endShape();


    fill(250)
    ellipse(430,450,85,40) //white of eyes
    ellipse(560,450,60,40);
    stroke(0);
    strokeWeight(2);
    line(525,450,570,525); //nose bridge
    line(535,550,560,550);
    line(560,550,570,525);

    strokeWeight(0) //lips
    fill(243,176,176)
    beginShape();
    vertex(490,630);
    vertex(520,590);
    vertex(540,600);
    vertex(555,590);
    vertex(570,605);
    vertex(565,630);
    vertex(530,640);
    endShape();
 
    stroke(100) //cheekbone
    strokeWeight(1)
    line(250,520,405,590);
    line(405,590,450,665);

    strokeWeight(0);  //cheekbone
    fill(255,229,191); 
    beginShape();
    vertex(255,580);
    vertex(280,800);
    vertex(230,885);
    vertex(420,940);
    vertex(580,910);
    vertex(515,870);
    vertex(490,710);
    endShape();

    strokeWeight(2);//jawline
    stroke(0);
    line(530,720,555,710);
    line(320,695,530,720);
    line(555,710,580,590);
    line(230,460,255,580);
    line(255,580,320,695);

    ellipseMode(RADIUS); //eyeballs
    fill(171,228,242);
    strokeWeight(0)
    ellipse(425, 450, 20, 20); // Outer white ellipse
    ellipseMode(CENTER);
    fill(0);
    ellipse(425, 450, 18, 18); // Inner gray ellipse
    fill(171,228,242);
    ellipseMode(RADIUS); 
    ellipse(560, 450, 17, 17); // Outer white ellipse
    ellipseMode(CENTER);
    fill(0);
    ellipse(560, 450, 15, 15); // Inner gray ellipse

    fill(255,44,199,50); //blush
    ellipse(515,505,300,36);

    fill(255); //nose shine
    ellipse(550,520,20,20);
    noLoop();

}

The most challenging thing about this project was trying to find a way to create my bangs. I ended up using really long code.

Project 1: My Self Portrait

Yash-self portrait

//Yash Mittal
// Section D
function setup() {
    createCanvas(600,700);
    background(255,196,206);
}

function draw() {
    noStroke();
    fill(34,10,11);
    ellipse(300,360,230,80); //shoulder
    fill(150,117,86);//neck
    quad(280,300,320,300,340,340,260,340); //neck
    ellipse(300,340,80,40); //neck ellipse
    fill(80,77,67);//shadow
    ellipse(315,325,33,10);
    quad(260,290,318,290,332,325,300,327);//shadow
    fill(150,117,86);
    ellipse((width/2),(height/2)-140,150,200); //face
    fill(34,10,11);
    rect(186,360,228,240);//main body
    fill(255,243,139);//belt
    rect(186,600,228,20);
    fill(81,192,248);//legs
    rect(186,620,85,200);
    rect(329,620,85,200);
    fill(34,10,11);//arms
    rotate(20/3.0);
    ellipse(320,388,60,300);
    rotate(20/3.0);
    ellipse(530,-120,63,300);
    fill(150,117,86); // hands
    ellipse(489,365,60,60); // left hand
    ellipse(530,-250,63,63)//right hand
    fill(35,42,51);//glasses
    stroke(255,243,139);
    strokeWeight(2);
    ellipse(325,-55,40,40);
    ellipse(365,-94,40,40);
    line(312,-40,291,-25);
    line(380,-110,395,-128);
    line(341,-71,350,-80)
    stroke(1,0,0);//mouth
    line(386,-10,415,-30);
    line(300,-74,320,-85);//eyebrows
    line(335,-100,350,-120);
    noStroke();//hat
    rotate(-40/3.0);
    fill(223,103,72);
    ellipse(300,128,180,30);//hat
    rect(250,70,100,70);
    ellipse(300,70,100,30)
    fill(211,213,216);//hat highlight
    arc(265,132,100,9,TWO_PI,PI);
    arc(274,110,50,6,TWO_PI,PI);
}
    

The most challenging part about this project was definitely trying to arrange the elements in their proper exact location. It took me a lot of attempts to get, for example the shadow, to line up perfectly with the rest of the elements.

Project 1: My Self Portrait

Michelle-Self-Portrait

// Using p5.js, draw a self-portrait using at least 10 graphic elements, 
//such as lines, quads, ellipses, etc. You may use any graphical primitives you please,
// with the exception that you may not use drawing functions that require the loading of external assets (e.g. images, fonts). 
//Experiment with the use of at least 2 colors in addition to the background color.

function setup() {
    createCanvas(500, 550);
    background(150, 191, 215);
}

function draw() {


    strokeWeight(0);

    fill(31, 29, 19);
    rect(110, 150, 130, 350, 800, 20, 70, 40); //left hair
    rect(255,150, 130, 350, 800, 70, 40, 70); // right hair

    fill (218, 197, 150);
    rect(150, 100, 200, 250, 20, 30, 80,80); //head

    fill(31, 29, 19);
    rect(100, 50, 150, 180, 800, 70, 80, 40); // left bang
    rect(250, 50, 150, 180, 800, 70, 40, 80); // right bang
    arc(200, 250, 40, 30, PI, 0); // left eye
    arc(300, 250, 40, 30, PI, 0); // right eye
    rect(158, 50, 185, 95); //top hair


    fill (218, 197, 150);
    ellipse(200, 255, 40, 20); // left eye skin color
    ellipse(300, 255, 40, 20); //right eye skin color

    fill (255, 176, 222, 80);
    ellipse(170, 280, 90, 90); //left blush
    ellipse(325, 280, 90, 90); // right blush

    fill(200, 100, 73); 
    ellipse(250, 280, 40, 20); //nose

    fill (218, 197, 150);
    rect(220, 310, 60, 100); // neck

    fill(225);
    rect(150, 380, 200, 250, 80, 80, 0,0); // shirt


    fill (218, 197, 150);
    ellipse(250, 375, 60, 60); //neckline


    fill(0);
    arc(250, 300, 50, 50, 0, PI); //smile!



    strokeWeight(3); // necklace
    stroke(192, 169, 70);
    line(220, 380, 250, 420); 
    line(280, 380, 250, 420); 

    noStroke();
    fill(120, 190, 0);
    ellipse(250, 430, 10, 20); // jade





    noLoop();







}

I struggled most with finding the intended location of functions on the x and y axis. I did a lot of guess and checking until I was satisfied with the position, but I hope I can be more intentional in future projects.

Project 1: My Self Portait

chapman_SelfPortrait

function setup() {
    createCanvas(500,600);
    background(195,159,220);
}

function draw() {
    noLoop();
    noStroke();
    
    //hair back
    fill(90,39,14);     //brown
    ellipse(140,180,80);
    ellipse(360,180,80);
    ellipse(130,220,90);
    ellipse(370,220,90);
    fill(255,193,87);   //blonde
    rect(150,100,200,400,80,80,80,80);
    rect(130,150,35,400,80,80,80,80);
    rect(335,150,35,400,80,80,80,80);    
    
    //body
    fill(21,13,3);
    rect(137.5,400,225,300,80,80,80,80);

    //shoulder hair
    fill(90,39,14);
    rect(110,140,50,390,80,80,80,80);
    rect(340,140,50,390,80,80,80,80);
    rect(85,200,50,310,80,80,80,80);
    rect(365,200,50,310,80,80,80,80);
    rect(75,260,50,210,80,80,80,80);    //outermost hair
    rect(65,310,50,160,80,80,80,80);
    rect(375,260,50,210,80,80,80,80);   //outermost hair
    rect(385,310,50,160,80,80,80,80);
    //hair strands
    fill(255,193,87);
    rect(185,300,35,175,80,80,80,80);
    rect(285,300,35,175,80,80,80,80);

     //head
    fill(255,211,155);
    rect(150,100,200,250,80,80,80,80);
    rect(227.5,300,50,100,20,20,80,80); //neck 
    fill(225,162,0);
    rect(215,370,75,75,20,20,80,80);
    fill(21,13,3); 
    rect(215,360,75,75,20,20,80,80);   //turtleneck

    //hair front
    fill(90,39,14);
    rect(150,100,200,50,80,80,80,80);   //top hair
    rect(165,90,90,50,80,20,20,80);    //partL
    rect(250,90,90,50,20,80,80,20);    //partR
    rect(145,110,25,125,80,80,80,80);    //sideburnsL
    rect(330,110,25,125,80,80,80,80);    //sideburnsL
    rect(120,110,125,75,150,80,150,80);    //bangsL
    ellipse(170,125,50);
    rect(260,110,125,75,150,80,150,80);    //bangsR
    ellipse(330,125,50);

    //ears
    fill(255,211,155);
    rect(120,200,45,75,80,80,80,80);
    rect(340,200,45,75,80,80,80,80);
    //earrings
    fill(225,162,0);
    rect(135,260,10,40,80,80,80,80);
    rect(360,260,10,40,80,80,80,80);

    //eyes
    fill(45,139,81);
    ellipse(210,240,30);
    ellipse(290,240,30);

    //blush
    fill(255,146,146,90);
    ellipse(185,280,80);
    ellipse(315,280,80);

    //glasses
    strokeWeight(5);
    stroke(160,160,160)
    fill(300,300,300,70)
    ellipse(200,240,70);
    ellipse(300,240,70);
    line(235,240,265,240);

    //smile
    noStroke();
    fill(255,146,146);
    ellipse(250,275,30);
    fill(255,211,155);
    rect(235,260,30,15);
}


/*'Thank you to Michelle Dang for helping me with the
rounded rectangle corners, guiding the style for the
portait.*/
//black (21,13,3)
//brown hair (90,39,14)
//blonde hair (255,193,87)
//skin (255,211,155)
//eyes (45,139,81)
//glasses (220,220,220)
//purple bkg (195,159,220)
//gold (225,162,0)
//blush (255,146,146)

I found it most challenging to correctly place all “strands” of my hair.

Project 1: My Self-Portrait

sketch

function setup() {
    createCanvas(200, 200);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255, 192, 203);
    fill(59,25,7);
    rect(64,95,75,100); //hair
    fill(241, 194, 125);
    rect(90,135,20,20); //neck
    fill(255,235,238);
    rect(50,150,100,100); //body
    fill(241, 194, 125);
    ellipse(100, 100, 80, 80); //head
    fill(59,25,7);
    arc(62, 55, 60, 60, 0, PI / 2.0); //left bang
    fill(59,25,7);
    rect(92,56, 50,20); //right bang
    fill(59,25,7);
    rect(132,76,10,74); //strand
    fill(255,255,255);
    ellipse(75, 100, 30, 30); //left eye
    fill(255,255,255);
    ellipse(115, 100, 30, 30); //right eye
    fill(0,0,0);
    ellipse(75, 100, 10, 10); //left pupil
    fill(0,0,0);
    ellipse(115, 100, 10, 10); //right pupil
    stroke(0,0,0);
    fill(236,170,70);
    triangle(95,110,90,120,100,120); //nose
    noFill();
    arc(100, 110, 40, 40, 0, PI / 2.0); //mouth
}

I found it difficult to figure out arcs. My self-portrait is ugly-cute.

Project 1: My Self Portrait

selfportrait

function setup() {
    createCanvas(500, 600);
    background(234,224,213);
    
}

function draw() {
    noStroke();

    fill(104,131,186)
    ellipse(250,300,400,400)

    fill(34,51,59)
    rect(60,400,380,400,170) // shirt

    fill(228, 194, 149)
    ellipse(250,400,120,100) //neck 1

    fill(228, 194, 149)
    rect(190,300,120,100) //neck 2

    fill(255,219,172)
    ellipse(250,280,180,250) //face

    fill(0)
    ellipse(250,190,200,110) // hair bottom

    fill(0)
    ellipse(320,190,80,90) //right hair

    fill(0)
    ellipse(165,230,40,60) //hair

    fill(0)
    ellipse(338,220,40,60) //hair

    fill(0)
    rect(150,220,30,85) //sideburn left

    fill(0)
    rect(320,200,30,80) //sideburn right

    fill(0)
    ellipse(165,200,50,70) // hair and sideburn connection

    fill(255,219,172)
    ellipse(160,300,45,70) //left ear

    fill(255,219,172)
    ellipse(340,300,45,70) //right ear

    fill(217,164,144)
    ellipse(340,300,35,50) //inner ear R

    fill(255,219,172)
    ellipse(338,303,35,50) //inner ear 2 R

    fill(217,164,144) 
    ellipse(160,300,35,50) //inner ear L

    fill(255,219,172)
    ellipse(162,302,35,48) //inner ear 2 L

    fill(255,219,172)
    ellipse(155,308,25,48) //inner ear 2 L

    fill(0)
    rect(195,270,34,10,10) // left eyebrow

    fill(0)
    rect(273,270,34,10,10) // right eyebrow

    fill(0)
    ellipse(213,297,14,14) //left eye

    fill(0)
    ellipse(290,297,14,14) //right eye

    fill(255)
    ellipse(250,345,80,70) // white smile

    fill(255,219,172)
    rect(200,305,100,50) //smile rectangle

    fill(203,168,123)
    ellipse(250,325,30,25) // nose

    fill(255,219,172)
    ellipse(250,320,30,25) //nose
    
    fill(254,212,208,200)
    ellipse(195,330,40,40)

    fill(254,212,208,200)
    ellipse(305,330,40,40)

}

The most challenging part about this project was creating the hair because that was the most unsymmetrical part and I wanted it to not just be one shape so I had to think about the shapes I wanted to use to create a “full” look to my hair.

LO Inspiration

This artwork was created by Kyuha Shim and the piece is named “The Art of Selection” which is located on his website http://www.kyuhashim.com/.

I originally found this work because Kyuha was my professor last year and I heard he made amazing computational design. I specifically admire this project because it is such an engaging and beautiful animation. It is like an optical illusional but is also readable words when everything lines up perfectly. This makes the piece so respectable because it is a delicate balance that probably took Kyuha awhile to perfect.

I don’t know much about his work. However, Kyuha Shim is a designer who uses code and collects data. It seems like his focus isn’t on making custom software but rather using data. So I would assume he used commercial software to make his design.

A Screenshot of The Animation

LO: My Inspiration

In cities across China, Local Projects (an experience design studio) has partnered with the soccer club Manchester United and Adidas to create a gaming experience for the fans. It is called the “Theatre of Dreams.” I found this project especially interesting because I am a huge soccer fan myself and the fact that there is an experience that they created that allows the fans to become football players them. Furthermore, it appeals to the emotions of the fans as it takes into account the rich history of the Club as well. They try and capture the emotions and atmosphere of an actual match day event and the energy of the stadium as if the users were in it. The creators of this experience, Local Projects, seemed to have created the software for this immersive experience by themselves. As far as I know, this is an experience like none other and it takes inspiration from the fact that fans make their intense love for the game well known. This breakthrough experience that they have created can probably inspire other clubs to provide similar experiences as each club has their own unique history and spirit. Here is the link for the immersive experience. 

Website link

photo
This image shows one of the immersive experience that the fans can have

LO: My Inspiration

One of my favorite interaction and computational projects is the BioDesign Studio in the Tech Museum of Innovation created by Local Projects. Local Projects is a group of designers and creative technologists who aim to change how people interact with environments and with each other. This project educates people about synthetic biology, in which visitors can connect different DNA models together and a screen will display the lifeforms being created. I admire this project because the design and engineering team was able to create a seamless interaction between the tangible and the digital world. I like how the interaction is not limited to a screen, so social interaction is also made possible. I personally think the project points to the future of museum exhibitions and maybe even education, as learning through an interactive experience could benefit many people.

Author & Title: Local Projects, BioDesign Studio – THE TECH MUSEUM OF INNOVATION.

Website Link

This image shows children interacting with the DNA models.