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
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);
rMeteor = constrain(123, 169, 220);
gMeteor = constrain(123, 169, 220);
bMeteor = constrain(123, 169, 220);
rTrail = 255
gTrail = 255
bTrail = random(51, 204);
var mConX = constrain(mouseX, 25, 500);
var mConY = constrain(mouseY, 100, 100);
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);
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);
var hConX = constrain(mouseX, 180, 300);
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);
fill(0);
if (mouseX > 200){
ellipse(7/8*width, hConX+30, 180, 170);
translate(300,400);
} else
ellipse(7/8*width, hConX, 180, 100);
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);
}
}