![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information.
sketch
// Angela Yang
// Section C - Project 02
// Variables are set for each facial element.
var eyeSizeW = 100;
var eyeSizeH = 100;
var eyeSizeW2 = 70;
var eyeSizeH2 = 70;
var pupilSizeW = 50;
var pupilSizeH = 50;
var pupilSizeW2 = 30;
var pupilSizeH2 = 30;
var faceWidth = 200;
var faceHeight = 200;
var faceWidthB = 350;
var faceHeightB = 250;
var mouthType = 2;
var noseType = 1;
var r = 200;
var g = 100;
var b = 150;
var on = false;
function setup() {
createCanvas(640, 480);
}
function draw() {
if(on) {
background(243, 200, 174);
} else {
//background changes from yellowish-green to a pink tone with 30% transparency.
background(219, 226, 175, 30);
}
//LEFT FIGURE
//Body
fill(r, g, b);
stroke("white");
ellipse(width/4, height/2 + 200, width/1.5, height/1.5);
// Face base
noStroke();
fill(r, g, b);
ellipse(width / 4, height / 2, faceWidth, faceHeight);
// Eyes
stroke(r, g, 50);
strokeWeight(1);
fill(255);
var eyeLX = width / 4 - faceWidth * 0.25;
var eyeRX = width / 4 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
fill(r-100, g+50, b+50);
var pupilLX = width / 4 - faceWidth * 0.25;
var pupilRX = width / 4 + faceWidth * 0.25;
ellipse(pupilLX, height/2, pupilSizeW, pupilSizeH);
ellipse(pupilRX, height/2, pupilSizeW, pupilSizeH);
//Nose Variations
fill("white");
if (noseType >= 0 & noseType <= 1.5){
noStroke();
rect(width/4 - faceWidth*0.03, height/2 + faceHeight*0.1, 10, 20);
//When the value of nose type is >= to 0 and <= 1.5, a rectangular nose is drawn.
} else if(noseType > 1.5 & noseType <= 3){
noStroke();
ellipse(width/4, height/2 + faceHeight*0.1, faceWidth/5, faceHeight/10);
//When the value of nose type is greater than 1.5 and smaller+equal to 3,
//a circular nose is drawn.
} else if(noseType > 3 & noseType <= 4.5){
stroke("white");
strokeWeight(4);
line(width/4, height/2, width/4+15, height-230);
//When the value of nose type is greater then 3 and smaller+equal to 4.5,
//a linear nose is drawn.
} else{
noStroke();
triangle(width/4, height/2, width/4+15, height-230, width/4-15, height-230);
//When the value of nose type is equal to all other numbers in the range of 0~6,
//a triangular nose is drawn.
}
// Mouth Variations
if (mouthType >= 0 & noseType <= 1.5){
stroke("white");
fill(r-60, g, b);
rect(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, 20, 5);
// A confusing mouth is drawn.
} else if(mouthType > 1.5 & mouthType <= 3){
stroke("white");
strokeWeight(1);
fill(r, g, b+80);
ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/6, faceHeight/10);
//A shocking mouth is drawn.
} else if(mouthType > 3 & mouthType <= 4.5){
noStroke();
triangle(width/4 - faceWidth*0.05, height/2 + faceHeight*0.35, width/4+15, height-190, width/4-15, height-190);
//A happy mouth is drawn.
} else{
stroke("white");
strokeWeight(1);
fill(r, g+60, b);
ellipse(width/4, height/2 + faceHeight*0.35, faceWidth/2, faceHeight/8);
//A shocking mouth is drawn.
}
// RIGHT FIGURE
//Body
fill(0, g, b+50);
stroke("white");
ellipse(width/1.4, height/2 + 200, width/1.5, height/1.5);
// Face base
noStroke();
fill(0, g, b+50);
ellipse(width/1.4, height/2, faceWidthB, faceHeightB);
// Eyes
stroke(r, g, 100);
strokeWeight(1);
fill(255);
var eyeLX2 = width / 1.4 - faceWidthB * 0.25;
var eyeRX2 = width / 1.4 + faceWidthB * 0.25;
ellipse(eyeLX2, height / 2, eyeSizeW2, eyeSizeH2);
ellipse(eyeRX2, height / 2, eyeSizeW2, eyeSizeH2);
fill(r-100, g+50, b+50);
var pupilLX2 = width / 1.4 - faceWidthB * 0.25;
var pupilRX2 = width / 1.4 + faceWidthB * 0.25;
ellipse(pupilLX2, height/2, pupilSizeW2, pupilSizeH2);
ellipse(pupilRX2, height/2, pupilSizeW2, pupilSizeH2);
//Nose Variations
fill("white");
if (noseType >= 0 & noseType <= 1){
noStroke();
ellipse(width/1.4, height/2 + faceHeightB*0.1, faceWidthB/5, faceHeightB/10);
} else if(noseType > 2 & noseType <= 4){
noStroke();
fill("white");
rect(width/1.4 - faceWidthB*0.03, height/2 + faceHeightB*0.1, 30, 10);
} else if(noseType > 4 & noseType <= 5.5){
stroke("white");
strokeWeight(5);
line(width/1.4, height/2, width/1.4+15, height-230);
} else{
noStroke();
triangle(width/1.4, height/2, width/1.4+50, height-220, width/1.4+50, height-220);
}
// Mouth Variations
if (mouthType >= 0 & noseType <= 1.5){
stroke("white");
fill(r-60, g, b);
rect(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, 20, 5);
} else if(mouthType > 1.5 & mouthType <= 3){
stroke("white");
strokeWeight(1);
fill("black");
ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/6, faceHeightB/10);
} else if(mouthType > 3 & mouthType <= 4.5){
noStroke();
triangle(width/1.4 - faceWidthB*0.05, height/2 + faceHeightB*0.35, width/1.4+15, height-190, width/1.4-15, height-190);
} else{
stroke("white");
strokeWeight(1);
fill(r, g+60, b);
ellipse(width/1.4, height/2 + faceHeightB*0.35, faceWidthB/10, faceHeightB/8);
}
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 100 and 300.
faceWidth = random(100, 300);
faceHeight = random(100, 400);
faceWidthB = random (100, 300);
faceHeightB = random (200, 450);
noseType = random(0, 6);
mouthType = random(0, 8);
eyeSizeW = random(10, 80);
eyeSizeH = random(10, 80);
eyeSizeW2 = random(30, 70);
eyeSizeH2 = random(30, 70);
pupilSizeW = random(5,30);
pupilSizeH = random(5,20);
pupilSizeW2 = random(10, 30);
pupilSizeH2 = random (5, 30);
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
if(mouseX > 250 & mouseX < 350 && mouseX);
on = !on;
}