​

// better to trigger start and stop https://editor.p5js.org/thomasjohnmartinez/sketches/2ay47nReh

let noiseOffset = 0;

let startTime = 0;

let stillNoisy = 0;

let p5noise, osc, env, reverb;

let randomTime = 0;

​

function setup() {  

  p5noise = new p5.Noise();

  env = new p5.Envelope(0, 0.1);

  reverb = new p5.Reverb();

  p5noise.disconnect();

  p5noise.connect(env);

  env.disconnect();

  env.connect(reverb);

  p5noise.start();

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100);

  noStroke();

}

​

function scrub() {

  if (millis() < stillNoisy) {

  }

  randomTime = random(0.1, 3);

  reverb.set(randomTime);

  env.play();

  startTime = millis();

  stillNoisy = startTime + randomTime * 1000;

}

​

function draw() {  

  let hueValue = noise(noiseOffset) * 360;

  background(hueValue, 60, 60);

  let cols = floor(width / 120) + 1;

  let rows = floor(height / 120) + 1;

  let spacing = 120;

  let makeSound = false;

  for (let i = 0; i < cols; i++) {

    for (let j = 0; j < rows; j++) {

      let x = i * spacing + 60;

      let y = j * spacing + 60;

      let hueValue = noise(i * 0.1, j * 0.1, noiseOffset) * 360;

      let complementaryHue = (hueValue + 180) % 360;

      fill(complementaryHue, 60, 60);

      square(x-50, y-50, 100, 30);

      fill(complementaryHue, 70, 70);

      circle(x, y, 90);

      hit = collidePointCircle(mouseX, mouseY, x, y, 90);

      if(mouseX && mouseY && hit){ //change color!

          makeSound = true;

      }

​

    }

  }

  if (makeSound) {

    scrub();

  }

  noiseOffset += 0.003;

}

​