let amplitude;

let backgroundColor;

let beatHoldFrames = 20;

let beatThreshold = 0.11;

let beatCutoff = 0;

let beatDecayRate = 0.78;

let framesSinceLastBeat = 0;

let rectx = 200;

let recty = 200;

let arrows = [];

let result = "";

let timer = 0;

let score = 0;

​

function preload(){

    audio = loadSound('audio.mp3');

}

​

function setup() {

  createCanvas(500, 500);

  backgroundColor = color( random(0,255), random(0,255), random(0,255));

  //music

  amplitude = new p5.Amplitude();

  audio.play();

  amplitude.setInput(audio);

  amplitude.smooth(0.9);

  //music cues

  audio.addCue(2.6, createArrow);

  audio.addCue(2.9, createArrow);

  audio.addCue(3.6, createArrow);

  audio.addCue(3.9, createArrow);

  audio.addCue(4.6, createArrow);

  audio.addCue(5.6, createArrow);

  audio.addCue(6.4, createArrow);

  audio.addCue(6.7, createArrow);

  audio.addCue(7.4, createArrow);

  audio.addCue(7.7, createArrow);

  audio.addCue(8.4, createArrow);

  audio.addCue(8.7, createArrow);

  audio.addCue(9.3, createArrow);

  audio.addCue(10.2, createArrow);

  audio.addCue(10.5, createArrow);

  audio.addCue(11.1, createArrow);

  audio.addCue(11.4, createArrow);

  audio.addCue(11.9, createArrow);

  audio.addCue(12.2, createArrow);

  audio.addCue(13.0, createArrow);

  audio.addCue(13.4, createArrow);

  audio.addCue(13.9, createArrow);

  audio.addCue(14.3, createArrow);

  audio.addCue(14.7, createArrow);

  audio.addCue(15.2, createArrow);

  audio.addCue(15.7, createArrow);

  audio.addCue(16.2, createArrow);

  audio.addCue(16.7, createArrow);

  audio.addCue(17.2, createArrow);

  audio.addCue(17.6, createArrow);

  audio.addCue(18.0, createArrow);

  audio.addCue(18.5, createArrow);

  audio.addCue(19.0, createArrow);

  audio.addCue(19.5, createArrow);

  audio.addCue(19.9, createArrow);

  audio.addCue(20.3, createArrow);

  audio.addCue(20.8, createArrow);

  audio.addCue(21.3, createArrow);

  audio.addCue(21.8, createArrow);

  audio.addCue(22.3, createArrow);

  audio.addCue(22.6, createArrow);

  audio.addCue(23.1, createArrow);

  audio.addCue(23.6, createArrow);

  audio.addCue(24.1, createArrow);

  audio.addCue(24.6, createArrow);

  audio.addCue(25.1, createArrow);

  audio.addCue(25.4, createArrow);

  audio.addCue(25.9, createArrow);

  audio.addCue(26.4, createArrow);

  audio.addCue(26.9, createArrow);

  audio.addCue(27.4, createArrow);

  audio.addCue(27.9, createArrow);

  audio.addCue(28.3, createArrow);

  audio.addCue(28.8, createArrow);

  audio.addCue(29.3, createArrow);

  audio.addCue(29.6, createArrow);

  audio.addCue(30.3, createArrow);

  audio.addCue(30.8, createArrow);

  audio.addCue(31.2, createArrow);

  audio.addCue(31.7, createArrow);

  audio.addCue(32.7, createArrow);

  audio.addCue(33.6, createArrow);

  slider = createSlider(0, 1, 0.5, 0.10);

}

​

function draw() {

  background(backgroundColor);

  //audio

  let level = amplitude.getLevel();

  detectBeat(level);

  audio.setVolume(slider.value());

  //see:function points

  strokeWeight(2);

  points (300,200,100,20);

  points (100,200,100,20);

  points (200,300,100,20);

  points (200,100,100,20);

  points (300,300,100,20);

  points (100,100,100,20);

  points (100,300,100,20);

  points (300,100,100,20);

  fill(200);

  square (200,200,100,20);

  //class function

  for (let i = 0; i < arrows.length; i++){

    arrows[i].move();

    arrows[i].show();

    arrows[i].miss(200,200);

  }

  //moveable square

  fill(255,60,60,80);

  rect(rectx, recty, 100, 100,20);

  //function for when key is pressed

  //top

  if (keyIsDown(87)){

    recty = 100;

  } 

  //left

  if (keyIsDown(65)){

    rectx = 100;

  }

  //bottom

  if (keyIsDown(83)){

    recty = 300;

  }

  //bottom

  if (keyIsDown(88)){

    recty = 300;

  }

  //right

  if (keyIsDown(68)){

    rectx = 300;

  }

  //topleft

  if (keyIsDown(81)){

    rectx = 100;

    recty = 100;

  }

  //topright

  if (keyIsDown(69)){

    rectx = 300;

    recty = 100;

  }

  //bottomleft

  if (keyIsDown(90)){

    rectx = 100;

    recty = 300;

  }

  //bottomright

  if (keyIsDown(67)){

    rectx = 300;

    recty = 300;

  }

  textSize(32);

  text (score, 20,480);

  //score text

  if (timer > 0){

  textSize(32);

  text(result,200,480);

  timer -=1;

  }

}

​

//function to return square to original position when key is released

function keyReleased() {

  if (rectx === 0) {

    rectx = rectx;

  } else {

    rectx = 200;

  }

    if (recty === 0) {

    recty = recty;

  } else {

    recty = 200;

  }

  return false;

}

//function for clicking on beats

function keyPressed() {

  //top

    if (keyCode === 87){

      result = arrows[0].contains(200,100);

      arrows.splice(0,1);

    }

  //left

    if (keyCode === 65){

      result = arrows[0].contains(100,200);

      arrows.splice(0,1);

    }

  //bottom

    if (keyCode === 83 || keyCode === 88){

      result = arrows[0].contains(200,300);

      arrows.splice(0,1);

    }

  //right

    if (keyCode === 68){

      result = arrows[0].contains(300,200);

      arrows.splice(0,1);

    }

  //topleft

    if (keyCode === 81){

      result = arrows[0].contains(100,100);

      arrows.splice(0,1);

    }

  //topright

    if (keyCode === 69){

      result = arrows[0].contains(300,100);

      arrows.splice(0,1);

    }

  //bottomleft

    if (keyCode === 90){

      result = arrows[0].contains(100,300);

      arrows.splice(0,1);

    }

  //bottomright

    if (keyCode === 67){

      result = arrows[0].contains(300,300);

      arrows.splice(0,1);

    }

}

​

function points (x,y,s,tl){

  fill(210);

  square (x,y,s,tl);

}

​

function createArrow (){

  let direction = int(random(8));

  //topleft

  if (direction == 0){

    append(arrows, new arrow (-100,-100,2.5,2.5,148,0,211));

  }

  //top

    if (direction == 1){

    append(arrows, new arrow (200,-100,0,2.5,75,0,130));

  }

  //topright

    if (direction == 2){

    append(arrows, new arrow (500,-100,-2.5,2.5,0,0,255));

  }

    //bottomleft

  if (direction == 3){

    append(arrows, new arrow (-100,500,2.5,-2.5,255,0,0));

  }

  //bottom

    if (direction == 4){

    append(arrows, new arrow (200,500,0,-2.5,255,127,0));

  }

  //bottomright

    if (direction == 5){

    append(arrows, new arrow (500,500,-2.5,-2.5,255,255,0));

  }

    //left

    if (direction == 6){

    append(arrows, new arrow (-100,200,2.5,0,255,0,127));

  }

  //right

    if (direction == 7){

    append(arrows, new arrow (500,200,-2.5,0,0,255,0));

  }

}

​

//functions for beat

function detectBeat(level) {

  if (level > beatCutoff && level > beatThreshold){

    onBeat();

    beatCutoff = level *1.2;

    framesSinceLastBeat = 0;

  } else {

    if (framesSinceLastBeat <= beatHoldFrames){

      framesSinceLastBeat++;

    }

    else{

      beatCutoff *= beatDecayRate;

      beatCutoff = Math.max(beatCutoff, beatThreshold);

    }

  } 

}

​

function onBeat (){

  backgroundColor = color( random(0,255), random(0,255), random(0,255));

}

​

class arrow {

  constructor (x,y,xs,ys,r,g,b) {

    this.x = x;

    this.y = y;

    this.xspeed = xs;

    this.yspeed = ys;

    this.s = 100;

    this.tl = 20;

    this.c = color(r,g,b);

  }

  move(){

    this.x += this.xspeed;

    this.y += this.yspeed;

  }

  show(){

    fill(this.c);

    square(this.x, this.y, this.s, this.tl);

  }

  contains (rectx,recty){

    let distance = dist(this.x, this.y, rectx, recty);

    if (distance < 20){

      timer = 50

      score += 50

      return "Perfect";

    } else if (distance < 50){

      score += 25

      timer = 50

      return "Okay";

    } else {

      score += 0

      timer = 50

      return "Terrible";

    }

  }

  miss (rectx,recty){

    let distance = dist(this.x, this.y, rectx, recty);

    if (distance < 20){

      score += 0

      timer = 50

      result = "Miss";

      arrows.splice(0,1);

    }

  }

}

​

​

//*REFERENCES*

//below: code reference for background color

//https://github.com/therewasaguy/p5-music-viz/blob/gh-pages/demos/01d_beat_detect_amplitude/sketch.js

//https://p5js.org/reference/#/p5/class

//https://p5js.org/reference/#/p5/if-else

//https://p5js.org/reference/#/p5/square

//https://p5js.org/reference/#/p5/rect

//https://p5js.org/reference/#/p5/keyReleased

//https://p5js.org/reference/#/p5/keyIsDown

//https://p5js.org/reference/#/p5/fill

//https://p5js.org/reference/#/p5/append

//https://p5js.org/reference/#/p5/splice

//P5 Sound Functions (ex.load/play sound, preload soundfile)

//https://p5js.org/examples/structure-functions.html

//my other sketches