![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
I took my original self portrait and modified it to be variable, as that’s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You may also notice some weird little ditties in the code, as well as the fact that the eyes follow your mouse. Those are the animations I thought we were supposed to do (again, my bad for misinterpreting!) that are now just fun little easter eggs to play with!
sketch
let leftbrowx = 210; //x coordinate of the original vertex of the left brow
let browY = 185; //y coordinate of both brows
let rightbrowx = 273; //x coordinate of the original vertex of the right brow
haircenterX = 225; //x coordinate of the point around which hair rotates and from which it originates
haircenterY = 170; //y coordinate of the point around which hair rotates and from which it originates
let lefteyex = 262; //x coordinate of the center of the left eye
let righteyex = lefteyex-40; //x coordinate of the center of the right eye
let eyey = 198; //y coordinate of the center of both eyes
let mouthY = 225; //y coordinate of the vertices of the mouth
let eyeRed = 33; //Red tint of the iris
let eyeGreen = 6; //Green tint of the iris
let eyeBlue = 4; //Blue tint of the iris
let hairRed = 40; //Red tint of the hair
let hairBlue = 26; //Green tint of the hair
let hairGreen = 34; //Blue tint of the hair
let skinRed = 255; //Red tint of the skin
let skinGreen = 233; //Green tint of the skin
let skinBlue = 199; //Blue tint of the skin
let hairLen = 50; //Length of hair in the back of the head
performingAnim = false; //determines whether or not an animation is occurring, and retains the face until the animation has stopped and the face returns to default (not default color, as in expression)
function setup() {
createCanvas(500, 500);
background(255,138,120);
}
function draw() {
background(255,138,120);
//behind head hair
noStroke();
fill(hairRed, hairGreen, hairBlue);
beginShape();
vertex(haircenterX,haircenterY);
curveVertex(haircenterX,haircenterY);
curveVertex(haircenterX-20,haircenterY+hairLen/2)
vertex(haircenterX-10-10,haircenterY+40+(hairLen-30));
vertex(haircenterX-5-10,haircenterY+53+(hairLen-30));
vertex(haircenterX+1+10,haircenterY+60+(hairLen-30)+10);
vertex(haircenterX+4+10,haircenterY+60+(hairLen-30)+10);
vertex(haircenterX+45+15,haircenterY+62+(hairLen-20));
vertex(haircenterX+55+15,haircenterY+55+(hairLen-20));
vertex(haircenterX+63+15,haircenterY+50+(hairLen-20));
vertex(haircenterX+45+35.5,haircenterY+40+(hairLen-20));
curveVertex(haircenterX+75,haircenterY+hairLen/2);
curveVertex(haircenterX+40,haircenterY);
curveVertex(haircenterX+20,haircenterY-10);
endShape();
stroke(hairRed+100, hairGreen+50, hairBlue+50);
strokeWeight(1)
arc(haircenterX-10,haircenterY+40+(hairLen-30),30,hairLen,8.5,4.5); //15
arc(haircenterX+63,haircenterY+50+(hairLen-30),40,hairLen+10,6,8,OPEN); //20
arc(haircenterX+45,haircenterY+40+(hairLen-30),75,hairLen+10,5.7,6.6,OPEN); //37.5
arc(haircenterX+55,haircenterY+55+(hairLen-30),40,hairLen+10,6.1,8,OPEN); //20
arc(haircenterX+45,haircenterY+62+(hairLen-30),40,hairLen+10,6.2,8,OPEN); //20
arc(haircenterX-5,haircenterY+53+(hairLen-30),30,hairLen,7.6,3.7); //15
arc(haircenterX+1,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
arc(haircenterX+4,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
push();
rotate(0.1);
arc(haircenterX+40,haircenterY+40+(hairLen-30),30,hairLen,7.6,3);
pop();
//cranium and fillings
angleMode(RADIANS);
fill(skinRed,skinGreen,skinBlue);
noStroke();
ellipse(246.8,500/2.195-12,71.5,55.8);
stroke(0);
arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
noStroke();
ellipse(221,500/2.45,20,30);
ellipse(282,500/2-42,10,10);
stroke(0);
noStroke();
fill(222, 0, 111);
ellipse(262,270,100,20);
triangle(160,500,260,260,388,500);
stroke(0);
arc(262,270,100,20,3.2,6.2);
//neck
noStroke();
fill(skinRed,skinGreen,skinBlue);
beginShape();
curveVertex(240,245);
curveVertex(240,245);
curveVertex(239,258);
curveVertex(240,268);
curveVertex(285,266);
curveVertex(281,250);
curveVertex(280,223);
curveVertex(280,223);
endShape();
noFill();
stroke(0);
arc(230,245,20,50,5.5,8);
arc(290,225,20,80,7.8,10);
fill(skinRed,skinGreen,skinBlue);
//clothes (it's just a blanket)
fill(222, 0, 111);
beginShape();
vertex(240,258);
vertex(225,255);
vertex(205,257);
vertex(190,280);
vertex(180,350);
vertex(150,470);
vertex(162,500);
vertex(180,520);
endShape(OPEN);
beginShape();
vertex(200,400);
vertex(240,256);
vertex(250,268);
vertex(260,258);
vertex(300,255);
vertex(320,257);
vertex(350,285);
vertex(365,350);
vertex(400,440);
vertex(398,500);
vertex(360,530);
endShape(OPEN);
curve(245,264,240,268,197,270,200,220);
curve(245,264,240,268,183,340,200,220);
curve(220,390,208,420,160,460,130,420);
curve(260,265,255,268,335,270,330,220);
curve(260,265,255,268,365,350,330,220);
curve(220,370,200,400,365,440,330,220);
fill(skinRed,skinGreen,skinBlue);
beginShape();
vertex(239,255);
vertex(235,278);
vertex(275,256);
endShape(OPEN);
line(200,400,240,500);
//chin segments
fill(skinRed,skinGreen-50,skinBlue-20);
noStroke();
beginShape();
curveVertex(240,245);
curveVertex(240,245);
curveVertex(250,253);
curveVertex(260,249);
curveVertex(280,223);
curveVertex(280,223);
endShape(OPEN);
stroke(0);
fill(skinRed,skinGreen,skinBlue);
beginShape();
curveVertex(215,231);
curveVertex(215,231);
curveVertex(228,243);
curveVertex(250,244);
curveVertex(280,223);
curveVertex(280,223);
endShape(OPEN);
push();
translate(215, 216.43);
rotate(-0.2);
arc(3,0,15,42,8,4.45,OPEN);
pop();
//ear
push();
translate(284,500/2-32);
rotate(0.3);
arc(0,-5,13,26,4.1,8.1,OPEN);
arc(1,-5,7,15,8,4.6,OPEN);
pop();
arc(284.9,500/2-35,4,8,4,7,OPEN);
//left eye (of body)
noStroke();
fill(255);
ellipse(lefteyex,eyey+1,20,16);
fill(240);
arc(lefteyex,eyey-2,20,10,3.2,6.3);
fill(eyeRed,eyeGreen,eyeBlue);
noStroke();
if (mouseY > 208) {
irisY = eyey+2;
} else{
irisY = eyey;
}
if (mouseX > 255 & mouseX < 267) {
leftposX = mouseX
}
if (mouseX > 267){
leftposX = lefteyex+5
}
if (mouseX < 255) {
leftposX = lefteyex-5
}
ellipse(leftposX,irisY,10,14) //iris
fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
ellipse(leftposX,irisY+4,6,5); //under-pupil highlight
fill(0);
ellipse(leftposX,irisY,5,8); //pupil
fill(255);
ellipse(leftposX-2,irisY-2,3,6); //over pupil highlight
stroke(0);
noFill();
ellipse(leftposX,irisY,9,13);
arc(222,196,20,10,3.2,6.3)
//right eye (of body)
noStroke();
fill(255);
ellipse(righteyex,eyey+1,20,16);
fill(240);
arc(righteyex,eyey-2,20,10,3.2,6.3);
fill(eyeRed,eyeGreen,eyeBlue);
noStroke();
if (mouseX > 218 & mouseX < 230) {
rightposX = mouseX;
}
if (mouseX > 230){
rightposX = righteyex+6;
}
if (mouseX < 218) {
rightposX = righteyex-4;
}
ellipse(rightposX,irisY,10,14) //iris
fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
ellipse(rightposX,irisY+4,6,5); //under-pupil highlight
fill(0);
ellipse(rightposX,irisY,5,8); //pupil
fill(255);
ellipse(rightposX-2,irisY-2,3,6); //over-pupil highlight
stroke(0);
noFill();
ellipse(rightposX,irisY,9,13);
arc(262,196,20,10,3.2,6.3);
//mouth
stroke(0);
if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //frowning action
while(mouthY < 245){
mouthY = mouthY+1;
}
curve(228, mouthY, 233, 230, 240, 230, 245, mouthY);
performingAnim = true;
}
else {
curve(228, 225, 233, 230, 240, 230, 245, 225);
performingAnim = false;
}
if(mouseX > 230 & mouseX < 240 && mouseY > 220 && mouseY < 235 && mouseIsPressed === true){ //makes my mouth open and close randomly, for no good reason.
stroke(0);
fill(227, 85, 66);
ellipse(236.5, 230,10,8);
performingAnim = true;
}
//nose
fill(skinRed,skinGreen-50,skinBlue-20);
noStroke();
triangle(240,215,232,215,235,218);
stroke(0);
noFill();
arc(226,208,18,20,6.1,7.1);
arc(240,213,15,10,8.8,9.2);
//eyebrows
noStroke();
fill(hairRed, hairGreen, hairBlue);
if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //eyebrow furrowing action
while (leftbrowx < 215 && browY < 190 && rightbrowx > 268) {
leftbrowx = leftbrowx+1
rightbrowx = rightbrowx-1
browY = browY+1
push();
rotate(0.01);
beginShape();
curveVertex(leftbrowx,browY);
curveVertex(leftbrowx+7,browY-5);
curveVertex(leftbrowx+18,browY-1);
curveVertex(leftbrowx+25,browY-2);
curveVertex(leftbrowx+20,browY-8);
curveVertex(leftbrowx+7,browY-8);
endShape(CLOSE);
pop();
push();
rotate(-0.02);
beginShape();
curveVertex(rightbrowx,browY);
curveVertex(rightbrowx-7,browY-1);
curveVertex(rightbrowx-18,browY+3);
curveVertex(rightbrowx-25,browY+2);
curveVertex(rightbrowx-20,browY-4);
curveVertex(rightbrowx-7,browY-4);
endShape(CLOSE);
pop();
performingAnim = true;
}
if (leftbrowx >= 215 & browY >= 190 && rightbrowx <= 268){
push();
rotate(0.01);
beginShape();
curveVertex(leftbrowx-6,browY-5);
curveVertex(leftbrowx-0,browY-3);
curveVertex(leftbrowx+15,browY-0);
curveVertex(leftbrowx+22,browY-1);
curveVertex(leftbrowx+17,browY-6);
curveVertex(leftbrowx+4,browY-6);
endShape(CLOSE);
pop();
push();
rotate(-0.02);
beginShape();
curveVertex(rightbrowx-2,browY+2);
curveVertex(rightbrowx-8,browY+4);
curveVertex(rightbrowx-19,browY+7);
curveVertex(rightbrowx-26,browY+6);
curveVertex(rightbrowx-21,browY+1);
curveVertex(rightbrowx-8,browY+1);
endShape(CLOSE);
pop();
performingAnim = true;
}
} else {
let leftbrowx = 210;
let browY = 185;
let rightbrowx = 273;
beginShape();
curveVertex(leftbrowx,browY+3);
curveVertex(leftbrowx+7,browY+2);
curveVertex(leftbrowx+18,browY+4);
curveVertex(leftbrowx+25,browY+3);
curveVertex(leftbrowx+20,browY-1);
curveVertex(leftbrowx+7,browY-1);
endShape(CLOSE);
beginShape();
curveVertex(rightbrowx,browY+3);
curveVertex(rightbrowx-7,browY+2);
curveVertex(rightbrowx-18,browY+4);
curveVertex(rightbrowx-25,browY+3);
curveVertex(rightbrowx-20,browY-1);
curveVertex(rightbrowx-7,browY-1);
endShape(CLOSE);
performingAnim = false;
}
//hair
fill(hairRed, hairGreen, hairBlue);
beginShape();
vertex(200,175);
vertex(220,140);
vertex(228,127);
vertex(290,139);
vertex(295,160);
vertex(295,190);
vertex(285,190);
vertex(235,162);
vertex(225,170);
endShape();
stroke(hairRed+100, hairGreen+50, hairBlue+50);
strokeWeight(1)
arc(haircenterX-15,haircenterY+10,20,50,8,3.5);
noStroke();
rect(haircenterX-16,haircenterY+5,5,5);
stroke(hairRed+100, hairGreen+50, hairBlue+50);
beginShape();
curveVertex(haircenterX-20,haircenterY-2);
curveVertex(haircenterX-20,haircenterY-2);
curveVertex(haircenterX-28,haircenterY+2);
curveVertex(haircenterX-47,haircenterY-9);
curveVertex(haircenterX-28,haircenterY-7);
curveVertex(haircenterX-15,haircenterY-10);
curveVertex(haircenterX-15,haircenterY-10);
endShape();
beginShape();
curveVertex(haircenterX-8,haircenterY);
curveVertex(haircenterX-8,haircenterY);
curveVertex(haircenterX-12,haircenterY+8);
curveVertex(haircenterX-25,haircenterY+10);
curveVertex(haircenterX-40,haircenterY);
curveVertex(haircenterX-30,haircenterY+3);
curveVertex(haircenterX-20,haircenterY-2);
curveVertex(haircenterX-20,haircenterY-2);
endShape();
beginShape();
curveVertex(haircenterX+10,haircenterY-8);
curveVertex(haircenterX+10,haircenterY-8);
curveVertex(haircenterX-1,haircenterY+2);
curveVertex(haircenterX-5,haircenterY+8);
curveVertex(haircenterX-15,haircenterY+14);
curveVertex(haircenterX-27,haircenterY+15);
curveVertex(haircenterX-16,haircenterY+8);
curveVertex(haircenterX-8,haircenterY);
curveVertex(haircenterX-8,haircenterY);
endShape();
beginShape();
curveVertex(haircenterX-15,haircenterY-10);
curveVertex(haircenterX-15,haircenterY-10);
curveVertex(haircenterX-28,haircenterY-7);
curveVertex(haircenterX-50,haircenterY-12);
curveVertex(haircenterX-35,haircenterY-16);
curveVertex(haircenterX-15,haircenterY-35);
curveVertex(haircenterX,haircenterY-30);
curveVertex(haircenterX,haircenterY-30);
endShape();
beginShape();
curveVertex(haircenterX,haircenterY-30);
curveVertex(haircenterX,haircenterY-30);
curveVertex(haircenterX-15,haircenterY-35);
curveVertex(haircenterX-24,haircenterY-50);
curveVertex(haircenterX-15,haircenterY-40);
curveVertex(haircenterX,haircenterY-40);
curveVertex(haircenterX,haircenterY-40);
endShape();
arc(haircenterX+36,haircenterY+5,90,90,5.3,6.9,OPEN);
arc(haircenterX+28,haircenterY-5,90,90,4,5.8,OPEN);
beginShape();
curveVertex(haircenterX+55,haircenterY+28);
curveVertex(haircenterX+55,haircenterY+28);
curveVertex(haircenterX+64,haircenterY+33);
curveVertex(haircenterX+65,haircenterY+45);
curveVertex(haircenterX+72,haircenterY+35);
curveVertex(haircenterX+75,haircenterY+28);
curveVertex(haircenterX+75,haircenterY+28);
endShape();
//sideburn
push();
rotate(-0.2);
arc(haircenterX+10,haircenterY+88,10,30,8,5.5,CLOSE);
//sideswoop
pop();
push();
rotate(-1.4);
arc(haircenterX-365,haircenterY+145,15,30,7.8,4.8,CLOSE);
rotate(-0.1);
arc(haircenterX-390,haircenterY+130,15,30,7.8,4.8,CLOSE);
arc(haircenterX-385,haircenterY+125,15,30,7.8,4.8,CLOSE);
pop();
beginShape();
curveVertex(haircenterX+10,haircenterY-8);
curveVertex(haircenterX+10,haircenterY-8);
curveVertex(haircenterX+20,haircenterY-2);
curveVertex(haircenterX+28,haircenterY+6);
curveVertex(haircenterX+40,haircenterY+14);
curveVertex(haircenterX+65,haircenterY+25);
curveVertex(haircenterX+48,haircenterY+10);
curveVertex(haircenterX+40,haircenterY);
curveVertex(haircenterX+35,haircenterY-8);
curveVertex(haircenterX+35,haircenterY-8);
endShape();
}
function mousePressed() {
if (performingAnim === false) { //runs the code which changes all the variables
eyeBlue = random(0,100);
eyeRed = random(0,100);
eyeGreen = random(0,100);
hairRed = random(0,80);
hairGreen = random(0,80);
hairBlue = random(0,80);
skinBlue = random(155,215);
skinGreen = random(skinBlue,245);
skinRed = random(skinGreen,255);
hairLen = random(10,100);
} else { //prevents it from doing that while the mouse is pressed down over the two animation spots
eyeBlue = eyeBlue;
eyeRed = eyeRed;
eyeGreen = eyeGreen;
hairRed = hairRed;
hairGreen = hairGreen;
hairBlue = hairBlue;
skinBlue = skinBlue;
skinGreen = skinGreen;
skinRed = skinRed;
hairLen = hairLen;
}
}I misinterpreted the original directions of the project and instead of making the face change, I made it interactive. Because (in all honesty) I was too lazy and didn’t want all my hard work to go to waste, I just left it and incorporated it into the portrait.