Category: Project Week 1

sketch

//Manuel Rodriguez Ladron de Guevara
//Section B 10:30am
//manuelr@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(194,217,76);
    angleMode(DEGREES);
    smooth();
    //text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

    //background
    rectMode(CENTER);
    noStroke();
    fill(169,207,56);
    //fill(255,198,10);
    rect(300,300,300,400,20);

        //ears
    noStroke();
    fill(236,191,153);   
    rectMode(CENTER);
    rect((width/2)+100, (height/2), 30,50, 10);

    rectMode(CENTER);
    rect((width/2)-100, (height/2), 30,50, 10);

     //hair
    if(mouseX<(width/2)|| mouseY<(height/2)){
        fill(50);
    }else {
        noStroke();
        fill(255,216,0);
    }
    
    rect(300,260,220,220,50,50,10,10);
   

    //neck
    strokeWeight(3);
    stroke(216,170,153);
    fill(236,191,153);
    rect(300,450,60,150);



    //face base
    if(mouseX<(width/2) || (mouseY<(height/2))){
        strokeWeight(3);
        stroke(216,170,153);
        fill(236,191,153);
        ellipseMode(CENTER);
        ellipse(width/2, height/2, 200,300);  
    }
        else{
            noStroke();
    rectMode(CORNERS);
    rect((width/2)-80, (height/2)+60,(width/2)+80, (height/2)-80);

    noStroke();
    triangle((width/2)-80, (height/2)+60,300,450,(width/2)+80, (height/2)+60,30);
        }
        
    

    //mouth
    strokeWeight(5);
    stroke(216,170,153);
    line(width/2-10,height/2+100,310,400);

    //beard
    noFill();
    if(mouseX<(width/2)|| mouseY<(height/2)){
        stroke(50);
    }else {
        stroke(255,216,0);
    }
    //noFill();
    rectMode(CENTER);
    //stroke(50);
    //strokeWeight(8);
    rect(300,410,50,45,5);

    //eyes
    noStroke();
    fill(255);
    rect(260,280,35,20,5,5,10,10);
    rect(340,280,35,20,5,5,10,10);

    //shadow eyes
    noStroke();
    fill(230);
    rect(260,288,25,5,5,5,10,10);
    rect(340,288,25,5,5,5,10,10);



    //line below eyes
    strokeWeight(8);
    stroke(193,144,135);
    line(240,300,270,300);
    line(330,300,360,300);


    //eyeballs
    noStroke();
    fill(151,79,0);
    ellipse(260,280,15,15);
    ellipse(340,280,15,15);

    //pupil
    fill(0);
    ellipse(260,280,8,8);
    ellipse(340,280,8,8);

    //hair2
    if (mouseX<(width/2) || mouseY<(height/2)){
        noStroke();
        fill(50);    
    } else {
        noStroke();
        fill(255,216,0);
    }
    /*noStroke();
    fill(50);*/
    ellipse(300,170,100,50);
    arc(250,180,90,70,-60,150,CHORD);
    arc(210,220,80,60,-60,110,CHORD);
    arc(350,180,70,50,-80,150,CHORD);
    arc(390,220,80,60,-60,110,CHORD);
    arc(370,190,80,60,-60,110,CHORD);
    arc(400,260,70,50,-60,110,CHORD);

    //noStroke();
    //fill(0);
    //rect(300,150,220,100,50,50,10,10);

    //eyebrows
    fill(79,28,0);
    rect(260,260,45,10,5,5,10,10);
    rect(340,260,45,10,5,5,10,10);

    //nose
    strokeWeight(1);
    stroke(216,170,153);
    line(width/2-10,height/2+50,295,305);
    //line(310,350,305,305);
    noStroke();
    fill(216,170,153);
    triangle(width/2-10,height/2+50,295,305,310,345);

}

I started creating an ellipse as the base for the face. Then I drew the ears, as I wanted the hair to come in front of them, to cover them a little bit. Eyes were more time consuming as I was filleting the corners of the rectangle and drawing the pupils too. Hair was tricky as well as I used filled arcs and the result was unexpected and interesting at the same time when I did the right side of the forehead. Finally I wanted to add some conditionals and change the hair colour and the face shape depending on the position of the mouse.

kyungak-self-portrait

//Kyunga Ko, 15104E, kyungak@andrew.cmu.edu, Project-01

function setup() {
    createCanvas(500, 675);
    background(230,157,157);
}

function draw() {

    fill(0);
    noStroke();
    quad(0,100,270,70,250,230,0,300);
    quad(270,70,370,400,270,440,250,230);
    quad(350,370,370,400,160,600,0,500);
    //hair

    fill(169,181,223);
    stroke(37);
    arc(0,530,330,730,0,HALF_PI);
    //body

    fill(232,197,162);
    rotate(PI/7);
    stroke(37);
    ellipse(250,260,330,430);
    //face

    fill(227,72,80);
    noStroke();
    triangle(234,300,249,260,263,300);
    //nose

    noFill();
    stroke(227,103,36);
    strokeWeight(10);
    arc(240,350,50,30,3*PI/2,PI/2);
    arc(240,380,50,30,3*PI/2,PI/2);
    //mouth

    fill(237,195,127);
    ellipse(180,237,70,110);
    //left eye

    fill(237,195,127);
    ellipse(320,237,70,110);
    //right eye

    fill(36,35,40);
    noStroke();
    ellipse(320,245,30,70);
    //right eye pupil

    fill(36,35,40);
    noStroke();
    ellipse(180,245,30,70);
    //left eye pupil

    fill(227,103,36);
    rotate(PI/17);
    rect(165,140,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(190, 145, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    rect(310,115,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(340, 118, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid


}

Although the face does not exactly synchronize the way I look, I took an artistic approach and experimented with the shapes to produce a self portrait. It was interesting to work and learn about the different features of javascript.

sketch

function setup() {
    createCanvas(600, 600);
    background(255);
}

function draw() {
	//%60 More handsome Sheenu
	noStroke();

	//Awesome Background
	fill(44,86,159)
	ellipse(300, 300, 550, 550);

	//Neck
	fill(202, 153, 101);
	triangle(391, 203, 300, 1000, 190, 203);

	//Shirt
	fill(255);
	arc(290, 550, 400, 300, PI, 0, CHORD);

	//NeckCollar
    fill(202, 153, 101);
	ellipse(293, 400, 148, 130);	

	//Hair BACK
	fill(16,38,77);
	rect(160, 90, 263, 240, 60);

	//Head
    fill(222,182,139);
	rect(172, 116, 240, 240, 60);
	triangle(393, 340, 300, 400, 191, 340);
	strokeWeight(35);
	stroke(224, 141, 90);
	line(220,253,360,253);
	stroke(0);
	noStroke();


	//Hair FRONT
	fill(16,38,77);
    quad(183, 116, 400, 116, 410, 150, 169, 180);
    triangle(160, 150, 170, 300, 190, 160);
    triangle(370, 130, 420, 270, 420, 150);
    triangle(160,180, 230, 140, 260, 200);

    //Random Rectangle that Hides Stuff
    fill(255);
    rect(1,550,450,600);

    //Ears
    fill(222,182,139);
    ellipse(175, 250, 50, 70);
    ellipse(407, 250, 50, 70);

    //FACE

    //Eyes
    stroke(5, 19, 46);
    strokeWeight(20);
    line(200, 220, 260, 220);
    line(320, 220, 380, 220);
    strokeWeight(5);
    line(220, 250, 260, 250);
    line(320, 250, 360, 250);
    strokeWeight(20);
    fill(5, 19, 46);
    ellipse(250,260,1,1);
    ellipse(350,260,1,1);

    //Nose
    noStroke();
    fill(202, 153, 101);
    triangle(323, 310, 295, 330, 261, 310);

}

This project was really fun and also perfectly challenging. I am really happy with the way this turned out visually, especially since I made this %60 more good looking than me in reality. I tried using Photoshop to help me guide the coordinates for these shapes, but for some reason they did not match and the codes for Photoshop would put shapes in different places in the .js code. Making this face mostly took trial and error and took me a lot of time discovering and learning how to use new shapes like lines, triangle, and other complicated shapes. Other than that, this was pretty good and fun.

sketch

//Angela Rubin
//Section C
//aerubin
//Assignment-01

function setup() {
    createCanvas(500, 500);
    background(220, 248, 244);
    angleMode(DEGREES); 
}

function draw() {

    //Hair
    strokeWeight(0);
    fill(64, 30, 5);
    rect(140, 175, 220, 300);

    //Shirt
    if(mouseIsPressed) {
        fill(255, 254, 56);
    } 
    else {
        fill(247, 219, 223);
    }
    
    rect(207, 390, 86, 110);

    arc(220, 570, 270, 315, 180, 310, CHORD);

    arc(280, 570, 270, 315, 200, 330, CHORD);

    //Neck
    strokeWeight(0);
    fill(235, 210, 195);
    rect(207, 320, 86, 105);

    arc(250, 420, 86.6, 79, 0, 180, CHORD);

    //Face
    strokeWeight(1);
    stroke(225,198,208);
    fill(231, 212, 199);
    triangle(250, 250, 325, 350, 250, 400);

    fill(234, 211, 197);
    triangle(250, 250, 175, 350, 250, 400);

    fill(235, 210, 195);
    triangle(250, 250, 175, 350, 150, 250);

    fill(233, 214, 200);
    triangle(250, 250, 325, 350, 350, 250);

    fill(235, 210, 193);
    triangle(250, 250, 340, 175, 350, 250);

    fill(231, 212, 199);
    triangle(250, 250, 160, 175, 150, 250);

    fill(233, 209, 195);
    arc(250, 250, 225, 247, 220, 320, PIE);

    //Facial Features
    strokeWeight(4);
    stroke(0, 0, 0);
    noFill();
    arc(200, 268, 60, 60, 220, 320);

    noFill();
    arc(300, 268, 60, 60, 220, 320);

    noFill();
    arc(250, 300, 90, 80, 0, 180, CHORD);

    line(250, 250, 265, 270);
    line(265, 270, 250, 270);

    //Bangs
    strokeWeight(0);
    fill(64, 30, 5);
    arc(315, 130, 220, 180, 50, 180, CHORD);

    arc(250, 268, 270, 315, 220, 320, CHORD);

    arc(165, 160, 120, 65, 0, 110, CHORD);

    rect(150, 175, 39, 15);

    rect(310, 175, 40, 20);

    //Arm Lines
    strokeWeight(2.5);
    line(168, 483, 168, 500);
    line(332, 483, 332, 500);

    //Bobby Pins
    strokeWeight(3);
    stroke(247, 219, 223);
    line(332, 160, 315, 183);
    line(323, 152, 306, 175);
}

This project really challenged my creativity as I do not normally picture simple shapes forming the basis of a human face. I began forming ideas by drawing faces on paper and experimenting with different shapes. Eventually, I came to the conclusion that triangles could be a viable option to draw the initial structure of the head. Instead of making the triangles the same color and no outline, I thought it would be interesting if each triangle was a slightly different shade than the adjacent ones to add an element of abstractness. I then added the rest of the features of the face, hair, and clothing. In addition, the shirt changes color when the mouse is clicked. I am very happy with the product and it was really enjoyable to create!

Anna-Face

//Anna Boyle
//Section D
//aboyle@andrew.cmu.edu
//Assignment-01

function setup() {
    createCanvas(350, 350);
    background(166,242,252);

    strokeWeight(0)

//hair color-back
    fill(81,58,30)
    ellipse(230,220,95,100)
    fill(81,58,30)
    ellipse(120,90,120)
    ellipse(115,150,110)
    ellipse(110,200,110)

//clothing color
    fill(38,112,51)
    ellipse(160,275,180,120)

//skin color
    fill(241,197,137)
    ellipse(149,100,120,120)
    ellipse(149,150,115,115)
    rect(140,190,45,50)

//blush
    fill(244,156,103)
    rect(94,130,70,20,0,20,20,20)

//hair color-front
    fill(81,58,30)
    ellipse(170, 55, 100, 60)
    ellipse(210,100,95,100)
    ellipse(220,180,95,100)

    strokeWeight(9)
    noFill()

//face
    curve(160, 20, 150, 207, 95, 138, 300, 0);
    curve(100, 100, 120, 50, 95, 130, 300, 290);

//eyes
    line(110,112,110,128)
    line(135,112,135,128)

//hair lines
    curve(350,280,137,34,68,123,350,350)
    curve(150,150,68,123,65,170,150,150)
    curve(200,200,65,170,77,245,200,200)
    curve(200,100,137,34,220,50,300,300)
    curve(0,100,220,50,245,135,50,200)
    curve(150,125,245,135,270,190,210,250)
    curve(100,100,270,190,253,263,200,125)
    curve(280,0,120,50,175,80,200,0)
    curve(350,0,168,83,200,145,220,0)

//clothing lines
    stroke(22,65,29)
    line(102, 280, 102, 315)
    line(200, 280, 200, 323)
    curve(100,100,125,230,195,227,120,120)

//hair line
    stroke(0)
    curve(350,50,185,149,240,220,630,0)

//face
    strokeWeight(5)
    curve(200,140,120,140,120,150,200,150)
    curve(100,100,115,170,135,170,120,120)
    curve(100,130,102,105,120,100,100,140)
    curve(150,130,129,100,147,105,120,140)
}

I thought this assignment was pretty cool! The project description included a picture of Tintin, which inspired me to use bold, black lines in my drawing. It was a lot of trial and error for me, but I enjoyed the process a lot. I had fun with the curve function, as you can probably tell. I also learned very quickly that it helps to separate your code and comment what each section is for.

I had one little hiccup with noStroke() affecting later lines, but I changed it to strokeWeight(0) and that worked out a lot better. I also meant to have a bigger canvas, but by the time I realized my canvas was set to (350, 350) it would’ve been a ludicrous amount of extra work to go back and adjust everything accordingly. Overall I’m pretty happy with how it turned out.

sketch

function setup() {
    createCanvas(500, 600);
    background(247,187,31);
}

function draw() {
    //hair
    strokeWeight(0);
    fill(137,60,29);
    ellipse(240,280,300,300)
    strokeWeight(0);
    fill(137,60,29);
    ellipse(185,350,290,310);
    strokeWeight(0);
    fill(137,60,29);
    ellipse(300,360,280,270);
    //face
    strokeWeight(0);
    fill(234,179,125);
    ellipse(250,300,250,260);
    //body
    strokeWeight(0);
    fill(141,214,239);
    ellipse(230,580,355,240);
    //cheeks
    strokeWeight(0);
    fill(250,178,125);
    ellipse(187,305,75,75);
    strokeWeight(0);
    fill(250,178,125);
    ellipse(328,305,75,75);
    //eyes
    strokeWeight(0);
    fill(137,60,29);
    ellipse(220,273,20,15);
    strokeWeight(0);
    fill(137,60,29);
    ellipse(308,273,20,15);
    //nose
    strokeWeight(0);
    fill(244,151,89);
    rect(258,265,23,80);
    //mouth
    stroke(234,125,92);
    strokeWeight(5);
    noFill();
    line(230,370,290,370);
}

Process:

I started by mocking up my self portrait in Illustrator, to figure out the shapes and colors that would work best for this assignment. I found it easier to rough it out in Illustrator and in my sketchbook as opposed to diving in with code without first planning out how I wanted it to look. After I figured out the way I generally wanted it to look in Illustrator, I used the ruler function to find the x and y coordinates for each shape to insert into my code. Once I had coded everything to the exact coordinates that I had in Illustrator, I further tweaked some of the facial elements to get everything the way I wanted. I messed around with adding colored strokes to certain elements, as well as adding a neck, but decided in the end to keep to simple, rounded shapes to unify the composition.

sketch

//Scarlet Tong 
//
function setup() {
    createCanvas(600, 600);
    background(254);

}

function draw() {
    //hair
    var c = color(0,0,0);
    fill (c);
    noStroke();
    rect (105,184,382,350);
    ellipse(296,195,382,282);

    //clothes
    var c = color (171,229,255);
    fill (c);
    noStroke();
    rect(140,483,319,170,25,25,0,0);//tee


    //face and neck
    var c = color (255,204,188);
    fill(c);
    rect(170,193,255,260,0,0,140,140);//face
    noStroke();
    rect (267,420,63,80);//neck
    rect (238,483,120,49,0,0,20,20);//collar

    var b = color(0,0,0);//eyes, noses, lips
    fill(b);
    ellipse(245,275,13,23);
    ellipse(354,275,13,23);
    noFill();
    stroke(0);
    strokeWeight(5);
    line(294,316,294,335);
    line(294,335,305,340);
    strokeCap(SQUARE);
    arc(300,400,30,25,0,PI);

    stroke (255,96,97);//glasses 
    strokeWeight(10);
    strokeCap(ROUND);
    line(204,246,280,246);
    line(280,246,280,300);
    line(204,300,280,300);
    line(204,246,204,300);
    line(320,246,396,246);
    line(396,246,396,300);
    line(320,300,396,300);
    line(320,246,320,300);
    line(170,270,204,270);
    line(280,270,320,270);
    line(396,270,425,270);








}

This is my first coding assignment and working with Java Script. I believe the Mondrian assignment was a nice jump start for me to get used to the coding language and the formatting. I relied on the online reference to help me on the assignment.