![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
This is my self portrait
sketch
//Michael Li
//Section C
function setup() {
createCanvas(800, 750);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//Background If Condition
var buildingcolor = 150;//default buildin color light grey
var windowcolor = 70;//default window color dark grey
if (mouseY < height * 0.33) {
background(189, 184, 220);//purple
fill(25, 53, 79);
noStroke()
rect (0, height*0.66, width, height/3); //uses default building and window color
} else if (mouseY > height * 0.66) {
background (60, 73, 120) //dark blue
fill(25, 53, 79);
noStroke()
rect (0, height*0.66, width, height/3);
buildingcolor = 20 //changes building color to dark grey
windowcolor = 255 //change window color to white
} else {
background (58, 126, 146); //Light blue
fill(25, 53, 79);
noStroke()
rect (0, height*0.66, width, height/3);
buildingcolor = 120 //changes building color to grey
windowcolor = 150 //changes window color to light grey
//depends on mouse position on canvas, change background from early morning, mid day to night
}
// Building 1 in Background (right building)
fill(buildingcolor)
noStroke()
rect(520, height*0.33, 130, height/3);
fill(windowcolor)
//windows
var row1 = 530
var row2 = 570
var row3 = 610
rect(row1, (height*0.33)+10, 30, 20)
rect(row1, (height*0.33)+50, 30, 20)
rect(row1, (height*0.33)+90, 30, 20)
rect(row1, (height*0.33)+130, 30, 20)
rect(row1, (height*0.33)+170, 30, 20)
rect(row2, (height*0.33)+10, 30, 20)
rect(row2, (height*0.33)+50, 30, 20)
rect(row2, (height*0.33)+90, 30, 20)
rect(row2, (height*0.33)+130, 30, 20)
rect(row2, (height*0.33)+170, 30, 20)
rect(row3, (height*0.33)+10, 30, 20)
rect(row3, (height*0.33)+50, 30, 20)
rect(row3, (height*0.33)+90, 30, 20)
rect(row3, (height*0.33)+130, 30, 20)
rect(row3, (height*0.33)+170, 30, 20)
// Building 2 in Background (left taller building)
fill(buildingcolor)
noStroke()
rect(170, height*0.05, 170, height/1.64);
fill(windowcolor)
//windows
row1 = 180 //changes window row variable since second building
row2 = 220
row3 = 260
var row4 = 300
rect(row1, (height*0.33)-190, 30, 20)
rect(row1, (height*0.33)-150, 30, 20)
rect(row1, (height*0.33)-110, 30, 20)
rect(row1, (height*0.33)-70, 30, 20)
rect(row1, (height*0.33)-30, 30, 20)
rect(row1, (height*0.33)+10, 30, 20)
rect(row1, (height*0.33)+50, 30, 20)
rect(row1, (height*0.33)+90, 30, 20)
rect(row1, (height*0.33)+130, 30, 20)
rect(row2, (height*0.33)-190, 30, 20)
rect(row2, (height*0.33)-150, 30, 20)
rect(row2, (height*0.33)-110, 30, 20)
rect(row2, (height*0.33)-70, 30, 20)
rect(row2, (height*0.33)-30, 30, 20)
rect(row2, (height*0.33)+10, 30, 20)
rect(row2, (height*0.33)+50, 30, 20)
rect(row2, (height*0.33)+90, 30, 20)
rect(row2, (height*0.33)+130, 30, 20)
rect(row3, (height*0.33)-190, 30, 20)
rect(row3, (height*0.33)-150, 30, 20)
rect(row3, (height*0.33)-110, 30, 20)
rect(row3, (height*0.33)-70, 30, 20)
rect(row3, (height*0.33)-30, 30, 20)
rect(row3, (height*0.33)+10, 30, 20)
rect(row3, (height*0.33)+50, 30, 20)
rect(row3, (height*0.33)+90, 30, 20)
rect(row3, (height*0.33)+130, 30, 20)
rect(row4, (height*0.33)-190, 30, 20)
rect(row4, (height*0.33)-150, 30, 20)
rect(row4, (height*0.33)-110, 30, 20)
rect(row4, (height*0.33)-70, 30, 20)
rect(row4, (height*0.33)-30, 30, 20)
rect(row4, (height*0.33)+10, 30, 20)
rect(row4, (height*0.33)+50, 30, 20)
rect(row4, (height*0.33)+90, 30, 20)
rect(row4, (height*0.33)+130, 30, 20)
strokeWeight(0) //No stroke for the main portrait
//neck
fill(204, 172, 125);
rect(335, 300, 130, 140)
//head part 1 circle
fill(235, 209, 168); //skin color
ellipse(387, 200, 260, 236);
stroke(235, 209, 168)
//head part 2 chin
bezier(257, 200, 244, 453, 411, 398, 487, 269);
//Eyes whites
fill(255);
ellipse(286, 218, 36, 42)//left eye
fill(255);
ellipse(373, 218, 36, 42)//right eye
//eyes pupils
fill(70, 50, 21)
ellipse(294, 218, 20, 32);
fill(70, 50, 21)
ellipse(383, 218, 20, 32);
//Eyes Highlights
fill(255)
ellipse(297, 209, 3, 7);
fill(255)
ellipse(387, 209, 3, 7);
//nose
fill(204, 172, 125)
beginShape()
vertex(327, 225);
vertex(327, 286);
vertex(306, 284);
vertex(303, 276);
endShape(CLOSE);
//Hair
fill(50)
beginShape();
vertex(238, 218); //bottom left
vertex(238, 163);
vertex(233, 140);
vertex(288, 68);
vertex(349, 52);
vertex(400, 47);
vertex(469, 77);
vertex(515, 110);
vertex(537, 164);
vertex(524, 221);
vertex(521, 258);
vertex(493, 296);
vertex(498, 211);
vertex(480, 205);
vertex(473, 231);
vertex(462, 247);
vertex(462, 219);
vertex(455, 207);
vertex(441, 200);
vertex(421, 164);
vertex(394, 172);
vertex(356, 162);
vertex(319, 200);
vertex(298, 160);
vertex(291, 166);
vertex(280, 164);
endShape(CLOSE);
//Ears
fill(204, 172, 125);
bezier(478, 212, 515, 211, 515, 259, 464, 279);
fill(235, 209, 168);
bezier(478, 218, 497, 211, 497, 259, 464, 267);
//mouth
fill (0);
bezier(314, 324, 327, 333, 373, 330, 381, 315);
fill(255);
beginShape();
vertex(319, 323);
vertex(319, 325);
vertex(377, 318);
vertex(377, 315.5);
endShape(CLOSE);
//Arms
fill(235, 209, 168);
beginShape();
vertex(216, 659);
vertex(207, height)
vertex(125, height);
vertex(154, 650);
endShape(CLOSE);
beginShape();
vertex(623, 667);
vertex(643, height);
vertex(728, height);
vertex(695, 655);
endShape(CLOSE);
//Shirt
fill(230);
beginShape();
vertex(207, height);
vertex(235, 463);
vertex(318, 411);
vertex(358, 438);
vertex(471, 399);
vertex(567, 455);
vertex(615, height);
endShape(CLOSE);
//Sleeves
fill(180);
beginShape();
vertex(235, 463);
vertex(147, 520);
vertex(110, 641);
vertex(216, 659);
endShape(CLOSE);
beginShape();
vertex(567, 455);
vertex(674, 515);
vertex(703, 656);
vertex(588, 676);
endShape(CLOSE);
//Eye brows
fill(0);
bezier(270, 195, 273, 182, 303, 182, 308, 208);
bezier(357, 199, 362, 184, 391, 184, 401, 203);
//Glasses
noFill();
stroke(154, 136, 49);
strokeWeight(6);
ellipse(276, 225, 77, 59); //frame left
ellipse(392, 225, 92, 59); //frame right
beginShape(); //Glasses connecting the Framse
vertex (317, 220);
vertex(330, 218);
vertex (342, 220);
endShape();
stroke(49, 42, 19); //Glasses legs
line(436, 218, 480, 210);
}