This project shows somebody ducking their head instinctively upon hearing the firing of a spitball. As the mouse is moved from left to right, the spitball fires, and the head goes from facing the viewer to facing and shifting downward. The facial features also move with the mouse’s movement to achieve the illusion of perspective. The hair size increases and the eyes and mouth widen and disappear. The background changes color to provide a sense of impact and display a transition of the person’s emotion from unaware to alarmed, dark to bright.
sketch
// Jerry Xu (jwx)
// Section A
// Project 3: Spitball
let rSky = 153
let gSky = 153
let bSky = 0
function setup() {
createCanvas(400, 400);
}
function draw() {
background(rSky, gSky, bSky);
fromSky = color(0, 0, 0);
toSky = color(252, 242, 197);
backgroundColor = lerpColor(fromSky, toSky, mouseX/width);
background(backgroundColor);
//meteor color constraints
rMeteor = constrain(123, 169, 220);
gMeteor = constrain(123, 169, 220);
bMeteor = constrain(123, 169, 220);
//trail color constraints
rTrail = 255
gTrail = 255
bTrail = random(51, 204);
var mConX = constrain(mouseX, 25, 500);
var mConY = constrain(mouseY, 100, 100);
//projectile
strokeWeight(0.1);
fill(rTrail,bTrail,gTrail);
fromTrail = color(255, 255, 51);
toTrail = color(255, 255, 204);
fillTrail = lerpColor(fromTrail, toTrail, mouseX/width);
fill(fillTrail);
triangle(mConX-60,mConY-25, mConX-10,mConY-5, mConX-10, mConY-26);
triangle(mConX-130,mConY-10, mConX-10,mConY-5, mConX-10, mConY-26);
triangle(mConX-60,mConY+25, mConX+10,mConY+5, mConX+10, mConY+26);
triangle(mConX-130,mConY+10, mConX+10,mConY+5, mConX+10, mConY+26);
triangle(mConX-150,mConY, mConX-5,mConY+20, mConX-10, mConY-20);
stroke(255);
fill(rMeteor,bMeteor,gMeteor);
fromMeteor = color(253, 197, 94);
toMeteor = color(255, 240, 173);
fillMeteor = lerpColor(fromMeteor, toMeteor, mouseX/width);
fill(fillMeteor);
ellipse(mConX,mConY,55,55);
ellipse(mConX,mConY,45,45);
//straw
stroke(0);
strokeWeight(0.5);
fill(0, 112, 74);
circle(65, 99.5, 57.52);
noStroke();
rect(0, 71, 70, 57);
stroke(0);
strokeWeight(0.5);
line(0, 71, 72.5, 71);
line(0, 128, 72.5, 128);
//constrain ducking height
var hConX = constrain(mouseX, 180, 300);
//head, neck, body
fill(fillMeteor);
quad(250, 300, 180, 330, 500, 330, 400, 300);
quad(160, 500, 180, 330, 500, 330, 400, 500);
stroke(255, 216, 194);
strokeWeight(80);
line(7/8 * width, 3/4 * height, 7/8 * width, hConX);
fill(12);
fill(255, 216, 194);
stroke(0);
strokeWeight(0.2);
circle(7/8 * width, hConX+51, 200);
//hair size change to create perspective when head goes down
fill(0);
if (mouseX > 200){
ellipse(7/8*width, hConX+30, 180, 170);
translate(300,400);
} else
ellipse(7/8*width, hConX, 180, 100);
//facial features
if (mouseX > 150 & mouseX < 200){
fill(255);
ellipse(7/8*width+40, hConX+100, 40, 20);
ellipse(7/8*width-30, hConX+100, 40, 20);
fill(0);
circle(7/8*width + 40, hConX+100, 20);
circle(7/8*width - 30, hConX+100, 20);
fill(255,0,0);
ellipse(7/8*width+5, hConX+130, 20, 30);
} else if (mouseX < 150){
fill(255);
ellipse(7/8*width+40, hConX+100, 30, 10);
ellipse(7/8*width-30, hConX+100, 30, 10);
fill(0);
circle(7/8*width + 40, hConX+100, 10);
circle(7/8*width - 30, hConX+100, 10);
line(340, 300, 370, 300);
}
}