Audio visualizer

let song;

let mic;

let fft;

​

let micOn;

let input;

​

let wavePos = [];

let animPoint;

let pct = [];

let curveXPoints = [];

let curveYPoints = [];

let circleSize = 350;

​

let inColor;

let outColor;

​

let balls = [];

let initialBallNum = 7;

​

let stars = [];

let initialStarNum = 200;

​

let lightTimer = 0;

​

const FRONT = 0;

const BACK = 1;

​

function preload() {

  song = loadSound("Stellar Wind - Unicorn Heads.mp3");

}

​

function setup() {

  let canvasSize = min(windowWidth, windowHeight);

  createCanvas(canvasSize, canvasSize);

  micOn = false;

  mic = new p5.AudioIn();

  fft = new p5.FFT();

​

  inputSelect();

​

  inColor = color("
#333d9e");

  outColor = color("
#bbbeff");

​

  for (let i = 0; i < initialBallNum; i++) {

​

    let ball = new Ball();

    ball.setPosGround(floor(random(0, 2)));

    ball.setStartingY();

    ball.setRandomY();

​

    if (balls.length == 0) {

      balls.push(ball);

    }

    else {

      for (let j = 0; j < balls.length; j++) {

        if (ball.getReflexionY() < balls[j].getReflexionY()) {

          balls.splice(j + 1, 0, ball);

          break;

        } else {

          if (j == balls.length - 1) {

            balls.splice(0, 0, ball);

            break;

          }

        }

      }

    }

  }

​

  for (let i = 0; i < initialStarNum; i++) {

    stars[i] = new Star();

  }

}

​

function draw() {

  background(0);

​

  //Sky

  for (let i = 0; i <= width / 2; i += 50) {

    rectMode(CENTER);

    colorMode(RGB, 255);

    fill(3, 0, 24, map(i, 0, width / 2, 0, 255));

    noStroke();

    rect(width / 2, height / 2, width - i, height - i, 50);

  }

​

  //Stars

  for (let i = stars.length - 1; i >= 0; i--) {

    stars[i].display();

  }

​

  //Rectangle ground

  fill('
#0d0033');

  noStroke();

  rectMode(CENTER);

  rect(width / 2, height - 75, width, 150);

​

  for (let i = 0; i <= width / 2; i += 10) {

    colorMode(RGB, 255);

    fill(19, 0, 75, map(i, 0, width / 2, 0, 255));

    rect(width / 2, height - ((150 - i) / 2), width - i, 150 - i, 50);

  }

​

  for (let i = 0; i <= width; i += 20) {

    fill(255);

    rect(i, height - 140, 8, 2, 50);

  }

​

​

  //Background colored balls

  for (let i = balls.length - 1; i >= 0; i--) {

    if (balls[i].getStartingY() == BACK) {

      balls[i].move();

​

      if (balls[i].getPositionY() <= -balls[i].size) {

        balls.splice(i, 1);

​

        let ball = new Ball();

        ball.setPosGround(floor(random(0, 2)));

        ball.setStartingY();

​

        for (let j = balls.length - 1; j >= 0; j--) {

          if (ball.getReflexionY() < balls[j].getReflexionY()) {

            balls.splice(j + 1, 0, ball);

            break;

          } else {

            if (j == 0) {

              balls.splice(j, 0, ball);

              break;

            }

          }

        }

      }

​

      balls[i].display();

    }

  }

​

  //Spot lights

  movingLight();

​

  push();

  translate(width, 0);

  scale(-1, 1);

  movingLight();

  pop();

​

  //Sound visual

  fft.setInput(input);

  let wave = fft.waveform();

​

  if (pct[0] == undefined) {

    //Sets all the initial points value to 0

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

      pct[i] = 0;

      wavePos[i] = [0, 0];

    }

  }

​

  //Moves all of the points according to the soundwave

  let pointNum = 10;

  for (let i = 0; i < pointNum; i++) {

    let index = floor(map(i, 0, pointNum, 0, wave.length));

​

    if (pct[index] == 0) {

      wavePos[index][0] = wavePos[index][1];

      wavePos[index][1] = wave[index];

    }

​

    animPoint = lerp(wavePos[index][0], wavePos[index][1], pct[index]);

    pct[index] += 0.3;

​

    if (pct[index] >= 1) {

      pct[index] = 0;

    }

​

    let amplitude = 350;

    let h = constrain(animPoint * amplitude, 0, 150);

    let a = cos(radians(map(i, 0, pointNum, 0, 360))) * h;

    let o = sin(radians(map(i, 0, pointNum, 0, 360))) * h;

​

    curveXPoints[i] = width / 2 + a + cos(radians(map(i, 0, pointNum, 0, 360))) * (circleSize/2);

    curveYPoints[i] = height / 2 + o + sin(radians(map(i, 0, pointNum, 0, 360))) * (circleSize/2);

  }

​

  //Creates dots that follow the path of the sound wave

  let dotID = 0;

  for (let i = 0; i < pointNum; i++) {

    for (let j = 0; j < 1 - pointNum / 100; j += pointNum / 100) {

      noStroke();

​

      let x = curvePoint(curveXPoints[i % pointNum], curveXPoints[(i + 1) % pointNum], curveXPoints[(i + 2) % pointNum], curveXPoints[(i + 3) % pointNum], j);

      let y = curvePoint(curveYPoints[i % pointNum], curveYPoints[(i + 1) % pointNum], curveYPoints[(i + 2) % pointNum], curveYPoints[(i + 3) % pointNum], j);

​

      fill(255);

      circle(x, y, 5);

​

      push();

      translate(x, y);

      rotate(radians(125 + 360 / 100 * dotID));

​

      noStroke();

      fill(lerpColor(inColor, outColor, animPoint));

      rectMode(CENTER);

      rect(0, -20, 5, 20);

​

      pop();

​

      dotID++;

    }

  }

​

  //Second line of dots

  push();

  translate(width, height);

  rotate(radians(180));

  for (let i = 0; i < pointNum; i++) {

    for (let j = 0; j < 1 - pointNum / 100; j += pointNum / 100) {

      noStroke();

​

      let x = curvePoint(curveXPoints[i % pointNum], curveXPoints[(i + 1) % pointNum], curveXPoints[(i + 2) % pointNum], curveXPoints[(i + 3) % pointNum], j);

      let y = curvePoint(curveYPoints[i % pointNum], curveYPoints[(i + 1) % pointNum], curveYPoints[(i + 2) % pointNum], curveYPoints[(i + 3) % pointNum], j);

​

      fill(255);

      circle(x, y, 5);

    }

  }

  pop();

​

​

  //Middle circle

  for (let i = 0; i < 10; i += 2) {

    noFill();

    stroke(255, 10 + animPoint * 5);

    strokeWeight(20 + i * 2);

    circle(width / 2, height / 2, circleSize);

  }

​

  stroke(255);

  strokeWeight(20);

  circle(width / 2, height / 2, circleSize);

​

  for (let i = 0; i < 10; i += 2) {

    fill(255, 0.5 + animPoint / 10);

    noStroke();

    ellipse(width / 2, height - 75, circleSize + i * 2, 60 + i * 2);

  }

​

​

  //Forground colored balls

  for (let i = balls.length - 1; i >= 0; i--) {

    if (balls[i].getStartingY() == FRONT) {

      balls[i].move();

​

      if (balls[i].getPositionY() <= -balls[i].size) {

        balls.splice(i, 1);

​

        let ball = new Ball();

        ball.setPosGround(floor(random(0, 2)));

        ball.setStartingY();

​

        for (let j = balls.length - 1; j >= 0; j--) {

          if (ball.getReflexionY() < balls[j].getReflexionY()) {

            balls.splice(j + 1, 0, ball);

            break;

          } else {

            if (j == 0) {

              balls.splice(j, 0, ball);

              break;

            }

          }

        }

      }

      balls[i].display();

    }

  }

}

​

​

function movingLight() {

  //Spot lights

  lightTimer += 0.5;

  let spotPosition = sin(radians(lightTimer)) * 250;

  let spotSize = 200;

  noStroke();

  fill(255, 5);

  quad(-10, height / 4,

    spotPosition, height - (spotSize/2),

    spotPosition - spotSize, height - (spotSize/2),

    -10, height / 4 + spotSize);

​

  fill(255, 5 + 5 / 2);

  arc(spotPosition - (spotSize/2), height - (spotSize/2), spotSize, 35, 0, PI);

  fill(255, 5 / 2);

  arc(spotPosition - (spotSize/2), height - (spotSize/2), spotSize, 35, PI, TWO_PI);

}

​

function organize(i) {

  for (let j = 0; j < balls[i].length; j++) {

    if (i == j) {

      continue;

    } else if (balls[i].getPositionY() < balls[j].getPositionY()) {

      if (j < i) {

        balls.splice(j, 0, balls[i]);

        balls.splice(i + 1, 1);

      } else if (j > i) {

        balls.splice(j, 0, balls[i]);

        balls.splice(i, 1);

      }

    }

  }

}

​

function keyPressed() {

  if(key == 'm' || key == 'M'){

    inputSelect();

  }

}

​

function inputSelect(){

  if(micOn){

    song.loop();

    mic.stop();

    input = song;

    micOn = false;

  } else {

    song.pause();

    mic.start();

    input = mic;

    micOn = true;

  }

}