![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
function setup() {
createCanvas(300, 300);
background(200,250,200);
noStroke();
fill(322);
ellipse (150,150,100,70);
text("p5.js vers 0.5.12 test.", 10, 15);
}
function draw() {
}
Category: Project Week 1
Project 1 Jonathan Perez
function setup() {
createCanvas(600, 600);
background(164, 230, 239);
//background texture
//corner squares
stroke(255);
fill(164, 230, 239);
rect(0, 0, 120, 120);
rect(width - 120, 0, 120, 120);
rect(width - 120, height - 120, 120, 120);
rect(0, height - 120, 120, 120);
//grid around head
rect(width/2 - 120, height/2 - 120, 240, 240);
line(0, height/2 - 120, 600, height/2 - 120);
line(0, height/2 + 120, 600, height/2 + 120);
line(width/2 - 120, 0, width/2 - 120, 600);
line(width/2 + 120, 0, width/2 + 120, 600);
//Triangle strips
beginShape(TRIANGLE_STRIP); //upper
vertex(width/2 - 120, 0);
vertex(width/2 - 100, height/2 - 120);
vertex(width/2 - 80, 0);
vertex(width/2 - 60, height/2 - 120);
vertex(width/2 - 40, 0);
vertex(width/2 - 20, height/2 - 120);
vertex(width/2, 0);
vertex(width/2 + 20, height/2 - 120);
vertex(width/2 + 40, 0);
vertex(width/2 + 60, height/2 - 120);
vertex(width/2 + 80, 0);
vertex(width/2 + 100, height/2 - 120);
vertex(width/2 + 120, 0);
endShape();
beginShape(TRIANGLE_STRIP); //right
vertex(600, height/2 - 120);
vertex(width/2 + 120, height/2 - 100);
vertex(600, height/2 - 80);
vertex(width/2 + 120, height/2 - 60);
vertex(600, height/2 - 40);
vertex(width/2 + 120, height/2 - 20);
vertex(600, height/2 - 0);
vertex(width/2 + 120, height/2 + 20);
vertex(600, height/2 + 40);
vertex(width/2 + 120, height/2 + 60);
vertex(600, height/2 + 80);
vertex(width/2 + 120, height/2 + 100);
vertex(600, height/2 + 120);
endShape();
//bottom
beginShape(TRIANGLE_STRIP);
vertex(width/2 - 120, 600);
vertex(width/2 - 100, height/2 + 120);
vertex(width/2 - 80, 600);
vertex(width/2 - 60, height/2 + 120);
vertex(width/2 - 40, 600);
vertex(width/2 - 20, height/2 + 120);
vertex(width/2, 600);
vertex(width/2 + 20, height/2 + 120);
vertex(width/2 + 40, 600);
vertex(width/2 + 60, height/2 + 120);
vertex(width/2 + 80, 600);
vertex(width/2 + 100, height/2 + 120);
vertex(width/2 + 120, 600);
endShape();
beginShape(TRIANGLE_STRIP); //left
vertex(0, height/2 - 120);
vertex(width/2 -120, height/2 - 100);
vertex(0, height/2 - 80);
vertex(width/2 -120, height/2 - 60);
vertex(0, height/2 - 40);
vertex(width/2 -120, height/2 - 20);
vertex(0, height/2 - 0);
vertex(width/2 -120, height/2 + 20);
vertex(0, height/2 + 40);
vertex(width/2 -120, height/2 + 60);
vertex(0, height/2 + 80);
vertex(width/2 -120, height/2 + 100);
vertex(0, height/2 + 120);
endShape();
//triangles
/*stroke(255);
fill(164, 230, 239);
beginShape(TRIANGLE_STRIP);
vertex(0, 0);
vertex(100, 100);
vertex(200, 0);
vertex(300, 300);
vertex(400, 0);
vertex(500, 500);
vertex(600, 0);
vertex(600, 600);
endShape();*/
//beginShape() // square around head
}
function draw() {
//hair section (underneath head graphic)
stroke(0)
fill(210);
quad(297, 280, 377, 280, 357, 350, 307, 385); // hair grey section
fill(0);
rect(232, 206, 10, 20);
//head
stroke(0)
fill(255, 220, 200);
ellipse(267, 310, 130, 200);
//hair (over head graphic)
noStroke();
fill(210);
rect(297, 290, 50, 20); // grey section
triangle(297, 310, 307, 310, 297, 330); // sideburns
fill(0);
quad(237, 205, 367, 220, 417, 295, 287, 290); //top black section
//face details
fill(255, 220, 200);
ellipse(327, 320, 32, 52); //ear
stroke(0)
arc(327, 320, 32, 52, 5*PI/4, PI/2); //partial ear outline
strokeWeight(2);
line(237, 360, 211, 360); //mouth horizontal
arc(247, 360, 20, 20, 4*PI/6, 8*PI/6); // mouth side
fill(0)
ellipse(random(-3, 3) + 242, random(-3, 3) + 290, 20, 20); //crazy eye
noStroke()
fill(254, 118, 145);
ellipse(267, 330, 30, 30); //cheek blush
//coffee mugs
//top left
stroke(0);
fill(255);
ellipse(75, 60, 40, 40); //handle
fill(164, 230, 239);
ellipse(75, 60, 30, 30); //cut-out handle
fill(255);
rect(30, 30, 50, 60, 8, 8, 5, 5); //mug
fill(0);
ellipse(55, 37, 40, 5); //coffee
//top right
stroke(0);
fill(255);
ellipse(width - 45, 60, 40, 40); //handle
fill(164, 230, 239);
ellipse(width - 45, 60, 30, 30); //cut-out handle
fill(255);
rect(width - 90, 30, 50, 60, 8, 8, 5, 5); //mug
fill(0);
ellipse(width - 65, 37, 40, 5); //coffee
//bottom right
stroke(0);
fill(255);
ellipse(width - 45, height - 60, 40, 40); //handle
fill(164, 230, 239);
ellipse(width - 45, height - 60, 30, 30); //cut-out handle
fill(255);
rect(width - 90, height - 90, 50, 60, 8, 8, 5, 5); //mug
fill(0);
ellipse(width - 65, height - 83, 40, 5); //coffee
//bottom left
stroke(0);
fill(255);
ellipse(75, height - 60, 40, 40); //handle
fill(164, 230, 239);
ellipse(75, height - 60, 30, 30); //cut-out handle
fill(255);
rect(30, height - 90, 50, 60, 8, 8, 5, 5); //mug
fill(0);
ellipse(55, height - 83, 40, 5); //coffee
}
I have to say, creating this self portrait was so much fun. With my limited knowledge of p5js, I was forced to experiment with a totally different art style than I am accustomed to. Despite this literally being constricting, I found it freeing.
I wanted to do something particular to coding – something I couldn’t do with normal pencil in paper – so I centered my piece around the vibrating eye. Coincidentally, the vibrating eye linked quite well to one of my life passions: coffee.
I think I’ll call this “Portrait of the Coffee as a Young Man”.
manuelrTestJsFile
function setup() {
createCanvas(800, 500);
background(220,80,100);
text("p5.js vers 0.5.12 test.", 100, 50);
}
function draw() {
noStroke();
ellipse(300,200,400,200);
fill(150,200,200);
//fill("green")
}
atraylor – Project 01 – Face
I really enjoyed this project. Changing primitives to recognizable forms is nothing new to me, but the removal of a dimension and the disjunction between transforms, functions, and immediate results through a line of code, was a curve ball. I just kept the reference material close by, mocked up a sketch in Photoshop, and did my best not to nitpick.
I was having trouble with the rotate function particularly. You can see in my code that in the beginning I had no idea how it worked and just took what it gave me and tweaked the location with a translate function. Later (with the spinning things) I finally found a detailed reference on rotation.
(Oh, and next time I’ll make it a size that fits so it won’t get occluded by the side menu)
// atraylor Section B
function setup() {
createCanvas(600,600);
background(255, 255, 255, );
frameRate(60);
}
function draw() {
background(245);
translate(-25,0);
//hair
fill(0, 255, 0, 200);
noStroke();
ellipse(179, 277, 255, 255);
fill(0, 255, 0, 150);
noStroke();
ellipse(107, 161, 109, 99);
//neck
push();
fill(255, 0, 0, 200);
noStroke();
translate(220,-20);
rotate(radians(28.16));
rect(119, 382, 103, 107);
pop();
//shoulder
fill(255, 0, 0, 230);
noStroke();
triangle(80, 464, 181, 484, 206, 593);
//face
fill(255, 0, 0, 200);
noStroke();
triangle(105, 334, 318, 247, 265, 486);
//nose
fill(128, 128, 255, 225);
noStroke();
translate(-1,0);
triangle(281,414, 298, 351, 312, 395);
//eye
fill(0, 0, 255, 200);
noStroke();
triangle(251, 349, 284, 338, 278, 360);
//glasses
stroke(0, 0, 255, 230);
strokeWeight(10);
line(307, 326, 293, 387);
stroke(0, 0, 255, 200);
strokeWeight(5);
line(117, 316, 302, 348);
//ear
fill(128, 128, 255, 230);
noStroke();
triangle(120, 321, 148, 314, 136, 370);
//Arm
stroke(255, 0, 0, 255);
strokeWeight(45);
line(371, 605, 429, 509);
fill(255,0,0,255);
noStroke();
translate(8,0);
triangle(426, 544, 405, 600, 374, 600);
//
push(); //square
translate(442, 347);
rotate(radians(frameCount));
fill(255, 0, 0, 200);
noStroke();
rect(0, 0, 50, 50);
pop();
push(); //triangle
translate(483, 378);
rotate(radians( -(frameCount * 1.5)));
fill(0, 0, 255, 200);
noStroke();
triangle(0, 0, 53, 17, 31, 53);
pop();
push(); //ellipse
translate(533, 360);
rotate(radians(frameCount * 1.2));
fill(0, 255, 0, 200);
noStroke();
ellipse(0, 0, 43, 83);
pop();
fill(0, 128, 255, 80); //glow
noStroke();
ellipse(483, 378, 250, 250);
//
push();
translate(-3, 0); //translate whole hand
push(); //palm
fill(255,0,0,255);
noStroke();
rotate(radians(-16.22));
translate(-150, 100)
rect(404, 479, 91, 60);
pop();
stroke(255, 0, 0, 255); //thumb
strokeWeight(25);
line(466, 491, 504, 441);
stroke(255, 0, 0, 255); //index
strokeWeight(25);
line(478, 509, 545, 496);
fill(255,0,0,255);
noStroke();
translate(8,0);
triangle(489, 485, 478, 509, 545, 498);
stroke(255, 0, 0, 255);
strokeWeight(20);
line(545, 495, 562, 460);
stroke(255, 0, 0, 255);
strokeWeight(20);
line(562, 460, 571, 429);
stroke(255, 0, 0, 100); //middle
strokeWeight(20);
line(488, 496, 533, 480);
stroke(255, 0, 0, 100);
strokeWeight(20);
line(533, 480, 555, 462);
stroke(255, 0, 0, 100);
strokeWeight(20);
line(555, 462, 548, 430);
stroke(255, 0, 0, 100);
strokeWeight(20);
line(538, 476, 536, 452);
pop();
}
jamieh-Project-01-Face
function setup() {
x = 500;
y = 350;
//Distance from centre
dist = 31
createCanvas(x, y);
background(235, 252, 255);
//Hair
//Back (dark)
fill(0, 0, 0);
rect(168.5, 179, 159, 300);
//Shirt
noStroke();
fill(255, 210, 227);
quad(145, 290, 355, 290, 365, y, 135, y);
//Neck
noStroke();
fill(245, 230, 203);
rect(x/2-20, 260, 40, 30);
quad(230, 260, 270, 260, 252, 280, 248, 280);
//Face shape
noStroke();
fill(255, 244, 223);
ellipse(x/2, y/2, 140, 180)
//Hair
//Side
c = 12
d = 125
fill(51, 25, 0);
quad(200-c, 120, 210-c, 120, 190-c, 300, 185-c, 175);
quad(188+d, 118, 200+d, 165, 190+d, 300, 185+d, 165)
stroke(51, 25, 0);
strokeWeight(10);
line(306, 120, 315, 170);
//Mouth
noStroke();
fill(256, 256, 256);
ellipse(x/2, y/2+40, 75, 50);
fill(255, 244, 223);
ellipse(x/2, y/2+15, 120, 70);
//Lip colour
noFill();
stroke(255, 219, 228);
strokeWeight(2);
arc(x/2, y/2+42, 75, 45, 0, PI);
//Cheeks
stroke(252, 229, 238);
strokeWeight(2);
line(x/2-45, y/2+6, x/2-52, y/2+10);
line(x/2-37, y/2+6, x/2-44, y/2+10);
line(x/2-29, y/2+6, x/2-36, y/2+10);
line(x/2+47, y/2+6, x/2+40, y/2+10);
line(x/2+39, y/2+6, x/2+32, y/2+10);
line(x/2+31, y/2+6, x/2+24, y/2+10);
//Eyebrows
fill(0, 0, 0)
stroke(0, 0, 0);
strokeWeight(1.5);
arc(x/2-dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
arc(x/2+dist, y/2-7, 50, 50, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
noStroke();
fill(255, 244, 223);
rect(x/2-dist-18.5, y/2-29, dist*3.2, 12)
//Eye
noStroke();
fill(256, 256, 256);
ellipse(x/2-dist, y/2-10, 27, 25);
ellipse(x/2+dist, y/2-10, 27, 25);
//Eyeball
//Outer
noStroke();
fill(153, 90, 0);
ellipse(x/2-dist, y/2-10, 17, 17);
ellipse(x/2+dist, y/2-10, 17, 17);
//Middle
noStroke();
fill(102, 51, 0);
ellipse(x/2-dist, y/2-10, 11, 11);
ellipse(x/2+dist, y/2-10, 11, 11);
//Inner
noStroke();
fill(51, 25, 0);
ellipse(x/2-dist, y/2-10, 9, 9);
ellipse(x/2+dist, y/2-10, 9, 9);
//Inner
noStroke();
fill(256, 256, 256);
ellipse(x/2-dist-4, y/2-10-4, 4, 4);
ellipse(x/2+dist-4, y/2-10-4, 4, 4);
//Smile Eyes
fill(255, 244, 223);
ellipse(x/2-dist, y/2+0.5, 30, 10);
ellipse(x/2+dist, y/2+0.5, 30, 10);
//Eyelash
noFill();
stroke(0, 0, 0);
strokeWeight(0.75);
arc(x/2-dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
arc(x/2+dist, y/2-10, 25, 25, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
noFill();
stroke(0, 0, 0);
strokeWeight(0.5);
arc(x/2-dist-6, y/2-25, 8, 8, HALF_PI, PI);
arc(x/2-dist-4, y/2-24, 5, 5, HALF_PI, PI);
arc(x/2+dist+6, y/2-25, 8, 8, 0, HALF_PI);
arc(x/2+dist+4, y/2-24, 5, 5, 0, HALF_PI);
//Nose
stroke(252, 234, 208);
strokeWeight(3);
line(x/2, y/2-3, x/2+4, y/2+25);
strokeWeight(1.5);
line(x/2+4, y/2+25, x/2-3, y/2+29);
//Nose shadow
stroke(255, 238, 215);
strokeWeight(4);
line(x/2+4, y/2-3, x/2+8, y/2+25);
strokeWeight(2);
line(x/2+8, y/2+25, x/2, y/2+29);
//Nostril
strokeWeight(3);
line(x/2-8, y/2+24, x/2-11, y/2+28);
line(x/2-8, y/2+24, x/2-11, y/2+28);
//Hair
noStroke();
fill(51, 25, 0);
//Sides
quad(217, 110, 290, 144, 311, 185, 311, 121);
quad(195, 112, 217, 110, 192, 160, 180, 186);
//fill(256, 256, 256);
//Fringe
quad(186, 122, 210, 96, 240, 85, 282, 94);
quad(282, 94, 310, 115, 290, 144, 210, 105);
//Top
noFill();
stroke(51, 25, 0);
strokeWeight(14);
arc(249, 167, 138, 160, PI, 0)
//front hair
stroke(51, 25, 0);
strokeWeight(20);
bezier(225, 92, 385, 70, 297, 330, 330, 340);
bezier(215, 100, 135, 240, 210, 350, 170, 345);
strokeWeight(5);
bezier(211.5, 105, 160, 240, 215, 350, 178, 348);
bezier(190, 120, 135, 240, 200, 340, 165, 345);
bezier(215, 100, 372, 120, 290, 350, 330, 345);
bezier(225, 92, 395, 65, 297, 340, 330, 335);
}
function draw() {
}
Looking back at my code, I only used a few geometries throughout the entire process, yet I was able to make a self-portrait. The
hardest part of the process was pinpointing the coordinates for the shapes, which got harder especially with quad that required 8 blanks to be filled and arc that required the radians.
Project1_nayeon
function setup() {
createCanvas(300, 300);
background(200, 200, 200);
fill(200, 20, 78);
noStroke();
ellipse(150, 150, 100, 70);
}
function draw() {
}
michelle-face.js
function setup() {
createCanvas(400, 500);
background(220,168,74);
fill(249,221,189);
noStroke();
ellipse(200,180,200,230)
fill(249,221,189);
ellipse(200,260,130,85)
fill(245,190,164);
ellipse(250,230,50,45)
fill(245,190,164);
ellipse(150, 230,50,45);
fill(245,190,164);
ellipse(200,230,40,65);
fill(120,65,24);
ellipse(200,100, 200,120);
fill(120,65,24);
ellipse(115,145,50,140);
fill(249,221,189);
ellipse(195,220,40,65);
fill(0);
ellipse(250,230,20,10);
fill(245,190,164);
ellipse(250,225,20,10);
fill(0);
ellipse(150,230,20,10);
fill(245,190,164);
ellipse(150,225,20,10);
fill(216,126,91);
ellipse(200,450,140,250);
fill(120,64,24);
ellipse(180, 150, 100, 30);
fill(120,64,24);
ellipse(160, 160, 100, 30);
fill(120,64,24);
ellipse(130, 180, 70, 30);
fill(120,64,24);
ellipse(300, 145, 40, 120);
fill(249, 221, 189);
rect(182, 280, 35, 60);
fill(0);
ellipse(200, 285, 20, 10);
fill (249,221,189);
ellipse(105, 220, 30, 50);
fill(249,221,189);
ellipse(300, 220, 30, 50);
fill(161,126,81);
rect(0, 430, 400, 80);
fill(255);
quad(170, 350, 230, 350, 150, 370, 250, 370);
}
I decided to experiment a lot with creating shapes through layering. For example, I made the curve of the nose by layering an ellipse the color of my skin tone, mostly covering a pink ellipse of the same size. It was challenging to make shapes that required more values, such as the quad. But I like that I was able to use it to make the design on the shirt. I feel a lot more comfortable with basic programming of shapes after this project.
jiaxinw-Project-01
function setup() {
createCanvas(600, 600);
noCursor();
}
function draw() {
background(254,207,67);
noStroke();
//shadow
fill(219, 179, 58)
quad(width/2+40, height/3-115, width, height/2, width, height, width/2, height, )
//shirt
fill(243);
quad(width/2-130, height/2+30, width/2, height/2+10,
width/2, height/2+400, width/2-180, height/2+400);
fill(220, 221, 223);
quad(width/2+130, height/2+30, width/2, height/2+10,
width/2, height/2+400, width/2+180, height/2+400);
//neck
fill(243, 210, 165);
rect(width/2-30, height/2-20, 60, 30);
arc(width/2, height/2+10, 60, 40, 0, PI);
//hair
fill(11);
ellipse(width/2, height/3-25, 175, 200)
quad(width/2+30, height/2-20, width/2+70, height/2-60, width/2+30, height/2+80)
//face
fill(254, 226, 205);
ellipse(width/2, height/3, 160, 200);
//ears
ellipse(width/2-75, height/3, 50, 60);
ellipse(width/2+75, height/3, 50, 60);
//earrings
push();
translate(width/2-80, height/3+20)
rotate(45);
fill(0);
rect(0, 0, 10, 10);
pop();
push();
translate(width/2+80, height/3+20)
rotate(315);
fill(0);
rect(0, 0, 10, 10);
pop();
//eyes
fill(11);
ellipse(width/2-35, height/3-15, 20);
ellipse(width/2+35, height/3-15, 20);
//glass
noFill();
strokeWeight(3);
stroke(126, 112, 71);
ellipse((width/2)-35,(height/3)-10, 55, 50);
ellipse((width/2)+35,(height/3)-10, 55, 50);
line((width/2)-6,(height/3)-15,(width/2)+6, (height/3)-15);
line((width/2)-62,(height/3)-15,(width/2)-85, (height/3)-30);
line((width/2)+62,(height/3)-15,(width/2)+85, (height/3)-30);
//mouth
noStroke();
fill(241, 84, 75);
arc(width/2, height/3+55, 50, 50, 0, PI);
//nouse
fill(226, 54, 52);
ellipse(mouseX, mouseY, 30, 30);
}
Before I started to code, I drew a sketch to have a concrete idea of how the portrait looks like. After that, I broke down the whole picture into different simple shapes and measured the position of them. Instead of using all numbers, I used the half or 1/3 of the width and height as the unit of coordinate. For making the portrait more interesting, I had an idea of making my nose as a clown’s nose and letting it become interactive. Therefore, I made the mouse as a red nose and remove the original mouse on my portrait so that people can try to put my red nose in the right place. : )
test post bhyun1
Hello.
Project 01 – Yugyeong Lee
//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(400, 425);
background(0, 69, 124);
noStroke();
fill(0, 138, 187);
quad(0, 0, width, 0, width, 150, 0, 165);
}
function draw() {
noStroke();
//hair
fill(20);
beginShape();
vertex(118, 103);
vertex(121, 114);
vertex(112, 121);
vertex(88, 167);
vertex(88, 240);
vertex(78, 288);
vertex(90, 348);
vertex(80, 408);
vertex(108, 415);
vertex(127, 327);
vertex(172, 271);
vertex(164, 240);
vertex(218, 214);
vertex(220, 263);
vertex(210, 281);
vertex(210, 338);
vertex(242, 350);
vertex(265, 328);
vertex(242, 165);
vertex(210, 121);
vertex(165, 98);
vertex(135, 98);
vertex(118, 103);
endShape();
//neck
fill(211, 173, 138);
beginShape();
vertex(127, 327);
vertex(151, 286);
vertex(172, 271);
vertex(164, 240);
vertex(218, 214);
vertex(220, 263);
vertex(210, 281);
vertex(210, 338);
vertex(180, 305);
vertex(144, 314);
vertex(127, 327);
endShape();
//face
fill(232, 189, 151);
push();
translate(width/2, height/2);
angleMode(DEGREES);
rotate(-25);
ellipse(-8, 15, 50, 40);
rotate(-5);
ellipse(-8, -42, 106, 145);
ellipse(-62, -35, 15, 30);
pop();
//hair
fill(20);
triangle(98, 224, 122, 114, 122, 168);
quad(160, 111, 185, 117, 217, 147, 194, 135);
//brows
fill(50);
beginShape();
vertex(130, 183);
vertex(134, 176);
vertex(152, 165);
vertex(154, 167);
vertex(136, 178);
vertex(130, 183);
endShape();
beginShape();
vertex(176, 153);
vertex(192, 143);
vertex(202, 143);
vertex(194, 145);
vertex(178, 155);
vertex(176, 153);
endShape();
//mouth
stroke(60)
line(180, 226, 197, 218);
line(197, 218, 211, 207);
line(188, 217, 194, 215);
line(194, 215, 199, 211);
line(192, 226, 200, 223);
line(200, 223, 205, 219);
}
I first worked in Photoshop to simplify a picture of myself into combination of simple geometries. After planning which geometries to use, I took the coordinates from Photoshop and applied them to appropriate code. I used beginShape() and endShape() to insert all the coordinates in more complex shapes while using rotated ellipse, triangle, quad, and lines for simple shapes.