let blobs = [];

let ox;

let fft;

let mic;

let audioIn;

let selector;

let devices = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  tris[0] = new Tri(random(width), random(height), 20, 255, 0, 255, 6, random(-0.02, 0.02));

  blobs[0] = new Blob(random(width), random(height), 20, 255, 0, 255, 6, random(-0.02, 0.02));

  //setInterval(generate, 250);

  fft = new p5.FFT();

  // fft.setInput(ox);

  // mic = new p5.AudioIn();

  audioIn = new p5.AudioIn();

  audioIn.getSources(gotSources);

  //  mic.start();

  //  audioIn.start();

  // // fft.setInput(mic);

  //   fft.setInput(audioIn);

  //  ox.loop();

  // background(220)

​

​

}

​

function gotSources(deviceList) {

​

  selector = createSelect();

  selector.position(0, 0)

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

    selector.option(deviceList[i].label);

    //console.log(deviceList[i].label) 

    devices[i] = [i, deviceList[i].label]

  }

​

​

  if (deviceList.length > 0) {

​

    //set the source to the first item in the deviceList array

    audioIn.setSource(0); // 3 is loopback audio for me

    let currentSource = deviceList[audioIn.currentSource];

   // text('set source to: ' + currentSource.deviceId, 5, 20, width);

    //console.log(deviceList);

     console.log('set source to: ' + currentSource.label);

    audioIn.start();

    // fft.setInput(mic);

    fft.setInput(audioIn);

    selector.selected(deviceList[0].label);

  }

  selector.changed(swapaudio);

}

​

function swapaudio() {

  let src = selector.value();

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

    if (src == devices[i][1]) {

      audioIn.setSource(devices[i][0]); // 3 is loopback audio for me

    }

  }

}

​

function preload() {

   //ox = loadSound("assets/pigeon.mp3");

   // ox = loadSound("assets/1.mp3");

}

​

​

​

function draw() {

  background(0);

  fill(0);

  rect(0, height - 50, width, 50);

​

  let spectrum = fft.analyze();

​

  let bass = fft.getEnergy("bass");

  let lowMid = fft.getEnergy("lowMid");

  let mid = fft.getEnergy("mid");

  let highMid = fft.getEnergy("highMid");

  let treble = fft.getEnergy("treble");

​

​

  let waveform = fft.waveform();

  noFill();

  beginShape();

  stroke(255, 0, 0); // waveform is red

  strokeWeight(1);

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

    let x = map(i, 0, waveform.length, 0, width);

    let y = map(waveform[i], -1, 1, 0, height / 3);

    vertex(x, y);

  }

  endShape();

​

​

  if (bass > 230) {

    generateBlob();

  }

  if (mid > 170 && highMid > 150) {

    generateTri();

  }

​

​

​

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

  //         blobs[i].grow();

  //         blobs[i].revolve();

  //         blobs[i].render();

  //     }

​

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

  //         if (blobs.length > 0) {

​

  //             if (blobs[i].size > blobs[i].psz * 4) {

  //                 blobs.splice(i, 1);

  //             }

  //         }

​

  //     }

​

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

  //     tris[i].grow();

  //     tris[i].revolve();

  //     tris[i].render();

  // }

​

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

  //         if (tris.length > 0) {

  //             if (tris[i].size > tris[i].psz * 4) {

  //                 tris.splice(i, 1);

  //             }

  //         }

​

  //     }

​

  fill(0);

  stroke(255);

  rect(0, height - 50, 100, -(bass * 1.5));

  stroke(255);

  rect(0, height - 50, 100, 50);

  fill(255);

  noStroke();

  textSize(12);

  text("Bass :" + int(bass), 10, height - 25);

​

  fill(0);

  stroke(255);

  rect(100, height - 50, 100, -(lowMid * 1.5));

  stroke(255);

  rect(100, height - 50, 100, 50);

  fill(255);

  noStroke();

  textSize(12);

  text("Low Mid :" + int(lowMid), 110, height - 25);

​

  fill(0);

  stroke(255);

  rect(200, height - 50, 100, -(mid * 1.5));

  stroke(255);

  rect(200, height - 50, 100, 50);

  fill(255);

  noStroke();

  textSize(12);

  text("Mid :" + int(mid), 210, height - 25);

​

  fill(0);

  stroke(255);

  rect(300, height - 50, 100, -(highMid * 1.5));

  stroke(255);

  rect(300, height - 50, 100, 50);

  fill(255);

  noStroke();

  textSize(12);

  text("High Mid :" + int(highMid), 310, height - 25);

​

  fill(0);

  stroke(255);

  rect(400, height - 50, 100, -(treble * 1.5));

  stroke(255);

  rect(400, height - 50, 100, 50);

  fill(255);

  noStroke();

  textSize(12);

  text("Treble :" + int(treble), 410, height - 25);

  stroke(255);

  //   line(0, height - 50, 500, height - 50);

​

  noStroke();

  //stroke(255,255,0);

​

  ///FFT MADNESS

  //     fill(255, 0, 255);

  //     beginShape();

  //     for (var i = 0; i < spectrum.length; i++) {

  //         var y = map(spectrum[i], 0, 255, height /2, height/2 - 100);

  //         var x = map(i, 0, spectrum.length, width/2, width);

  //         vertex(x, y);

  //     }

  //     vertex(width/2, height/2 );

  //     endShape();

​

  //     beginShape();

  //     for (var i = 0; i < spectrum.length; i++) {

  //         var y = map(spectrum[i], 0, 255, height /2, height/2 + 100);

  //         var x = map(i,0, spectrum.length, width/2, width);

  //         vertex(x, y);

  //     }

  //     vertex(width/2, height/2 );

  //     endShape();

​

  //     beginShape();

  //     for (var i = 0; i < spectrum.length; i++) {

  //         var y = map(spectrum[i], 0, 255, height /2, height/2 - 100);

  //          var x = map(i,spectrum.length,0,0, width/2);

  //         vertex(x, y);

  //     }

  //     vertex(width/2, height/2 );

  //     endShape();

​

  //     beginShape();

  //     for (var i = 0; i < spectrum.length; i++) {

  //         var y = map(spectrum[i], 0, 255, height /2, height/2 + 100);

  //         var x = map(i,spectrum.length,0,0, width/2);

  //         vertex(x, y);

  //     }

  //     vertex(width/2, height/2 );

  //     endShape();

  // FFT POINTS

  stroke(0, 255, 255)

  //beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 - 100);

    var x = map(i, 0, spectrum.length, width / 2, width);

    point(x, y);

  }

  point(width / 2, height / 2);

  // endShape();

​

  //beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 + 100);

    var x = map(i, 0, spectrum.length, width / 2, width);

    point(x, y);

  }

  vertex(width / 2, height / 2);

  // endShape();

​

  // beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 - 100);

    var x = map(i, spectrum.length, 0, 0, width / 2);

    point(x, y);

  }

  vertex(width / 2, height / 2);

  // endShape();

​

  // beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 + 100);

    var x = map(i, spectrum.length, 0, 0, width / 2);

    point(x, y);

  }

  point(width / 2, height / 2);

  // endShape();

  ///morepoints

  stroke(255, 0, 255)

  //beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 - 90);

    var x = map(i, 0, spectrum.length, width / 2, width);

    point(x, y);

  }

  point(width / 2, height / 2);

  // endShape();

​

  //beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 + 90);

    var x = map(i, 0, spectrum.length, width / 2, width);

    point(x, y);

  }

  vertex(width / 2, height / 2);

  // endShape();

​

  // beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 - 90);

    var x = map(i, spectrum.length, 0, 0, width / 2);

    point(x, y);

  }

  vertex(width / 2, height / 2);

  // endShape();

​

  // beginShape();

  for (var i = 0; i < spectrum.length; i++) {

    var y = map(spectrum[i], 0, 255, height / 2, height / 2 + 90);

    var x = map(i, spectrum.length, 0, 0, width / 2);

    point(x, y);

  }

  point(width / 2, height / 2);

​

  noStroke();

  noFill();

}

​

function generateTri() {

  var red;

  var blue

  var green;

​

  var val = [0, 255];

  red = 255;

  green = 0;

  blue = 255;

​

  //    red = random(255);

  //    green = random(255);

  //    blue = random(255);

  // tris.push(new Tri(random(width), random(height), random(20, 35), red, blue, green, 6, random(-0.02, 0.02)));

  tris.push(new Tri(width / 2, height / 2, random(20, 35), red, blue, green, 6, random(-0.5, 0.5)));

​

}

​

function generateBlob() {

  var red;

  var blue

  var green;

​

  var val = [0, 255];

​

  red = 0;

  green = 0;

  blue = 0;

  //    red = random(255);

  //    green = random(255);

  //    blue = random(255);

  //  blobs.push(new Blob(random(width), random(height), random(45, 65), red, blue, green, 1.5, random(-0.02, 0.02)));

  blobs.push(new Blob(width / 2, height / 2, random(45, 65), red, blue, green, 1.5, random(-0.02, 0.02)));

​

}

​

function mousePressed() {

  // if (ox.isPlaying()) {

  //     ox.pause();

  // } else if (!ox.isPlaying()) {

  //     ox.play();

  // }

​

  tris.push(new Tri(mouseX, mouseY, random(20, 35), 255, 255, 255, 6, random(-0.02, 0.02)));

​

}

​

class Blob {

​

  constructor(x, y, size, r, g, b, rot, theta) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.r = 255;

    this.g = 0;

    this.b = 255;

    this.theta = theta;

    this.speed = rot;

    this.angle = 0;

    this.psz = size;

  }

​

  grow() {

    this.size = this.size * this.speed;

    //console.log(this.angle);

​

  }

​

  revolve() {

    this.angle = this.angle + this.theta;

    //console.log(this.angle);

​

  }

​

  render() {

    strokeWeight(5)

    stroke(this.r, this.g, this.b);

    fill(this.r, this.g, this.b);

    push();

    translate(this.x, this.y);

    // rotate(this.angle);

    ellipse(0, 0, this.size, this.size);

    pop();

  }

}

​

class Tri {

​

  constructor(x, y, size, r, g, b, rot, theta) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.r = r;

    this.g = g;

    this.b = b;

    this.theta = theta;

    this.speed = rot;

    this.angle = 0;

    this.psz = size;

  }

​

  grow() {

    this.size = this.size + this.speed;

    //  console.log(this.angle);

  }

​

  revolve() {

    this.angle = this.angle + this.theta;

    //console.log(this.angle);

​

  }

​

  render() {

    strokeWeight(5)

    stroke(this.r, this.g, this.b);

    fill(this.r, this.g, this.b);

    // noFill();

    push();

    translate(this.x, this.y);

    rotate(this.angle);

    triangle(0, 0 - (this.size * 2 / 3), 0 - ((this.size / 3) * sqrt(3)), 0 + this.size / 3, 0 + ((this.size / 3) * sqrt(3)), 0 + this.size / 3);

    pop();

  }

}