Audio Visualization + Arrays

mads2

Hello!

I've created a sketch that has an array that draws circles to the amplitude of a song I've loaded within the code, for an iPad. I am now trying to modify those circles (ie. change the colors or add strokes at certain values of the amplitude with if then statements, however, I am not sure exactly where to place these if then statements. Everything I have tried has not affected the drawn visuals.

The key is to have the circles / visuals "draw" or do something even when your finger is not on the screen, in the last place you "touched". Also this sketch can be viewed on mmengle.com as the startover_music sketch!

var circles = [];


function preload() {
  sound = loadSound('assets/findingnemoegg.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);

  amplitude = new p5.Amplitude();
  sound.play();


  circles[0] = {
    display: function() {
      var level = amplitude.getLevel();
      var size = map(level, 0, 1, 10, 900);
      noStroke();
      fill(128,166,206,40);
      ellipse(touchX + level, touchY + level, size, size);


    }
  }

    }




function draw() {

  fill(255,8);
  rect(0,0,windowWidth, windowHeight);



  for (var i = 0; i < circles.length; i++) {
    circles[i].display();
  }

}