Project 03

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);
  }
}

Leave a Reply