Audio Visualization + Arrays

edited January 2017 in p5.js Library Questions


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 as the startover_music sketch!

var circles = [];

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

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

  amplitude = new p5.Amplitude();;

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



function draw() {

  rect(0,0,windowWidth, windowHeight);

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

Sign In or Register to comment.