Raindrops on the lake 

​

  Dimity Miller, 2020 Original sketch:

  https://editor.p5js.org/dimitym/sketches/bcXQBxgBR

​

  This sketch visualises rain drops falling on water. The center drop should

  scale in size (number of droplet circles it draws) based on the amplitude

  level of the sound file. The size of the rain drops around it also scale in

  size based on the amplitude level.

​

  BUT, I have a bug - can you help? The level should go between 0 and 1, and

  I've mapped this to draw between 1 and 10 circle rings. However, it never

  draws more than 2 circle rings.

​

  References: Sound file taken from freesound.org

  https://freesound.org/people/macdaddyno1/sounds/396483/

*/

​

let song;

let analyzer;

​

function preload() {

  song = loadSound('data/rain.mp3');

}

​

function setup() {

  createCanvas(400, 400);

​

  //loop the rain continuously

  song.loop();

  //set up analyzer

  analyzer = new p5.Amplitude();

  analyzer.setInput(song);

​

  colorMode(HSB);

  background(220, 70, 100);

​

}

​

function draw() {

  //draw the background with low opacity to get lingering effect of rain drops

  background(220, 70, 100, 0.15);

​

  //number of raindrop circles based on amplitude level, mapped between 1 and 10

  let level = analyzer.getLevel();

  let numCircles = int(map(level, 0, 1, 1, 10));

  print(numCircles);

  //draw the raindrop circles in the center - a series of circles with increasing size

  for (let i = numCircles; i > 0; i--) {

    noStroke();

    fill(220, 40, 100, 0.1);

    circle(width / 2, height / 2, i * 15);

  }

​

  //draw a number of randomly placed raindrops where the size is based on the size of the center raindrop

  size = numCircles * 3;

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

    fill(220, 30, 100, 0.1);

    circle(random(width), random(height), size);

  }

​

}