Month: December 2018

sketch

// Sara Frankel
// Final Project
// sfrankel
// Section A

var liftYourself;
var shostyTen;
var liftArray;
var fft;
var greatestWave;
var isPlaying;
var greatestOverall = 0;
var isLiftYourself;

function preload() {
    shostyTen = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/shostakovich-symphony-no-10-mvt-2-gianandrea-noseda-london-symphony-orchestra.mp3");
    liftYourself = loadSound("https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/Lift-Yourself.mp3"); 
}

function setup(){
    var cnv = createCanvas(400, 400);
    cnv.mouseClicked(togglePlay); //plays the canvas when clicked
    fft = new p5.FFT();
    liftYourself.amp(0.2);
    shostyTen.amp(1);
    isPlaying = false;
    isLiftYourself = true;
}

function draw(){
    background(0);
    var spectrum = fft.analyze(); //uses FFT to use the "spectrum" of sound (i.e. the eyebrows)
    var waveform = fft.waveform(); //uses FFT to use the waveform of the sound (i.e. the squiggled hair)
    noStroke();
    
    //draw variable to keep track of the greatest wave to give the "pulse" effect
    greatestWave = 0;
    for (i = 0; i < waveform.length; i++) {
        if(waveform[i] > greatestWave) {
            greatestWave = waveform[i];
        }   
    }
    //takes greatest overal wave value and stores it as greatest wave
    if(greatestWave > greatestOverall){
        greatestOverall = greatestWave;
    }

  
    //uses map use the value of the greatest wave of the sound and put it on a scale for color
    fill(map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 0, 0));
    

    //draws the "hair" of the eyebrow when turned on
    //left eyebrow
    for (var i = 0; i < spectrum.length; i++){
        var x = map(i, 0, spectrum.length, 0, width / 3); //maps i on the length of the spectrum variable
        var h = -height + map(spectrum[i], 0, 255, height, 0); //maps position in the spectrum array to allow height
        rect(x + width * 0.75 - 50, height / 4 + 35, width / spectrum.length, h / 4);
    }
    //right eyebrow
    for (var i = 0; i < spectrum.length; i++){
        var x = map(i, 0, spectrum.length, width / 3, 0);
        var h = -height + map(spectrum[i], 0, 255, height, 0);
        rect(x + 15, height / 4 + 20, width / spectrum.length, h / 4);
    }

    //draws base of eyebrows
    stroke(255);
    line(width / 4, height / 4 + 20, width / 4 + 50, height / 4 + 20);
    line(width * 0.75 - 50, height / 4 + 35, width * 0.75, height / 4 + 35);

    noFill();
    //draw eyeballs
    var y = map(greatestWave, -1, 1, 0, height); //allows for the eyes and head to pulse
    ellipse(width / 4 + 20, height / 4 + 60, y / 3, y / 3);
    ellipse(width * 0.75 - 20, height * 0.25 + 60, y / 6, y / 6);
    //draws head
    ellipse(width / 2, height / 2, y * 1.5, y * 1.5); 

    //calls that if the audio is playing, the color of hair and eyes change to the music
    if(isPlaying) {
        fill(map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 255, 0));
        stroke(map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 255, 0));
    } else {
        noFill();
        stroke(255);
    }

    //uses drawHairAtAngle function to draw the hair on the head that follows the pulse of the head (stays in spot with music)
    drawHairAtAngle(-14 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-12 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-10 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-8 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-6 * PI / 18, y * 0.75, waveform);
    drawHairAtAngle(-4 * PI / 18, y * 0.75, waveform);

    //allows eyes to follow mouse, drawing eyeballs
    var eX = map(mouseX, 0, y, -1, 1); 
    var eY = map(mouseY, 0, y, -1, 1);
    ellipse(eX + width / 4 + 20, eY + height / 4 + 60, 40, 40);
    ellipse(eX / 2 + width * 0.75 - 20, eY / 2 + height * 0.25 + 60, 20, 20);

    //states that if playing, the color of the mouth and eyebrows change color
    if(isPlaying) {
        stroke(map(greatestWave, 0, greatestOverall, 255, 0), map(greatestWave, 0, greatestOverall, 0, 255), map(greatestWave, 0, greatestOverall, 0, 0));
    } else {
        stroke(255);
    }

    //draws mouth
    for (var i = 0; i < waveform.length; i++){
        var x = map(i, 0, waveform.length, width/4, width * 0.75);
        var y = map(waveform[i], -1, 1, 0, height);
        line(width / 2, y + 50, x, height / 2 + 50);
    }

    //displays instructions of the canvas and which song is playing
    stroke(255);
    noFill();
    text('Click to play or pause - Press space to change song', 60, 15);
    if(isLiftYourself) {
        text("Kanye West - Lift Yourself", width - 150, height - 10);
    } else {
        text('Dmitri Shostakovich - Symphony No. 10 Second Movement', width - 360, height - 10);
    }
}


// fade liftYourself if mouse is over canvas
function togglePlay() {
    //if statement that allows for each song to play and not overlap another and still alows for the click to play/stop to work
    if(isLiftYourself){
        if (liftYourself.isPlaying()) {
        liftYourself.pause();
        isPlaying = false;
        } else {
            shostyTen.pause();
            liftYourself.loop();
            isPlaying = true;
        }
    } else {
        if (shostyTen.isPlaying()) {
            shostyTen.pause();
            isPlaying = false;
        } else {
            liftYourself.pause();
            shostyTen.loop();
            isPlaying = true;
        }
    }
}

//object that helps to draw the hair along the head
function drawHairAtAngle(angle, rad, waveform) {
    beginShape();
    for (var i = 0; i < waveform.length; i++) {
        //uses map to place the hairs along the radius of the circle evenly spaced
        var hairY = map(i, 0, waveform.length, sin(angle) * rad + height / 2, sin(angle) * (rad) + height / 2 - 25);
        var hairX = map(waveform[i], -0.5, 0.5, cos(angle) * (rad - 25) + width / 2, cos(angle) * (rad + 25) + width / 2); 
        vertex(hairX, hairY);
    }
    endShape();
}

//function to switch songs if space bar is clicked
function keyTyped() {
    if(key === ' ') {
        isLiftYourself = !isLiftYourself;
        togglePlay();
    }
 }

For this project, I decided to visualize music. My first vision at this project was something more abstract, but as I was creating the project I felt it to be more fun to have a face. This face visualizes music in the sense that all aspects of it “dance” to the music. The eyebrows raise, the hair squiggles, and the mouth draws lines to give the effect of singing. What I wanted to prove in this project is that not only is Kanye West “boppable” to, but so can classical music. The image posted below is a screen shot taken from the Shostakovich.

The instructions for this project are:
To play click the canvas
To change the song click space
To dance along (with the eyes) move the mouse!

Hope you enjoy!

if code does not work correctly, here is the zip.file for it!
https://drive.google.com/file/d/1O-X48r1iUjrtR_PWghS4f_l9hLtnG8Vf/view?usp=sharing

PRESS ENTER
sketch

/* Name : Jonathon Liang / Curran Zhang
   AndrewID : Jliang2 / Curranz
   Section : Section A 
   Final Project
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = []; 
var star = [];
var frames = []; 
var HeadX = 260;
var HeadY = 325; 
var ReflectionY =385
var step= 6;
var machox = 480;
var machoy = 300;
var girlx = 480;
var girly = 340;
var nekx = 480;
var neky = 240;
var towelx = 480;
var towely = 200;
var birdiex = 480;
var birdiey = 300;

function setup() {
  createCanvas(480, 480);
  //Iniate Clouds
  for (var i = 0; i <5; i++) {
      var r = random(width);
      clouds[i] = makeClouds(r);
  }
  //Head Image Position 
    imageMode(CENTER);
    frameRate(15);
}
function preload(){
 //Cats
	cat1 = loadImage("https://i.imgur.com/7hCkrYr.png");
	cat2 = loadImage("https://i.imgur.com/TWXWeM0.png");
	cat3 = loadImage("https://i.imgur.com/kRxHYt0.png");
	cat4 = loadImage("https://i.imgur.com/kkpAzvD.png");
	cat5 = loadImage("https://i.imgur.com/Hf9rTYl.png");
	birdie = loadImage("https://i.imgur.com/RdcS35J.png");

 //Head
    var filenames = [];
    filenames[0] = "https://i.imgur.com/leN6UXu.png";
	filenames[1] = "https://i.imgur.com/dydccNf.png";
	filenames[2] = "https://i.imgur.com/dcoiGqR.png";
	filenames[3] = "https://i.imgur.com/wez5P2S.png";
	filenames[4] = "https://i.imgur.com/9etlno8.png";
	filenames[5] = "https://i.imgur.com/yrjv4XT.png";
	filenames[6] = "https://i.imgur.com/hW3gKH6.png";
	filenames[7] = "https://i.imgur.com/Jg0yJck.png";
	filenames[8] = "https://i.imgur.com/dU1rruI.png";
    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    }  
}

function draw() {
  //Gradient Background
    var from = color(250,0,0);
    var to = color(270);
    gradient(0,width,from,to);
    rect(0,0,480,480);
	  makeMountain1();
	  makeMoon();
	  makeStar();
	  makeMountain1();
	  makeMountain2();
	  makeReflection();
	  updateClouds();
	  removeClouds();
	  addClouds();
	strokeWeight(.5);
	stroke(255);
	text("early head gets the bird", 10, 15);
	text("touch a cat, you'll be sad", 10, 30);
	text("fly too high, and you'll die", 10, 45);
	  makeHead();
	  makeCat();
}

function gradient(y,w,from,to){
  for (var i = y; i <= height; i++) {
    var inter = map(i,y,y+w,0,1);
    var col = lerpColor(from,to,inter);
    stroke(col);
    strokeWeight(2);
    line(y,i,y+w,i);
  }
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 100; i++) {
      var starX = random(width);
      var starY = random(height);
      ellipse(starX,starY,1,1);
    }
}

function makeMountain1(){
  noStroke();
  fill(180,0,0); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
    var y = map(noise(t), 0,1.8, height/8, height);
    vertex(x, y); 
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function makeMountain2(){
  fill(139,0,0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height/2, height);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeReflection(){
  fill(220,50,50);
    rect(0, 375, width, 105);

  fill(255,60,60); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height, height*.5);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeMoon(){
    noStroke();
    fill(255,20);
    ellipse(2*width/3,height/4,170,170);
    ellipse(2*width/3,height/4,160,160);
    ellipse(2*width/3,height/4,150,150);
    ellipse(2*width/3,height/4,140,140);
    fill(255,200);
    ellipse(2*width/3,height/4,120,120);
}
function updateClouds(){
  for (var i = 0; i < clouds.length; i++) {
    clouds[i].move();
    clouds[i].display();
  }
}

function removeClouds(){
  var keepClouds = [];
  for (var i = 0; i < clouds.length; i++) {
      if (clouds[i].x + clouds[i].breadth > 0) {
        keepClouds.push(clouds[i]);
      }
  }
  clouds= keepClouds;
}

function addClouds(){
  var newCloud = .007;
  if (random(0,1)<newCloud) {
     clouds.push(makeClouds(width))
  }
}

function cloudMove(){
  this.x += this.speed;
}

function displayClouds(){
  fill(255,50);
  noStroke();
  ellipse(this.x,this.y,this.width,this.height);
  ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
  ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
  ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
  var cloud= {x: cloudy,
              y:random(100, height/2),
              speed: random(-.2,-.7),
              width: random(50,100), 
              height:random(20,0),
              breadth:50,
              move:cloudMove,
              display:displayClouds
            }
  return cloud;          
}

function makeHead(){
  //Main Head
    push();
      translate(HeadX,HeadY);
      scale(.2,.2);
      image(frames[frameCount % 8], 0, 0);
    pop();    
  //Reflection
    push();
      translate(HeadX,ReflectionY);
      scale(.2,-.2);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 
	if (keyIsDown(ENTER)){
	        HeadY -= step; 
	        ReflectionY += step;
	} else { HeadY += step;
	         HeadY = min(HeadY, 350);
	         ReflectionY -= step;
	         ReflectionY = max(ReflectionY,405);
	        }
	if (HeadY <= 100) {gameOver()};
}

function makeCat(){
	//MachoCat
		push();
			translate(machox,machoy);
			scale(.2,.2);
			image(cat1, 0,0);
			machox-=1.25;
			if (machox < 0) {lmachox = 480};
		pop();
		if (HeadX + 30 > machox & HeadX-30 < machox && machoy > HeadY  && HeadY > machoy - 30) {
			gameOver()};
	//MachoCat Reflection
		push();
			translate(machox,419);
			scale(.2,-.2);
			tint(265,160);
			image(cat1, 0,0);
			machox-=1.25;
			if (machox < 0) {machox = 480};
		pop();
	//School Girl
		push();
			translate(girlx,girly);
			scale(.18,.18);
			image(cat3, 0,0);
			girlx-=.8;
			if (girlx < 0) {girlx = 480};
		pop();
		if (HeadX + 30 > girlx & HeadX-30 < girlx && girly > HeadY  && HeadY > girly - 30) {
			gameOver();}
	//School Girl Reflection
		push();
			translate(girlx,409);
			scale(.18,-.18);
			tint(265,160);
			image(cat3, 0,0);
			girlx-=.8;
			if (girlx < 0) {girlx = 480};
		pop();
	//Neka
		push();
			translate(nekx,neky);
			scale(.6,.6);
			image(cat4, 0,0);
			nekx-=.5;
			if (nekx < 0) {nekx= 480};
		pop();
			if (HeadX + 30 > nekx & HeadX-30 < nekx && neky + 40 > HeadY  && HeadY > neky - 10) {
				gameOver()};
	//Neka Reflection
		push();
			translate(nekx,509);
			scale(.6,-.6);
			tint(265,160);
			image(cat4, 0,0);
			nekx-=.5;
			if (nekx < 0) {nekx = 480};
		pop();
	//Towel
		push();
			translate(towelx,towely);
			scale(.15,.15);
			image(cat5, 0,0);
			towelx-=5.05;
			if (towelx < 0) {towelx = 480};
		pop();
			if (HeadX + 30 > towelx & HeadX-30 < towelx && towely > HeadY  && HeadY > towely - 30) {
				gameOver()};
	//Birdie 
		push();
			translate(birdiex,birdiey);
			scale(-.15,.15);
			image(birdie, 0,0);
			birdiex-=5.05;
			if (birdiex < 0) {birdiex = 480};
			if (birdiey+30 > HeadY & HeadY> birdiey-30 && HeadX+30 > birdiex && HeadX-30 < birdiex)  {
				birdiex=480};
		pop();
}

function gameOver() {
	fill(0);
	textSize(75);
	textAlign(CENTER);
	textStyle(BOLD);
	text("GAME OVER", 240, 240);
	noLoop();
}

For the final project, me and Jonathon decided to base our project off of the game Battle Cat. Our original idea was to do a health system for the floating head and have the cats slowly chip off the health. However, that was not doable within our available time. Therefore, we toned down and the goal of the game is to bypass the white cats and try to collect the red bird as much as possible. Flying to high into the sky would also be an instant game over. Over the course of this project, we tried to incorporate as much as we can into it. Ranging from images, array, moving terrain, and objects.

sketch

/* Name : Jonathon Liang / Curran Zhang
   AndrewID : Jliang2 / Curranz
   Section : Section A 
   Final Project
*/

var terrainSpeed1 = 0.0002;
var terrainDetail1 = 0.015;
var terrainSpeed2 = 0.0004;
var terrainDetail2 = 0.008;
var clouds = []; 
var star = [];
var frames = []; 
var HeadX = 260;
var HeadY = 325; 
var ReflectionY =385
var step= 6;
var machox = 480;
var machoy = 300;
var girlx = 480;
var girly = 340;
var nekx = 480;
var neky = 240;
var towelx = 480;
var towely = 200;
var birdiex = 480;
var birdiey = 300;

function setup() {
  createCanvas(480, 480);
  //Iniate Clouds
  for (var i = 0; i <5; i++) {
      var r = random(width);
      clouds[i] = makeClouds(r);
  }
  //Head Image Position 
    imageMode(CENTER);
    frameRate(15);
}
function preload(){
 //Cats
	cat1 = loadImage("https://i.imgur.com/7hCkrYr.png");
	cat2 = loadImage("https://i.imgur.com/TWXWeM0.png");
	cat3 = loadImage("https://i.imgur.com/kRxHYt0.png");
	cat4 = loadImage("https://i.imgur.com/kkpAzvD.png");
	cat5 = loadImage("https://i.imgur.com/Hf9rTYl.png");
	birdie = loadImage("https://i.imgur.com/RdcS35J.png");

 //Head
    var filenames = [];
    filenames[0] = "https://i.imgur.com/leN6UXu.png";
	filenames[1] = "https://i.imgur.com/dydccNf.png";
	filenames[2] = "https://i.imgur.com/dcoiGqR.png";
	filenames[3] = "https://i.imgur.com/wez5P2S.png";
	filenames[4] = "https://i.imgur.com/9etlno8.png";
	filenames[5] = "https://i.imgur.com/yrjv4XT.png";
	filenames[6] = "https://i.imgur.com/hW3gKH6.png";
	filenames[7] = "https://i.imgur.com/Jg0yJck.png";
	filenames[8] = "https://i.imgur.com/dU1rruI.png";
    for (var i = 0; i < filenames.length; i++) {
        frames.push(loadImage(filenames[i]));
    }  
}

function draw() {
  //Gradient Background
    var from = color(250,0,0);
    var to = color(270);
    gradient(0,width,from,to);
    rect(0,0,480,480);
	  makeMountain1();
	  makeMoon();
	  makeStar();
	  makeMountain1();
	  makeMountain2();
	  makeReflection();
	  updateClouds();
	  removeClouds();
	  addClouds();
	strokeWeight(.5);
	stroke(255);
	text("early head gets the bird", 10, 15);
	text("touch a cat, you'll be sad", 10, 30);
	text("fly too high, and you'll die", 10, 45);
	  makeHead();
	  makeCat();
}

function gradient(y,w,from,to){
  for (var i = y; i <= height; i++) {
    var inter = map(i,y,y+w,0,1);
    var col = lerpColor(from,to,inter);
    stroke(col);
    strokeWeight(2);
    line(y,i,y+w,i);
  }
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 100; i++) {
      var starX = random(width);
      var starY = random(height);
      ellipse(starX,starY,1,1);
    }
}

function makeMountain1(){
  noStroke();
  fill(180,0,0); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
    var y = map(noise(t), 0,1.8, height/8, height);
    vertex(x, y); 
  }
  vertex(width,height);
  vertex(0,height);
  endShape();
}

function makeMountain2(){
  fill(139,0,0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height/2, height);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeReflection(){
  fill(220,50,50);
    rect(0, 375, width, 105);

  fill(255,60,60); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0,2, height, height*.5);
            vertex(x, y); 
      }
      vertex(width,height);
      vertex(0,height);
    endShape();
}

function makeMoon(){
    noStroke();
    fill(255,20);
    ellipse(2*width/3,height/4,170,170);
    ellipse(2*width/3,height/4,160,160);
    ellipse(2*width/3,height/4,150,150);
    ellipse(2*width/3,height/4,140,140);
    fill(255,200);
    ellipse(2*width/3,height/4,120,120);
}
function updateClouds(){
  for (var i = 0; i < clouds.length; i++) {
    clouds[i].move();
    clouds[i].display();
  }
}

function removeClouds(){
  var keepClouds = [];
  for (var i = 0; i < clouds.length; i++) {
      if (clouds[i].x + clouds[i].breadth > 0) {
        keepClouds.push(clouds[i]);
      }
  }
  clouds= keepClouds;
}

function addClouds(){
  var newCloud = .007;
  if (random(0,1)<newCloud) {
     clouds.push(makeClouds(width))
  }
}

function cloudMove(){
  this.x += this.speed;
}

function displayClouds(){
  fill(255,50);
  noStroke();
  ellipse(this.x,this.y,this.width,this.height);
  ellipse(this.x +10,this.y +10,this.width-10,this.height-10);
  ellipse(this.x +20,this.y -10,this.width/2,this.height/2);
  ellipse(this.x -20,this.y ,this.width-20,this.height-10);
}

function makeClouds(cloudy){
  var cloud= {x: cloudy,
              y:random(100, height/2),
              speed: random(-.2,-.7),
              width: random(50,100), 
              height:random(20,0),
              breadth:50,
              move:cloudMove,
              display:displayClouds
            }
  return cloud;          
}

function makeHead(){
  //Main Head
    push();
      translate(HeadX,HeadY);
      scale(.2,.2);
      image(frames[frameCount % 8], 0, 0);
    pop();    
  //Reflection
    push();
      translate(HeadX,ReflectionY);
      scale(.2,-.2);
      tint(255,127);
      image(frames[frameCount % 8], 0, 0);
    pop(); 
	if (keyIsDown(ENTER)){
	        HeadY -= step; 
	        ReflectionY += step;
	} else { HeadY += step;
	         HeadY = min(HeadY, 350);
	         ReflectionY -= step;
	         ReflectionY = max(ReflectionY,405);
	        }
	if (HeadY <= 100) {gameOver()};
}

function makeCat(){
	//MachoCat
		push();
			translate(machox,machoy);
			scale(.2,.2);
			image(cat1, 0,0);
			machox-=1.25;
			if (machox < 0) {lmachox = 480};
		pop();
		if (HeadX + 30 > machox & HeadX-30 < machox && machoy > HeadY  && HeadY > machoy - 30) {
			gameOver()};
	//MachoCat Reflection
		push();
			translate(machox,419);
			scale(.2,-.2);
			tint(265,160);
			image(cat1, 0,0);
			machox-=1.25;
			if (machox < 0) {machox = 480};
		pop();
	//School Girl
		push();
			translate(girlx,girly);
			scale(.18,.18);
			image(cat3, 0,0);
			girlx-=.8;
			if (girlx < 0) {girlx = 480};
		pop();
		if (HeadX + 30 > girlx & HeadX-30 < girlx && girly > HeadY  && HeadY > girly - 30) {
			gameOver();}
	//School Girl Reflection
		push();
			translate(girlx,409);
			scale(.18,-.18);
			tint(265,160);
			image(cat3, 0,0);
			girlx-=.8;
			if (girlx < 0) {girlx = 480};
		pop();
	//Neka
		push();
			translate(nekx,neky);
			scale(.6,.6);
			image(cat4, 0,0);
			nekx-=.5;
			if (nekx < 0) {nekx= 480};
		pop();
			if (HeadX + 30 > nekx & HeadX-30 < nekx && neky + 40 > HeadY  && HeadY > neky - 10) {
				gameOver()};
	//Neka Reflection
		push();
			translate(nekx,509);
			scale(.6,-.6);
			tint(265,160);
			image(cat4, 0,0);
			nekx-=.5;
			if (nekx < 0) {nekx = 480};
		pop();
	//Towel
		push();
			translate(towelx,towely);
			scale(.15,.15);
			image(cat5, 0,0);
			towelx-=5.05;
			if (towelx < 0) {towelx = 480};
		pop();
			if (HeadX + 30 > towelx & HeadX-30 < towelx && towely > HeadY  && HeadY > towely - 30) {
				gameOver()};
	//Birdie 
		push();
			translate(birdiex,birdiey);
			scale(-.15,.15);
			image(birdie, 0,0);
			birdiex-=5.05;
			if (birdiex < 0) {birdiex = 480};
			if (birdiey+30 > HeadY & HeadY> birdiey-30 && HeadX+30 > birdiex && HeadX-30 < birdiex)  {
				birdiex=480};
		pop();
}

function gameOver() {
	fill(0);
	textSize(75);
	textAlign(CENTER);
	textStyle(BOLD);
	text("GAME OVER", 240, 240);
	noLoop();
}

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score.

For our Final Project Curran and I wanted to create a game that closely resembled our favorite mobile app game Battle Cats. But in our game we made it so that our protagonist cannot touch any of the white cats and has to try to eat the red chicken. The instructions are as followed: eat the chicken, avoid the white cats, and don’t fly too high; otherwise the game is over. Press enter to make the face move up.

Hope y’all enjoy.

judyli: Final Project

//Judy Li
//Section A
//judyli@andrew.cmu.edu
//Final Project

var yA = 1; //y-Axis
var c1; //color 1
var c2; //color 2
var x = [];
var gravity = 0.3; //downward acceleration
var springy = 1; //how much velocity is retained after bounce
var drag = 0.0001; //drag causes particles to slow down
var np = 25; //how many particles
var paperbirds = [];

function soot() {
    background(204, 174, 98);
    noStroke();
    fill("pink");
    ellipse(30, 30, 10, 10);
    fill(186, 220, 88);
    ellipse(25, 25, 10, 10);
    fill(126, 214, 223);
    ellipse(25, 40, 10, 10);
    fill("coral");
    ellipse(30, 35, 10, 10);
    fill(224, 86, 253);
    ellipse(40, 30, 10, 10);
    fill("white");
    ellipse(40, 40, 10, 10);
    fill(0);
    for (var i = 0; i < np; i++) {
        //make a particle
        var p = makeParticle(200, 200, random(-50, 50), random(-50, 50));
    }
    frameRate(10);
    sootDraw();
}

function sootDraw() {
    if (mouseIsPressed) {
        var newp = makeParticle(mouseX, mouseY, random(-10, 10), random(-10, 0), random(0, 50));
        particles.push(newp);
    }
    newParticles = [];
    for (var i = 0; i < particles.length; i++) { // for each particle
        var p = particles[i];
        p.step();
        p.draw();
        if (p.age < 200) {
            newParticles.push(p);
        }
    }
    particles = newParticles;
}

function birds() {
    setGradient(0, 0, width, height, c1, c2, yA); 
    drawClouds();
    nBird();
    nPosition();
    nArray();
    for (var i = 0; i < paperbirds.length; i++) {
        paperbirds[i].display();
    }
    frameRate(10);
    paperbirds.push(drawBirds());
}

function nBird() {
    if (random(50, 50) < 50) {
        paperbirds.push(drawBirds());
    }
}

function nPosition() {
    for (var i = 0; i < paperbirds.length; i++) {
        paperbirds[i].move();
    }
}

function nArray() {
    var ogBird = [];
    for (var i = 0; i < paperbirds.length; i++) {
        if (paperbirds[i].x > 0) {
            ogBird.push(paperbirds[i]);
        }
    }
    paperbirds = ogBird;
}

function moveBird() {
    this.x -= this.speed;
}

function seeBird() {
    stroke(225, 255, 255, 200);
    strokeWeight(random(1, 5));
    point(this.x, this.y);
    point(this.x + 2.5, this.y);
}

function drawBirds() {
    var paperbirds = {x: width,
        pdist: 100,
        speed: 5,
        birdsize: round(random(0, 5)),
        y: round(random(0, height)),
        move: moveBird,
        display: seeBird
        }
    return paperbirds;
}

function drawClouds() {
    noStroke();
    //cloud1
    fill(255, 255, 255, 200);
    ellipse(75, 75, 80, 50);
    ellipse(185, 75, 100, 60);
    ellipse(135, 75, 115, 75);
    //cloud2
    ellipse(240, 200, 70, 50);
    ellipse(380, 200, 100, 55);
    ellipse(420, 200, 75, 30);
    ellipse(300, 200, 120, 75);
    //cloud3
    ellipse(120, 360, 100, 40);
    ellipse(240, 360, 80, 50);
    ellipse(300, 360, 75, 30);
    ellipse(180, 360, 120, 75);
}

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx * springy;
    } else if (this.x < 0) { // bounce off left wall
        this.x = this.x;
        this.dx = -this.dx * springy;
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy * springy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy * springy;
    }
    this.dy = this.dy + gravity; // force of gravity
    // drag is proportional to velocity squared
    // which is the sum of the squares of dy and dy
    var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
    // d is the ratio of old velocty to new velocity
    var d = vs * drag;
    // d goes up with velocity squared but can never be
    // so high that the velocity reverses, so limit d to 1
    d = min(d, 1);
    // scale dx and dy to include drag effect
    this.dx *= (1 - d);
    this.dy *= (1 - d);
    var rpx = width;
    var rpy = height;
    var f;
    var d;
    var rpc = 10;
    var x = this.x;
    var y = this.y;
    var dirx = (x - rpx) / d;
    var diry = (y - rpy) / d;
    d = dist(x, y, rpx, rpy);
    f = rpc / (Math.pow(d, 2));
    this.dx += dirx * f;
    this.dy += diry * f;
    point(rpx, rpy);
}

function particleDraw() {
    noStroke();
    fill(0);
    ellipse(this.x, this.y, this.size, this.size);
}

function setSize() {
    return random(5, 25);
}

function makeParticle(px, py, pdx, pdy, size) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         size: setSize(),
         age: 0,
         step: particleStep,
         draw: particleDraw
        }
    return p;
}

var particles = [];

function setup() {
    createCanvas(480, 480);
    //colors
    c1 = color(129, 236, 236);
    c2 = color(255, 234, 167);
}

function draw() {
    setGradient(0, 0, width, height, c1, c2, yA);
    placeForeground();
    if (mouseX < (width / 2) & mouseY < height) {
        soot();
    }
    if (mouseX > (width / 2) & mouseY < height) {
        birds();
    }
}

function placeForeground() {
    noStroke();
    //chim
    fill(150);
    quad(20, height, 30, 100, 50, 100, 60, height);
    fill(0);
    rect(30, 90, 20, 10);
    //big red
    fill(255, 82, 82);
    rect(90, 145, 300, 250);
    //grey
    fill(175);
    rect(80, 160, 80, 45);
    rect(100, 250, 60, 45);
    rect(315, 200, 90, 50);
    //top red
    fill(225, 82, 82);
    rect(110, 60, 260, 40);
    //mini rooms
    fill(205);
    rect(85, 170, 70, 30);
    rect(105, 260, 50, 30);
    rect(320, 210, 80, 35);
    rect(95, 105, 290, 40);
    //green
    fill(120, 180, 143);
    quad(75, 165, 85, 155, 155, 155, 165, 165);
    quad(95, 255, 105, 245, 155, 245, 165, 255);
    quad(310, 205, 320, 195, 400, 195, 410, 205);
    quad(80, 110, 100, 100, 380, 100, 400, 110);
    quad(90, 65, 200, 15, 280, 15, 390, 65);
    //bottom brown
    fill(139, 69, 19);
    rect(190, 280, 100, 12.5);
    rect(75, 205, 90, 7.5);
    rect(95, 295, 70, 7.5);
    rect(310, 250, 100, 7.5);
    //top brown
    fill(250, 211, 144);
    rect(200, 200, 80, 80);
    //outer red
    fill(200, 57, 57);
    rect(60, 330, 130, 100);
    rect(290, 330, 130, 100);
    //main entrance
    fill(250, 211, 144);
    rect(190, 325, 100, 50);
    //teal
    fill(120, 200, 143);
    quad(180, 325, 200, 315, 280, 315, 300, 325);
    quad(180, 210, 210, 180, 270, 180, 300, 210);
    //sign
    fill(255, 240, 195);
    ellipse(240, 180, 40, 20);
    ellipse(240, 15, 50, 25);
    ellipse(240, 315, 60, 10);
    //noStroke();
    fill(204, 174, 98);
    stroke(204, 174, 98);
    quad(0, width, width / 3, 360, 2 * (width / 3), 360, width, height);
    stroke(204, 142, 25);
    line(width / 3, 450, (2 * (width / 3)) + 140, 450);
    line((width / 3) - 140, 465, 2 * (width / 3), 465);
    stroke(179, 57, 57);
    strokeWeight(1);
    fill(179, 57, 57);
    triangle(0, height, 0, height - 45, 120, 369);
    triangle(width, height, width, height - 45, 360, 369);
    beginShape();
    curveVertex(0, height);
    curveVertex(0, height);
    curveVertex(35, 430);
    curveVertex(72.5, 395);
    curveVertex(115, 370);
    curveVertex(width / 3, 360);
    curveVertex(width / 3, 360);
    endShape();
    beginShape();
    curveVertex(2 * (width / 3), 360);
    curveVertex(2 * (width / 3), 360);
    curveVertex(365, 370);
    curveVertex(407.5, 395);
    curveVertex(445, 430);
    curveVertex(width, height);
    curveVertex(width, height);
    endShape();
}

function setGradient(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yA) {//top > bottom gradient
        for (var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0, 1);
            var c = lerpColor(c1, c2, inter);
            stroke(c);
            line(x, i, x + w, i);
        }
    }
}

For the final project, I wanted to recreate three of my favorite scenes in the movie, Spirited Away. The first scene shows bridge and the exterior of the bath house. Since this building is famous in the movie, I wanted to start my project out with this first background image. When you move you mouse in the left hand side within the bounding box, it moves onto a new background/scene. This scene is the part when Chihiro is interacting with the soot creatures. She throws candy onto a corner of the floor so that the soot would get away from her. To go back to the original/first scene, you would just move your mouse down and out of the bounding box. And for the third scene, I remade the part that shows the flying paper birds through a simple animation. I really enjoyed that scene because it was really aesthetically filmed/made in the movie and I wanted to incorporate that.