![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.
//Alana Wu
//Section C
var faceWidth = 120;
var eyeLength = 20;
var x = 200;
var y = 250;
var eyeThickness = 5; //for changing eye thickness
var randomEars = 1; //for changing hat/ears
var randomSun = 10; //for changing yellow polka dot locations
function setup() {
createCanvas(640, 480);
}
function draw()
{
background (51, 0, 102);
//if mouse is pressed on yellow sun, yellow polka dots appear
if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
&& mouseY > .1*height && mouseY < .3*height)
{
fill (255, 255, 0)
strokeWeight(0);
ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
}
//blush button
strokeWeight (0);
fill (255, 0, 127);
rect (15, 15, 70, 40);
//draws blue tear shape button
fill (0, 0, 255);
beginShape();
curveVertex(50, 100);
curveVertex(50, 100);
curveVertex(25, 150);
curveVertex(50, 175);
curveVertex(75, 150);
curveVertex(50, 100);
curveVertex(75, 150);
curveVertex(50, 100);
endShape();
//draws sun
fill (255, 255, 0);
ellipse (.8*width, .2*height, width/5, width/5);
strokeWeight(8);
stroke(255, 255, 0);
line ( .8*width, .2*height, .8*width + width/6, .2*height);
line ( .8*width, .2*height, .8*width, .2*height + width/6);
line ( .8*width, .2*height, .8*width, .2*height - width/6);
line ( .8*width, .2*height, .8*width - width/6, .2*height);
line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
fill (255);
strokeWeight (0);
ellipse (x, y, faceWidth, faceWidth); //draws head shape
strokeWeight (eyeThickness); //thickness of eye line
stroke(0);
line (x - faceWidth/5, y - faceWidth/5,
x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
line (x + faceWidth/5, y - faceWidth/5,
x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line
//draws body
strokeWeight(5);
stroke(255);
fill (255);
line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs
line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet
line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);
//when mouseispressed, arms are lowered
if (mouseIsPressed)
{
line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
stroke(0);
ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
}
//when mouse isn't pressed, arms are raised
else
{
line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
stroke (0);
line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
}
//blush spots appear when you click "blush" button
if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
{
strokeWeight (0);
fill (255, 0, 127);
ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
}
// draws blue tear lines under eyes when blue teardrop is clicked
if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
{
stroke (0, 0, 255);
strokeWeight(8);
line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
strokeWeight (0);
}
//depending on random number generated, either panda ears, a cone hat, or a top hat appears
if (randomEars <= 1) //draws panda ears
{
fill (0);
ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
fill (255);
ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
}
else if (randomEars <= 2) //draws red top hat w/ black and white buckle
{
strokeWeight (0);
fill (255, 0, 0);
rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
fill (0);
rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
fill (255);
rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
}
else if (randomEars <= 3) //draws pink cone hat
{
strokeWeight(0);
fill (255, 0, 127);
triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
fill (255);
ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
}
}
function mousePressed ()
{
//when user clicks, these variables are reassigned to random values w/n specific ranges
eyeLength = random (8, 25);
eyeThickness = random (5, 12);
randomEars = random (0, 3);
randomSun = random (5, width/10);
}