Author: thlai@andrew.cmu.edu

sketch

// Tiffany Lai (thlai) & Helen Wu (hdw)
// 15-104, Section A
// Project 12 - Final

//var font; // variable for font
var music; // variable for music
var fft; // variable for p5.FFT library
var amp; // variable for p5.Amplitude library
var leftArrows = [];
var opacity = 255;
var scoreCount = 0;
var playMode = 0;

function preload() {
  //font = loadFont('font/slkscr.ttf'); // load font 'silk screen'
  music = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/music-2.mp3"); // load music
}

function setup() {
  createCanvas(480, 480);
  fft = new p5.FFT(0.9, 256); // load p5.FFT library
  amp = new p5.Amplitude(); // load p5.Amplitude
}

function draw() {
  background(22, 35, 42);
  circleBeat(); // background sound visualization
  displayTriangles(); // display top triangles
  moveTriangles(); // top triangles go down when pressing specific keys
  generateArrows();

  for (var i = 0; i < leftArrows.length; i++) {
    leftArrows[i].move();
    leftArrows[i].render();
    if (leftArrows[i].y < -500) {
      leftArrows.shift();
    }
  }
  scoreCounter(); // score counter
  endScreen();
  startScreen();
}

//start screen
function startScreen() {
    fill(255, 56, 115, opacity);
    rect(0,0,width,height);
    textSize(12);
      if (frameCount%2 == 0){
        fill(255,opacity);
        //textFont(font);
        textAlign(CENTER);
        textSize(12);
        text("CLICK TO PLAY", width/2, height/2);
    }
}


//music plays
function mouseClicked() {
  displayTriangles(); // display main triangles
  opacity = 0;
  moveTriangles();
  if (playMode == 0) {
    music.play();
    playMode = 'sustain';
  } else {
    playMode = 0;
    music.stop();
   }
}

// background sound visualization
function circleBeat() {
  var spectrum = fft.analyze(); // analyze music spectrum
  // drawing the circle
  push();
  translate(width/2, height/2);
    for (var i = 0; i <  spectrum.length; i++) {
      var angle = map(i, 0, spectrum.length, 0, 360); // map spectrum to degrees
      var spec = spectrum[i];
      var r = 2 * map(spec, 0, 256, 20, 100);
      var x = r * cos(angle);
      var y = r * sin(angle);

      fill(200, i*3, i*5); // fill with gradient
      noStroke();
      ellipse(x, y, 3, 3); // tiny center circles
    }
  pop();
}

//==========CREATE TOP TRIANGLES ==========//
// make triangles object
function makeTriangles (l, d, u, r) {
  var triangles = {
    left: l,
    down: d,
    up: u,
    right: r,
    display: displayTriangles,
    move: moveTriangles
  }
  return triangles;
}

// display triangles
function displayTriangles() {
  fill(255);
  noStroke();
  // draw four anchor triangles
  triangle(115, this.l+66, 154, this.l+88, 154, this.l+44); // left
  triangle(185, this.d+53, 207, this.d+92, 229, this.d+53); // down
  triangle(272, this.u+40, 250, this.u+79, 295, this.u+79); // up
  triangle(325, this.r+44, 325, this.r+89, 364, this.r+66); // right

  // draw 3D part of anchor triangles
  fill(116, 136, 133);
  quad(115, this.l+66, 154, this.l+88, 154, 93, 115, 71); // left
  quad(250, this.u+79, 295, this.u+79, 295, 85, 250, 85); // up
  fill(230, 160, 133);
  quad(185, this.d+53, 185, 62, 207, 102, 207, this.d+92); // down (left)
  quad(207, this.d+92, 207, 102, 229, 62, 229, this.d+53); // down (right)
  quad(325, this.r+89, 325, 94, 364, 71, 364, this.r+66); // right
}

function moveTriangles(){
  // move triangles down when you press specific arrow key
  if (keyIsDown(LEFT_ARROW)) {
    this.l = 3;
  } else if (keyIsDown(DOWN_ARROW)) {
    this.d = 5;
  } else if (keyIsDown(UP_ARROW)) {
    this.u = 4;
  } else if (keyIsDown(RIGHT_ARROW)) {
    this.r = 3;
  } else {
    this.l = 0;
    this.d = 0;
    this.u = 0;
    this.r = 0;
  }
}

//========== GENERATE ARROWS ==========//
function makeArrows(aX, aY, spd, rot) {
  var arrows = {
    x: aX,
    y: aY,
    speed: spd,
    rotateArrow: rot,
    move: moveArrows,
    render: displayArrows,
    generate: generateArrows
  }
  return arrows;
}

function displayArrows() {
  push();
  stroke(0, 200, 200);
  strokeWeight(5);
  noFill();
  translate(this.x, this.y);
  rotate(this.rotateArrow);
  triangle(115, 66, 154, 88, 154, 44);
  pop();
  //triangle(this.x+115, this.y+66, this.x+154, this.y+88, this.x+154, this.y+44);
}

function moveArrows() { // speed of clouds
	this.y -= this.speed;
}

function generateArrows() {
  var vol = amp.getLevel();

  if ((vol > 0.33 & vol < 0.34) || (vol > 0.18 && vol < 0.2) || (vol > 0.03 && vol < 0.032)) {
    var randomizer = int(random(0,4)); // if the volume level is over 0.3
    if(randomizer == 0){
      var newArrow = new makeArrows(0, 420, 4, 0); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 1) {
      var newArrow = new makeArrows(140, 840, 4, 3/2*PI); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 2) {
      var newArrow = new makeArrows(340, 420, 4, 1/2*PI); // make new arrow object
      leftArrows.push(newArrow);
    }

    if (randomizer == 3) {
      var newArrow = new makeArrows(480, 840, 4, PI); // make new arrow object
      leftArrows.push(newArrow);
    }
  }
}

function endScreen() {
  if (music.isPlaying() ) {
    var endOpacity = 0;

  } else {fill(255, 56, 115, endOpacity);
    var endOpacity = 255;
    rect(0, 0, width, height);
    textSize(12);
      if (frameCount%2 == 0){
        fill(255,endOpacity);
        textFont(font);
        textAlign(CENTER);
        textSize(12);
        text("GAME OVER", width/2, height/2);
        text("SCORE: " + scoreCount, width/2, height/2+20);
    }
  }
}

// ========== COUNTER ========== //
function scoreCounter() {
  // draw borders on screen
  noStroke();
  fill(110, 120, 120);
  rect(0, 0, width, 7);
  rect(0, 0, 7, height);
  rect(0, height-7, width, 7);
  rect(width-7, 0, 7, height);
  fill(116, 136, 133);
  quad(182, height, 187, height-25, 292, height-25, 297, height);

  fill(255);
  text("SCORE: " + scoreCount, width/2, 472);
  for (var i = 0; i < leftArrows.length; i++) {
    if((keyIsDown(LEFT_ARROW))) {
      if (leftArrows[i].y > -10 & leftArrows[i].y < 30 && (leftArrows[i].x ==0)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }
    if(keyIsDown(DOWN_ARROW)){
      if (leftArrows[i].y > 180 & leftArrows[i].y < 220 && (leftArrows[i].x == 140)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

    if(keyIsDown(UP_ARROW)){
      if (leftArrows[i].y > -90 & leftArrows[i].y < -50 && (leftArrows[i].x == 340)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

    if(keyIsDown(RIGHT_ARROW)){
      if (leftArrows[i].y > 110 & leftArrows[i].y < 150 && (leftArrows[i].x == 480)) {
        scoreCount = scoreCount + 10;
        leftArrows.shift();
      }
    }

}
}