River

//background radient code by https://happycoding.io/tutorials/p5js/for-loops/vertical-gradient

​

let river;

let amplitude;

let level;

let c_1;

​

​

function preload() {

  river = loadSound("West.mp3");

}

​

function setup() {

  createCanvas(400, 400);

  river.play();

  amplitude = new p5.Amplitude();

  noSmooth();

}

​

function draw() {

  // background;

  const m = 100;

  const topR = 255 * noise(frameCount / m);

  const topG = 255 * noise(1000 + frameCount / m);

  const topB = 255 * noise(2000 + frameCount / m);

  const bottomR = 255 * noise(3000 + frameCount / m);

  const bottomG = 255 * noise(4000 + frameCount / m);

  const bottomB = 255 * noise(5000 + frameCount / m);

​

  const topColor = color(topR, topG, topB);

  const bottomColor = color(bottomR, bottomG, bottomB);

​

  for (let y = 0; y < height; y++) {

    const lineColor = lerpColor(topColor, bottomColor, y / height);

​

    stroke(lineColor);

    line(0, y, width, y);

  }

​

  //shapes and amplitude

  level = amplitude.getLevel(); // repeat over and over

  print(level);

  size = map(level, 0, 0.75, 100, 50);

  size_1 = map(level, 0, 0.95, 180, 100);

  size_2 = map(level, 0, 0.45, 70, 30);

  c_1 = map(level, 0, 0.3, 30, 255);

​

  fill(246, 190, c_1);

  rect(110, 120, size_1,size_1);

​

  fill(23, c_1, 65);

  strokeWeight(2);

  stroke(0);

  circle(195, 200, size);

​

  fill(c_1, 130, 90);

  circle(200, 200, size_2);  

}