Category: Project Week 1

michal-portrait

function setup() {
     createCanvas(455, 430);
     background(255, 87, 51);
}

function draw() {


	//face
	fill(255, 195, 1);
	noStroke();
	rect(120, 130, 80, 200);

	stroke(225, 195, 15);
	strokeWeight(1)
	rect(160, 128, 100, 180, 50);

	//nose
	triangle(257, 216, 257, 246, 275, 246);

	//sunglasses
	stroke(90, 24, 70);
	strokeWeight(5);
	line(170, 200, 260, 200);
	fill(145, 13, 63);
	ellipse(230, 210, 37);

	//lips
	stroke(145, 13, 63);
	strokeWeight(1);
	fill(199, 0, 57);
	triangle(245, 270, 260, 270, 260, 260);
	triangle(245, 270, 260, 270, 260, 280);

	//hair
	noStroke();
	fill(145, 13, 63);
	triangle(100, 130, 270, 85, 270, 160);
	fill(125, 13, 63);
	triangle(100, 130, 150, 137, 100, 300);
	fill(105, 23, 63);
	rect(80, 130, 60, 230);
	fill(145, 23, 63);
	triangle(40, 350, 140, 350, 120, 130);
	fill(135, 13, 63);
	triangle(150, 130, 180, 140, 130, 210);

	//headphones
	fill(90, 24, 70);
	ellipse(170, 215, 55);
	fill(199, 0, 57);
	ellipse(175, 210, 55);

	quad(195, 105, 235, 95, 190, 200, 160, 200);

}

In this project I started by hand sketching the portrait I wanted to create, and then broke it up into primitive shapes. Creating this image using JS required a number of iterations much greater than I expected, moving shapes around until I formed the full image I had in mind.

jinheel1_Project-01

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-01

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

function draw() {
	background('blue');	//blue colored background
	strokeWeight(3);	//thicker outlines
	fill(255);	//white color for shirt
	triangle(0,600,600,600,300,537);
	fill(237,221,116);	//yellowish color for neck and face
	rectMode(CENTER);
	rect(300,525,160,60);	//neck
	ellipse(300,300,400,450);	//face
	fill(255);	//white color for eyeballs
	ellipse(210,230,65,45);
	ellipse(390,230,65,45);
	fill(89,65,12);		//brown color for outline of eyes
	ellipse(210,230,40,40);
	ellipse(390,230,40,40);
	fill(0);	//black color for eyes, hair features, and simplistic lips
	ellipse(210,230,25,25);	//eyes
	ellipse(390,230,25,25);
	quad(150,160,150,200,250,220,250,200);	//eyebrows
	quad(450,160,450,200,350,220,350,200);
	triangle(400,140,30,170,380,10);	//hair
	triangle(380,130,400,30,550,170);
	line(250,390,380,420);	//lips
	fill(247,181,195);	//pinkish color for nose
	triangle(260,340,340,340,300,240);
	fill('red');	//red color for that anger mark you see in Japanese anime
	rectMode(CORNER);
	strokeWeight(0);	//eliminate outlines for this shape
	rect(170,30,20,50);	//drawing the anger mark
	rect(140,60,50,20);
	rect(210,30,20,50);
	rect(210,60,50,20);
	rect(140,100,50,20);
	rect(170,100,20,50);
	rect(210,100,50,20);
	rect(210,100,20,50);
}

Not quite as frustrating as other coding projects (only took me 1.5 hours to type up the code) I’ve done, but I certainly had to think it through. Word of advice kiddies, draw your picture on paper and note the coordinates. Makes your life so much easier.

bdarreff_Project01

// Brandon Darreff

// Section A (Tuesdays 9:00)

// bdarreff@andrew.cmu.edu

// Project-01

function setup() {
    createCanvas(400, 550);
    background(186, 212, 126);
}

function draw() {
	// background triangles
	fill(211, 156, 93);
	stroke(255);
	triangle(0, 550, 0, 200, 175, 550);
	triangle(0, 0, 0, 100, 400, 0);
	triangle(400, 75, 400, 550, 300, 550);
	
	// left eyebrow
	fill(36, 107, 104);
	strokeWeight(0.5);
	stroke(255);
	beginShape();
	vertex(140, 200);
	quadraticVertex(220, 220, 200, 225);
	endShape(CLOSE);
	// right eyebrow
	beginShape();
	vertex(291, 268);
	quadraticVertex(220, 215, 236, 238);
	endShape(CLOSE)

	// left eye
	fill(255);
	stroke(100);
	strokeWeight(0.5);
	beginShape();
	vertex(150, 220);
	quadraticVertex(170, 210, 190, 250);
	quadraticVertex(170, 250, 150, 235);
	endShape(CLOSE);
	// right eye
	beginShape();
	vertex(235, 255);
	quadraticVertex(255, 245, 275, 285);
	quadraticVertex(255, 285, 235, 270);
	endShape(CLOSE);

	// left iris
	fill(36, 107, 104);
	stroke(0);
	strokeWeight(1);
	ellipse(167, 233, 17, 17);
	// right iris
	ellipse(252, 268, 17, 17);

	// left pupil
	fill(0);
	noStroke();
	ellipse(167, 233, 10, 10);
	// right pupil
	ellipse(252, 268, 10, 10);

	// left eye highlight
	fill(255);
	noStroke();
	ellipse(165, 230, 4, 2);
	//right eye highlight
	ellipse(249, 265, 4, 2);

	// nose
	fill(210, 232, 145);
	stroke(125);
	arc(190, 319.5, 20, 20, 30.5, HALF_PI, OPEN);
	noStroke();
	beginShape();
	vertex(220, 237);
	quadraticVertex(163, 322, 190, 330);
	endShape(CLOSE);
	p1 = {x: 220, y: 237}, p2 = {x: 190, y: 330}
	p3 = {x: 400, y: 320};
	noFill();
	stroke(125);
	curve(p1.x, p1.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);

	// hair
	fill(36,107,104);
	stroke(255);
	strokeWeight(1);
	beginShape();
	vertex(115, 250);
	quadraticVertex(110, 180, 150, 110);
	quadraticVertex(140, 130, 170, 150);
	quadraticVertex(160, 120, 180, 90);
	quadraticVertex(190, 140, 225, 150);
	quadraticVertex(210, 120, 220, 85);
	quadraticVertex(280, 160, 325, 180);
	quadraticVertex(340, 230, 290, 310); 
	quadraticVertex(300, 295, 300, 250);
	quadraticVertex(280, 260, 240, 180);
	quadraticVertex(220, 135, 130, 205);
	vertex(115, 250);
	endShape(CLOSE);

	// mouth
	fill(255);
	stroke(100);
	strokeWeight(1.5);
	beginShape();
	vertex(160, 345);
	quadraticVertex(190, 350, 200, 375);
	quadraticVertex(190, 385, 160, 360);
	endShape(CLOSE);
	strokeWeight(1);
	line(160, 354, 200, 375);

	// left ear
	fill(210, 232, 145);
	stroke(255);
	strokeWeight(1);
	beginShape();
	vertex(115, 250);
	quadraticVertex(95, 255, 114, 290);
	vertex(115, 250);
	endShape(CLOSE);
	// right ear
	beginShape();
	vertex(290, 310);
	quadraticVertex(310,325,265,350)
	vertex(290, 310);
	endShape(CLOSE);

 	// neck
	noFill();
	stroke(210, 232, 145);
	beginShape();
	vertex(150, 390);
	quadraticVertex(175, 410, 205, 400);
	quadraticVertex(190, 425, 195, 450);
	quadraticVertex(155, 475, 120, 425);
	quadraticVertex(145, 410, 139, 370);
	vertex(139, 370);
	endShape();

	// chin
	noFill();
	stroke(210, 232, 145);
	strokeWeight(1);
	beginShape();
	vertex(115, 250);
	quadraticVertex(105, 315, 150, 390);
	quadraticVertex(175, 410, 205, 400);
	quadraticVertex(250, 370, 265, 350);
	endShape();

	// shirt
	fill(255);
	stroke(255);
	beginShape();
	vertex(120, 425);
	quadraticVertex(155, 475, 195, 450);
	quadraticVertex(250, 450, 290, 480);
	quadraticVertex(298, 515, 290, 550);
	vertex(175, 550);
	vertex(110, 420);
	endShape(CLOSE);

	stroke(200);
	line(230, 550, 241, 505);
	line(237, 520, 234, 510);

	noLoop();
}

With this project I used a combination of primitive 2-d functions and irregular shapes to create the stylized portrait above. It was helpful to quickly sketch out the intended end-product on graph paper to be able to map certain features. I think the look of concern on the resultant figure’s face successfully captures my crippling anxiety and I am looking forward to learning how to develop the code I wrote in much cleaner, more efficient ways.

Being a first time coder, this project was difficult.  However, by the end of the program I got into a rhythm and felt much more comfortable with the coding.

(For some reason I couldn’t figure out the photo wouldn’t load, so above is a screenshot.)

 

sketch

function setup() {
    createCanvas(1000, 1000);
    background(0);
}

function draw() {
	
       fill(83,39,5);              //hair
    ellipse(500,500,800,2000);
    
       strokeWeight(0);
       fill(229,171,110);             //face
    ellipse(450,360,500,600);
    
        strokeWeight(0);
        fill(255);
    ellipse(350,300,90,70);         //white of the eye, right
    
        strokeWeight(0);
        fill (159,56,19);           //brown
    ellipse(350,300,50,50);
    
        strokeWeight(0);
        fill(255);
    ellipse(550,300,90,70);           //white of the eye, left
    
        strokeWeight(0);
        fill (159,56,19);             //brown
    ellipse(550,300,50,50);
        
        strokeWeight(0);
        fill(217,155,88);         //bridge of the nose
    triangle(450,300,475,420,405,420); 

        strokeWeight(0);
        fill(251,169,209);                   //cheek L
    quad(500,380,590,380,590,450,500,450);
  
        strokeWeight(0);
        fill(251,169,209);                   //cheek R
    quad(280,380,380,380,380,450,280,450);

        fill(83,39,5);                //hair swoop
    ellipse(400,100,530,200);

        strokeWeight(10);           //Right eyebrow 1
        stroke(83,39,5); 
    line(400,255,375,245);
        
        strokeWeight(10);           //Right eyebrow 2
        stroke(83,39,5); 
    line(375,245,335,245);

        strokeWeight(10);           //Right eyebrow 3
        stroke(83,39,5); 
    line(335,245,300,255);

        strokeWeight(10);           //Left eyebrow 1
        stroke(83,39,5); 
    line(500,255,525,245);
        
        strokeWeight(10);           //Left eyebrow 2
        stroke(83,39,5); 
    line(525,245,565,245);

        strokeWeight(10);           //Left eyebrow 3
        stroke(83,39,5); 
    line(565,245,595,255);

        fill(226,52,123);            //barrett 1
    ellipse(800,225,100,100);

        stroke(226,52,123);
        fill(226,52,123);            //barrett L
    triangle(850,225,890,160,910,270);

        stroke(226,52,123);
        fill(226,52,123);            //barrett R
    triangle(750,242,690,200,710,320);
         
         strokeWeight(0);          //lower lip
         fill(201,2,77);
    quad(360,520,540,520,500,550,400,550);

         strokeWeight(0);         //upper lip R
         fill(201,2,77);
    triangle(360,520,420,490,455,520);
 
         strokeWeight(0);         //upper lip L
         fill(201,2,77);
    triangle(540,520,470,490,440,520);

         strokeWeight(0);         //neck
       fill(229,171,110); 
    rect(375,630,150,200);
       
       strokeWeight(0);         //body
       fill(128,30,80); 
    ellipse(480,980,660,400);

       // stroke(83,39,5);
       // strokeWeight(10);  
    //ine(350,80,800,400);

       // stroke(83,39,5);
       // strokeWeight(10);  
   // line(370,80,800,300);

     
    
}

Shannon’s Self Portrait

//Shannon Case
//scase@andrew.cmu.edu
//section D
//this program creates my self portrait

function setup() {
    createCanvas(600,600);
    background(random(0,255),random(0,255),random(0,255)); 
    //creates background that changes each time the page loads
    
}

function draw() {
	noStroke(); // makes sure the shapes have no outline
	fill('tan');
	rect(280,550,20,60);
	rect(320,550,20,60); //creates my legs

	fill('brown');
	rect(200,150,200,200); //creates hair
    ellipse(300,100,215);

	fill('red');
    triangle(100,550,300,150,500,550); //creates red dress

	fill('tan');
	ellipse(300,150,200); //creates my head

	ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    ellipse(275,130,15);  //

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill('blue');  // Set fill to blue
    ellipse(275,130,15);

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    ellipse(325,130,15);  //

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill('blue');  // Set fill to blue
    ellipse(325,130,15);

    //^^ creates my eyes

	noFill();
	stroke(0);
	curve(225,130,275,200, 325, 200, 375,130); //creates smily face
 
    
}

For this project I played around with shapes, layering them on top of each other in order to create a stylized figure of myself. I chose to portray myself in my favorite red dress, and smiling because it makes me happy to try coding!!

sketch

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

function draw() {
	background(57,57,57);
    noStroke();
    var c = color(255,255,255);
    fill(c);
    rect(235,246,11,114);
    rect(235,376,11,51);
    rect(249,224,11,136);
    rect(249,369,11,39);
    rect(249,433,11,19);
    rect(265,203,11,150);
    rect(265,359,11,52);
    rect(265,419,11,14);
    rect(265,450,11,14);
    rect(283,186,11,157);
    rect(282,349,11,151);
    rect(304,173,11,161);
    rect(304,340,11,200);
    rect(326,160,11,156);
    rect(326,325,11,11);
    rect(326,342,11,222);
    rect(347,152,11,152);
    rect(347,314,11,29);
    rect(347,351,11,42);
    rect(347,401,11,180);
    rect(371,146,11,150);
    rect(371,306,11,41);
    rect(371,354,11,35);
    rect(371,401,11,23);
    rect(371,431,11,162);
    rect(394,143,11,143);
    rect(394,297,11,51);
    rect(394,354,11,37);
    rect(394,405,11,16);
    rect(394,431,11,172);
    rect(414,145,11,137);
    rect(414,290,11,51);
    rect(414,349,11,48);
    rect(414,406,11,16);
    rect(414,427,11,103);
    rect(414,545,11,62);
    rect(437,164,11,113);
    rect(437,286,11,51);
    rect(437,345,11,146);
    rect(437,496,11,31);
    rect(437,550,11,62);
    rect(457,178,11,96);
    rect(457,283,11,48);
    rect(457,337,11,160);
    rect(457,504,11,22);
    rect(457,551,11,59);
    rect(477,192,11,79);
    rect(477,280,11,44);
    rect(477,329,11,78);
    rect(477,413,11,78);
    rect(477,494,11,29);
    rect(477,540,11,58);
    rect(495,210,11,66);
    rect(495,284,11,30);
    rect(495,320,11,75);
    rect(495,403,11,13);
    rect(495,422,11,149);
    rect(511,244,11,31);
    rect(511,284,11,22);
    rect(511,313,11,68);
    rect(511,395,11,15);
    rect(511,417,11,108);
    rect(526,288,11,16);
    rect(526,310,11,71);
    rect(526,391,11,103)
    rect(539,297,11,8);
    rect(539,311,11,30);
    rect(511,299,11,42);
    rect(563,306,11,39);
    rect(576,312,11,37);
    rect(588,318,11,33);
    rect(600,330,11,20);
    rect(551,300,11,42);

    noStroke();
    fill(158,40,40);
    ellipse(438,218,72,72);



}

sarita

function setup() {
    createCanvas(600, 600);
    background(180,165,234);
    
    // text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	// testing hair?
	noStroke();
	fill(164,55,220);
	ellipse(425,290,360,400);
	fill(164,55,220);
	ellipse(450,500,200,200);
	
	// Head
	noStroke();
	fill(207,33,225);
	ellipse(400,300,290,400);
	// right ear
	noStroke();
	fill(207,33,225);
	ellipse(545,320,120,120);
	// left ear
	noStroke();
	fill(207,33,225);
	ellipse(280,320,120,120);
	// bangs kinda
	fill(164,55,220);
	ellipse(410,159,210,120);
	// left eyebrow
	fill(81,97,211);
	triangle(290,260,330,220,370,260);
	// right eyebrow
	fill(81,97,211);
	triangle(420,260,460,220,500,260);
	// left eye
	fill(81,97,211);
	rect(280,280,90,10);
	
	// right eye
	fill(81,97,211);
	rect(420,280,90,10);
	// nose
	fill(81,97,211);
	triangle(370,360,390,300,400,360);
	// mouth
	fill(81,97,211);
	rect(350,400,90,8)
	// more hair
	fill(164,55,220);
	ellipse(530,240,50,140);
	
	fill(164,55,220);
	ellipse(520,200,60,60);
	
	fill(207,33,225);
	rect(375,470,40,70);
	// shirt
	fill(244,15,229);
	rect(360,540,100,100);
	// sweater
	fill(81,97,211);
	ellipse(510,540,200,90);
	fill(81,97,211);
	ellipse(310,540,160,70);
	fill(81,97,211);
	rect(420,560,180,50);
	fill(81,97,211);
	rect(250,560,120,50);
	fill(81,97,211);
	ellipse(265,560,40,50);
	// hand
	fill(207,33,225);
	rect(210,490,50,100);
	// fingers
	// 1
	stroke(164,55,220);
    strokeWeight(20);
	line(240, 500, 220, 400);
	// 2
	stroke(164,55,220);
    strokeWeight(20);
	line(250, 400, 250, 500);
	// 3
	stroke(164,55,220);
    strokeWeight(20);
	line(240, 570, 210, 500);
	// 4
	stroke(164,55,220);
    strokeWeight(20);
	line(250, 550, 220, 500);
	// 5
	stroke(81,97,211);
    strokeWeight(20);
	line(240, 520, 260, 530);














	
	
	
}

 

 

First: I did a very crude sketch of the shapes that I wanted to use for this self portrait. I didn’t want to use colours for actual skin tone, hair colour etc. so I decided to go off of a purple gradient palette. The peace sign is my go to pose for every situation, so I decided to include it.

Peoject-01-face.js

click on the nose

Like a few others I started out with a quick drawing with basic shapes. I then used the “Info” tool Photoshop to gather rough coordinates for the shapes. From there I tried to think of every color as a layer and roughly organized the code starting with the pink shapes and then going to yellow ones and then orange. The end result doesn’t look a ton like me but it still has my cheeks.

sketch<-49.js

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//project-01

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

function draw() {

    background(196,53,255);
    //head
    noStroke();
    fill("black"); //hair
    arc(230,190,100,100, PI,PI/100);

    fill(255,153,0); //temple
    quad(190,190,210,180,210,200,190,200);

    fill(250,120,30); //forehead
    rect(200,170,80,30,10);
    
    fill(255,190,10); //lowerTemple
    rect(190,200,70,20);

    fill(255,190,90); //chin
    quad(200,200,270,200,260,260,215,260);

    fill(255,160,120);
    quad(190,220,230,220,215,260,190,240); //left cheek

    fill(255,160,90);
    quad(250,220,280,220,280,240,260,260);

    //nose
    noStroke();
    
    fill(205,200,120);
    
    arc(235,230,10,10,PI/10,PI); //left nostril
    
    fill(260,175,10);// nose tip
    ellipse(242,232,12,12);

    fill(255,200,200); //bridge
    quad(230,220,235,230,245,230,250,220);

    //ears
    fill(255,160,200);
    quad(178,187,190,190,190,220,180,210,10);

    //Glasses
    stroke(10);
    strokeWeight(5);

    fill(153,153,255);
    rect(200,200,30,20,5); //left

    fill(154,160,255)
    rect(250,200,30,20,5); //right

    noFill();
    arc(240,210,19,10,PI,0);

    line(190,200,200,200);

    //lips
    noStroke();
    fill("red");
    triangle(225,250,250,250,240,252);
    triangle(230,250,235,247,245,250);
    triangle(240,250,242,247,250,250);
    noLoop(); //saves computing power

}

Working on this assignment I became better acquainted with some of the P5.js functionalities and limitation. I particularly struggled with layering the code to present itself in the way I needed to. I enjoyed the process of designing what my image would look like, but was disappointed with my limited knowledge to execute the idea. Overall the project was a great learning experience and I am happy to be able to express myself through simple lines of code.

I aimed to create as realistic a self portrait I could for this project. I was very aware of the limitations I faced, given the fact that this would be the first time I was creating something from scratch using Javascript. The final product is a very cartoon like and basic emulation of myself. Overall, the project really forced me to constantly think about the sequence of code. Otherwise, I would not have been able to overlap the elements the way I wanted to.

 

ijhongproject1

// Isabella Hong
// Section A (Tuesday 9:00AM)
// ijhong@andrew.cmu.edu
// Project-01

function setup() { 
	createCanvas(600, 750);
}

function draw() {
	background(235, 235, 255);
	// Long Length Hair 
	fill(43, 29,14);
	noStroke();
	rect(145, 200, 310, 400);
	// Basic face shape
	fill(229, 194, 152);
	stroke(210, 180, 140);
	ellipse(300, 275, 300, 400);
	// Neck 
	fill(229, 194, 152);
	noStroke();
	rect(250, 350, 100, 200);
	// Torso
	fill(0, 0, 0);
	stroke(255, 255, 255);
	strokeWeight(2.5);
	rect(250, 525, 100, 300);
	// Clothing
	fill(0, 0, 0);
	rect(99, 561.5, 150, 300);
	rect(350, 561.5, 150, 300);
	fill(0, 0, 0); 
	triangle(250, 525, 250, 663, 100, 563);
	triangle(350, 525, 350, 663, 500, 563);
	//Glasses 
	stroke(87, 22, 22); 
	strokeWeight(7);
	line(155, 225, 445, 225);
	noFill();
	rect(175, 225, 110, 80);
	rect(315, 225, 110, 80); 
	// Eyes
	fill(43, 29, 14);
	noStroke();
	ellipse(230, 267, 20, 20);
	ellipse(370, 267, 20, 20);
	// Nose
	fill(229, 194, 152);
	stroke(210, 180, 140);
	strokeWeight(2);
	smooth();
	quad(302, 277, 282, 352, 302, 365, 317, 352);
	//Birthmark
	fill(210, 180, 140);
	stroke(210, 180, 140);
	noSmooth();
	ellipse(400, 320, 20, 15);
	// Mouth
	fill(244, 194, 194);
	stroke(231, 84, 128);
	angleMode(DEGREES);
	arc(300, 385, 110, 110, 0, 180, CHORD);
	// Top Hair 
	fill(43, 29, 14);
	noStroke();
	angleMode(DEGREES);
	arc(300, 210, 320, 300, 180, 360, CHORD);
	noLoop();

}