![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2020/08/stop-banner.png)
//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//project1
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
fill(86, 63,2);
noStroke();
arc(200, 200, 200, 275, PI, 0, CHORD);
arc(100, 200, 100, 150, 0, PI, CHORD);
arc(300, 200, 100, 150, 0, PI, CHORD);
fill(220)
noStroke();
arc(75, 200, 50, 50, 0, PI, CHORD);
arc(325, 200, 50, 50, 0,PI, CHORD);
fill(227, 202, 175);
noStroke();
ellipse(200, 200, 150, 190);
noFill();
strokeWeight(10);
stroke(78, 51, 22);
curve(135, 180, 155, 155, 175, 155, 195, 180);
curve(200, 180, 220, 155, 240, 155, 260, 180);
strokeWeight(5);
line(145, 170, 180, 180);
line(180, 180, 145, 190);
line(215, 180, 250, 170);
line(215, 180, 250, 190);
fill(83,70,249);
noStroke();
triangle(197, 190, 180, 220, 215, 220);
fill(255,144,144);
noStroke();
arc(197, 235, 60, 70, 0, PI, CHORD);
fill(235, 233, 233);
noStroke();
rect(185, 235, 10, 10);
rect(200, 235, 10, 10);
}
Category: Project Week 1
TamiTedesco-Project-01-Face
Eyyy so this is my self-portrait:
function setup() {
createCanvas(500, 500);
background('#B7DAF4');
}
function draw() {
//head
fill('#FFDFC8');
noStroke();
ellipse(250, 200, 180, 200);
//ears
fill('#FFDFC8');
noStroke();
ellipse(165, 230, 40, 50);
fill('#FFDFC8');
noStroke();
ellipse(335, 230, 40, 50);
//hair
fill('#8a1B00')
triangle(160, 170, 160, 210, 225, 170);
triangle(225, 170, 342, 170, 342, 210);
//hat
fill('#000a5F');
rect(120, 150, 220, 20);
fill('#000a5f');
noStroke();
arc(250, 170, 184, 170, PI, 0, CHORD);
//face
//L
fill(51);
ellipse(210, 210, 10, 25);
//R
fill(51);
ellipse(290, 210, 10, 25);
//mouth
fill('#FF556E');
triangle(230, 240, 250, 270, 270, 240);
//body
fill('#FFDFC8');
rect(235, 295, 30, 20);
//shirt
fill('#000000');
rect(195, 315, 110, 300);
//sleeves
//L
triangle(175, 330, 195, 315, 195, 330);
rect(175, 330, 20, 65);
//R
triangle(305, 330, 305, 315, 325, 330);
rect(305, 330, 20, 65);
//arms
fill('#FFDFC8');
rect(178, 395, 18, 105);
rect(303, 395, 18, 105);
}
I decided to make the design as simple as possible to mitigate any weirdness I’d have to deal with, though I didn’t do an actual sketch beforehand. I kind of just made a mental image and then eyeballed where all the shapes should go. I’ve never coded anything before this class, so for a first try at making something nice I think this came out pretty ok!
xiangqil-Project-01-Face
sketchThis what I look like before I got the haircut, with signature round face and round eyes. I still found some problems to create suitable round-corner rectangular.
/*Liu Xiangqi Section A xiangqil@andrew.cmu.edu Assignment-01*/
function setup() {
createCanvas(300, 300);
}
function draw() {
fill(246,229,200);
noStroke();
ellipse(150,150,200,200);
fill(246,229,200);
ellipse(50,150,50,75);
fill(246,229,200);
ellipse(250,150,50,75);
fill(0,0,0);
ellipse(100,150,25,25);
fill(0,0,0);
ellipse(200,150,25,25);
noFill();
stroke(251,112,64);
strokeWeight(8);
curve(100,180,140,200,160,200,200,180);
fill(0,0,0);
noStroke();
rect(50,50,200,80,80,80,0,0);
fill(0,0,0);
ellipse(150,40,50,50);
fill(246,229,200);
triangle(80,130,150,90,220,130);
}
Yugyeong Lee Project-01
//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(600, 600);
}
function draw() {
background(255);
strokeWeight(8);
stroke(248, 153, 170);
fill(254, 192, 203);
ellipse(300, 300, 500, 500);
//Hair
fill(128, 24, 80);
noStroke();
ellipse(300, 255, 225, 290);
rect(187.5, 265, 225, 140);
//Face
fill(206, 163, 121);
noStroke();
ellipse(300, 250, 175, 215);
ellipse(300, 257, 150, 215);
//Brows
fill(90, 55, 42);
quad(317, 225, 358, 225, 370, 230, 317, 230);
quad(283, 225, 242, 225, 230, 230, 283, 230);
//Eyes
fill(255);
stroke(0);
strokeWeight(2);
arc(340, 255, 35, 18, PI, TWO_PI);
arc(260, 255, 35, 18, PI, TWO_PI);
noStroke();
ellipse(260, 255, 35, 12);
ellipse(340, 255, 35, 12);
fill(0);
ellipse(340, 253, 16, 16);
ellipse(260, 253, 16, 16);
fill(255);
ellipse(340, 253, 3, 3);
ellipse(260, 253, 3, 3);
//Glasses
stroke(0);
strokeWeight(8);
noFill();
rect(315, 240, 60, 40, 5, 2, 5, 13);
rect(225, 240, 60, 40, 5, 5, 13, 2);
line(285, 250, 315, 250);
line(225, 250, 214, 250);
line(375, 250, 386, 250);
//Mouth
stroke(196, 48, 36)
strokeWeight(3);
line(300, 330, 325, 320);
line(300, 330, 275, 320);
//Nose
stroke(0);
strokeWeight(3);
arc(300, 295, 20, 12, TWO_PI, PI);
//Hair
push();
translate(347,240);
rotate(40);
fill(128, 24, 80);
noStroke();
ellipse(-44,43,40,140);
pop();
push();
translate(347,240);
rotate(40);
fill(128, 24, 80);
noStroke();
ellipse(30,115,140,40);
pop();
}
In project I, I created a portrait of myself using basic shapes such as ellipse, rectangle, arc, etc. The challenging part of this project was to figure out the coordinate along the way requiring constant editing and refreshing.
ShanWang-Project-01
In this exercise I used different gradients of color to create the division and collage of space and objects.sketch
//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-01
function setup() {
createCanvas(400, 600);
background(235);
}
function draw() {
strokeWeight(5);
fill(120);
line(80,0,80,600);
strokeWeight(2);
fill(150);
line(70,0,70,600);
strokeWeight(1);
fill(150);
line(70,0,70,600);
noStroke();
fill(210);
ellipse(120, 130, 400, 400);
strokeWeight(5);
fill(200);
ellipse(180,300,200,200);
noStroke();
fill(170);
quad(150,100,280,100,320,130,100,130);
noStroke();
fill(150);
arc(215,130,115,115,TWO_PI, PI);
noStroke();
fill(130);
arc(215,130,95,95,TWO_PI, PI);
noStroke();
fill(110);
arc(215,130,65,65,TWO_PI, PI);
noStroke();
fill(80);
quad(350,450,400,450,400,470,350,470);
noStroke();
fill(90);
quad(300,500,400,500,400,510,300,510);
noStroke();
fill(30);
quad(250,475,400,475,400,479,250,479);
noStroke();
fill(120);
quad(370,480,400,480,400,490,370,490);
}
Denise Jiang – Self Portrait
function setup() {
createCanvas(600, 600);
text("p5.js vers 0.5.2 test.", 10, 15);
}
function draw() {
background(223,232,240);
//right face
fill(240,223,230);
noStroke();
rect(288,0,310,286);
rect(287,385,313,215);
quad(288,284,600,287,600,336,354,336);
quad(354,336,600,336,600,536,286,385);
//brow
noStroke();
fill(96,57,19);
rect(45,169,180,22);
quad(342,177,349,197,479,150,473,129);
quad(470,129,479,150,563,152,583,132);
//right eye
noStroke();
fill(54,54,54);
rect(373,259,171,25);
//line
stroke(96,57,19);
strokeWeight(0.5);
line(287,0,287,287);
line(288,287,354,335);
line(354,335,287,385);
line(287,385,287,599);
//left eye
stroke(96,57,19);
strokeWeight(5);
noFill();
ellipse(135,280,161,88);
strokeWeight(1);
line(69,236,80,249);
line(105,216,109,239);
line(158,222,148,238);
line(205,231,190,249);
//eyeball
fill(54,54,54);
noStroke();
ellipse(135,280,28,82);
//mouth
noFill();
stroke(54,54,54);
strokeWeight(10);
rect(76,418,425,110);
strokeWeight(5);
line(82,460,494,460);
line(82,486,494,486);
fill(242,109,125);
noStroke();
rect(81,462,416,23);
}
Hannah K-Project-01
function setup() {
createCanvas(400, 400);
background(255,181,197);
}
function draw() {
// Top part of hair - Arc
fill(51,25,0);
arc(200,125,200,200,PI,TWO_PI);
// Main part of hair - Rectangle
fill(51,25,0);
rect(100,125,200,158);
// Face - Ellipse
fill(225,220,178);
ellipse(200,155,150,185);
// Nose - Triangle
fill(225,200,100);
triangle(190,170,210,170,200,150);
// Top of body - Triangle
noStroke();
fill(0,205,205);
triangle(150,416,198,282,246,416);
// Eye 1 - Circle
fill(0,0,0);
ellipse(165,125,25,25);
// Pupil 1 - Circle
fill(255,255,255);
ellipse(165,130,8,8);
// Eye 2 - Circle
fill(0,0,0);
ellipse(235,125,25,25);
// Pupil 2 - Circle
fill(255,255,255);
ellipse(235,130,8,8);
// Mouth - Arc
fill(255,250,205);
arc(200,190,80,80,0,PI);
// Eyebrow 1 - Rectangle
fill(51,25,0);
rect(155,100,18,4);
// Eyebrow 2 - Rectangle
fill(51,25,0);
rect(225,100,18,4);
}
As many people have mentioned, one of the most difficult and time consuming parts of this process was figuring out the coordinates. While I did attempt to take notes as I created my portrait, ultimately, I did a lot of guessing and checking. Overall, I enjoyed the process and look forward to becoming better at coding more efficiently. This was one of the first times I’ve ever used code to create something remotely artistic, so this was really exciting!
Christine Kim – Portrait – 01
//Christine Kim
//Section A (Tuesdays 9:00)
//haewannk@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(600,600);
background(165,205,236);
}
function draw() {
noStroke();
fill(255,205,140);
ellipse(300,300,200,200);
fill(66,31,21);
ellipse(270,300,20,20);
ellipse(330,300,20,20);
stroke(66,31,21);
strokeWeight(3);
line(255,278,280,278);
line(317,278,342,278);
line(300,300,300,330);
stroke(288,31,76)
line(300,370,337,355);
line(263,355,300,370);
stroke(199,123,165);
line(245,330,260,330);
line(340,330,355,330);
noStroke();
push();
translate(347,240);
rotate(40);
fill(142,32,21)
ellipse(0,0,50,128);
pop();
push();
translate(255,240);
rotate(70);
fill(142,32,21);
ellipse(0,0,50,128);
pop();
push();
translate(203,320);
rotate(60);
fill(142,32,21);
ellipse(0,0,50,128);
pop();
push();
translate(208,400);
rotate(50);
fill(142,32,21);
ellipse(0,0,65,170);
pop();
push();
translate(395,315);
rotate(116);
fill(142,31,21);
ellipse(0,0,50,128);
pop();
push();
translate(377,400);
rotate(123);
fill(142,32,21);
ellipse(0,0,65,170);
pop();
}
Owen Fox Project-01
function setup() {
createCanvas(600, 600);
background(255);
}
function draw() {
noStroke();
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(50,50,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(450,50,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(250,50,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(50,250,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(250,250,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(450,250,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(50,450,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(250,450,100,100);
fill(r = random(0,255), g = random (0,255), b = random (0,255));
rect(450,450,100,100);
noLoop();
}
function mousePressed() {
loop();
}
function mouseReleased() {
noLoop();
}
this is more abstract than I want it to be, but it took me like 5 hours to figure out how to do this. I was trying to use variables, but I couldn’t get them to work, so I made this instead.
Alison Hoffman Project-01
//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(600, 600);
background(0,204,204);
}
function draw() {
noStroke();
//background hair
fill(202,179,62);
ellipse(width/2,height/2+100,400,630);
//face base
fill(255,218,185);//neck
rect(width/2 - 80, height/2 +100,160,340);
fill(75,75,75);
ellipse(width/2,height/2+10,290,375); //shadow
fill(255,218,185);//face
ellipse(width/2,height/2,300,380);
//shoulders
fill(255,218,185);
ellipse(width/2,height/2+306,434,180);
//shirt
fill(153,0,0);
rect(168,588,257,40);
stroke(153,0,0);
strokeWeight(18);
strokeCap(SQUARE);
line(168,532,168,600); //left strap
line(430,532,430,600);
//face
//eyes
fill(0);
noStroke();
ellipse(width/2 - 55,height/2 - 25,44,26);
ellipse(width/2 + 55,height/2 - 25,44,26);
fill(255);
noStroke();
ellipse(width/2 - 55,height/2 -20,40,28);//left
ellipse(width/2 + 55,height/2 -20,40,28);//right
fill(0,140,180);//iris
ellipse(width/2 - 55,height/2 -18,20);//left
ellipse(width/2 + 55,height/2 -18,20);//right
fill(0);//pupils
ellipse(width/2 - 55,height/2 -18,12);//left
ellipse(width/2 + 55,height/2 -18,12);//right
//nose
stroke(223,184,150);
strokeWeight(4);
line(width/2,height/2 - 2,width/2 + 9,height/2 +66);
line(width/2 - 14,height/2 + 66,width/2 + 11,height/2 +66);
//mouth
fill(219,111,111);
noStroke();
triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+24,height/2+106);
triangle(width/2+8,height/2+120,width/2+20,height/2+120,width/2+40,height/2+90);
fill(239,133,133);
triangle(width/2-42,height/2 + 120,width/2+20,height/2+120,width/2+20,height/2+122);
triangle(width/2+16,height/2+122,width/2+22,height/2+122,width/2+40,height/2+90);
//bangs
fill(202,179,62);
ellipse(width/2,height/2 -156,200,70);
triangle(width/2 -174,height/2-10,width/2+25,height/2-122,width/2-30,height/2-155);
triangle(width/2 -174,height/2-10,width/2-110,height/2-150,width/2-20,height/2-155);
triangle(width/2 +174,height/2-25,width/2+25,height/2-122,width/2+110,height/2-161);
noLoop();
}