​

​

let trebEnergy, midEnergy, bassEnergy;

let fft, spectrum;

​

function setup() {

  createCanvas(400, 400);

  background (0);

  mic = new p5.AudioIn(); 

  mic.start(); 

​

  fft = new p5.FFT();

  fft.setInput(mic);

​

}

​

function changeBassColor(){

  let level = mic.getLevel();

  print(level);

  if (level <= 0.02) {

    noStroke();

    fill("DimGray"); 

    }

  if (level > 0.02 && level <= 0.04) {

    noStroke();

    fill("LightSteelBlue");

    }

  if (level > 0.04 && level <= 0.06) {

    noStroke();

    fill("Salmon") 

    }

  if (level > 0.06 && level <= 0.08) {

    noStroke();

    fill("Maroon") 

    }

  if (level > 0.08 && level < 0.1) {

    noStroke();

    fill("purple"); 

    }

}

​

function changeMidColor() {

  let level = mic.getLevel();

  print(level);

  if (level <= 0.02) {

    noStroke();

    fill("DimGray") 

    }

  if (level > 0.02 && level <= 0.04) {

    noStroke();

    fill("LightSteelBlue"); 

    }

  if (level > 0.04 && level <= 0.06) {

    noStroke();

    fill("Maroon") //teal

    }

  if (level > 0.06 && level <= 0.08) {

    noStroke();

    fill(18, 136, 139,150); 

    }

  if (level > 0.08 && level < 0.1) {

    noStroke();

    fill("MediumTurquoise"); 

    }

}

​

function changeTrebColor() {

  let level = mic.getLevel();

  print(level);

  if (level <= 0.02) {

    noStroke();

    fill("MediumTurquoise") 

    }

  if (level > 0.02 && level <= 0.04) {

    noStroke();

    fill("LightSteelBlue") 

    }

  if (level > 0.04 && level <= 0.06) {

    noStroke();

    fill("Salmon"); 

    }

  if (level > 0.06 && level <= 0.08) {

    noStroke();

    fill("Maroon"); // orange

    }

  if (level > 0.08 && level < 0.1) {

    noStroke();

    fill("purple"); 

    }

}

​

function draw() {

  //analyze frequency

  let level = mic.getLevel();

  print(level);

  spectrum = fft.analyze();

  trebEnergy = fft.getEnergy("treble");

  midEnergy= fft.getEnergy("mid");

  bassEnergy = fft.getEnergy("bass");

  background ("#CD5C5C"); 

  //ellipses appearing on background changing size depending on detected frequency and loop

  //bass ellipses

  for (var a = 0; a <= width; a += 100) {

    for (var b = 0; b <= height; b += 100) {

      changeBassColor();

      ellipse (a, b, bassEnergy, height/4);

    }

   }

  // mid energy ellipses

  for (var a = 50; a <= 350; a += 100) {

    for (var b = 50; b <= 350; b += 100) {

      changeMidColor();

      ellipse (a, b, midEnergy);

      //ellipses appearing on background changing size depending on detected frequency

    }

  }

  //treble ellipses

  for (var a = 0; a <= width; a += 100) {

    for (var b = 0; b <= height; b += 100) {

      changeTrebColor();

      ellipse (a, b, trebEnergy, width/10, height/4);

    }

   }

  for (var a = 50; a <= width; a += 100) {

    for (var b = 50; b <= height; b += 100) {

      changeTrebColor();

      ellipse (a, b, trebEnergy);

    }

   }

  rectMode(CENTER);

​

  fill(255, 255, 255, 30); //white

  rect(200,200,350,350,10);

​

  fill(255, 255, 255, 20); //white

  rect(200,200,300,300,10);

  fill(255, 255, 255, 10); //white

  rect(200,200,250,250,10);

  fill(255, 255, 255, 20); //white

  rect(200,200,200,200,10);

  fill(255, 255, 255, 20); //white

  rect(200,200,150,150,10);

  fill(255, 255, 255, 20); //white

  rect(200,200,100,100,10);

}

​