var step = 20;

var mic, vol;

var audioActivated = false;

​

function preload() {

  // img = loadImage('pics/Composition.jpg');

}

​

function setup() {

  createCanvas(600, 600);

  mic = new p5.AudioIn();

  mic.start();

​

  userStartAudio().then(function() {

    audioActivated = true;

  });

}

​

function draw() {

  background(0);

​

  if (audioActivated == true) {

  } else {

    text("Touch or click to activate audio.", width / 2, height - 20)

  }

​

  vol = mic.getLevel();

​

​

  // red

  rectGrid(step, 158, 15, 425, 410, 220, 20, 60);

​

  // blue

  rectGrid(step, 21, 447, 114, 132, 0, 0, 139);

​

  // yellow

  rectGrid(step, 550, 524, 36, 57, 255, 255, 0);

​

  // left top white

  rectGrid(step, 18, 18, 115, 160, 255, 255, 255);

​

  // left middle white

  rectGrid(step, 18, 223, 115, 200, 255, 255, 255);

​

  // middle bottom white

  rectGrid(step, 160, 448, 365, 130, 255, 255, 255);

​

  // right 2nd from bottom white

  rectGrid(step, 550, 448, 36, 55, 255, 255, 255);

​

}

​

​

function rectGrid(step, posX, posY, wid, hei, r, g, b) {

​

  rectMode(CENTER);

​

  for (var i = 0; i <= wid; i = i + step) {

    for (var j = 0; j <= hei; j += step) {

      var d = dist(mouseX, mouseY, posX + i, posY + j);

      noStroke();

      fill(r, g, b, (1 / d) * 255 * 20);

​

      // rect(posX + i, posY + j, step, step);

      // ellipse(posX + i, posY + j, step * vol * 30, step * vol * 30);

      ellipse(

        posX + i + random(-step, step),

        posY + j + random(-step, step),

        step * vol * 30, step * vol * 30

      );

​

    }

  }

}

​

​

function touchStarted() {

  if (getAudioContext().state !== 'running') {

    getAudioContext().resume();

  }

}

​

function mousePressed() {

  if (getAudioContext().state !== 'running') {

    getAudioContext().resume();

  }

​

}