* Audio: 'Ain't we got fun' performed by the Benson Orchestra

 *        Public Domain. 

 *        http://www.digitalhistory.uh.edu/music/music.cfm

 */

​

let song;

let fft;

​

// The easing variable will control how responsive the

// waveform is. Larger = slower to respond.

// Thie slider will allow the user to adjust the easing

let sldEasing;

​

// The sampleTo variable will control how many samples

// of the waveform we check up to each time.

let sldSampleTo;

​

// The samplesPerPt variable will controll how many samples

// we skip over each time through the loop

let sldSamplesPer;

​

// How much to amplify the vertical movement

let sldMultiply;

​

// Store a permanent copy of the waveform

// So we can 'ease' between one frame and the next

let previousWave = [];

​

function preload(){

  song = loadSound('assets/aint_we_got_fun_benson_orch.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  strokeWeight(4);

  fill(255);

  stroke(255);

  song.play();

  fft = new p5.FFT();  

  // Create a slider to control the easing

  sldEasing = createSlider(1, 1000, 200);

  sldEasing.position(10, 10);

  // Create a slider to control how many samples to go to

  sldSampleTo = createSlider(1, 1023, 240, 1);

  sldSampleTo.position(10, 30);

  // Create a slider for the number of samples per point

  sldSamplesPer = createSlider(1, 512, 20);

  sldSamplesPer.position(10, 50);

  // Create a slider to control the vertical magnification

  sldMultiply = createSlider(0.1, 50, 10, 0.1);

  sldMultiply.position(10, 70);

}

​

function draw() {

  background(0);

  // Store the current easing in a temporary variable

  let easing = sldEasing.value();

​

  // Store the number of samples to check to

  let sampleTo = sldSampleTo.value();

  // Store the number of samples per point

  let samplesPer = sldSamplesPer.value();

  // Store the amount to multiply vertically

  let multiply = sldMultiply.value();

​

  // Draw labels for the sliders

  noStroke();

  text("Easing: " + easing, 150, 25);

  text("Sample to: " + sampleTo, 150, 45);   

  text("Samples per: " + samplesPer, 150, 65);

  text("Multiply: " + multiply, 150, 85);

  stroke(255);

  // Get a temporary copy of the current waveform

  let currentWave = fft.waveform();

  // Initialise previous waveform array to be same

  // length as currentWave on first frame (it starts

  // out empty).

  if (previousWave.length == 0){

    previousWave = new Array(currentWave.length)

    // Fill it with zeros

    previousWave.fill(0);

  }

  // Record the previous x, y so we can draw a line

  let px = 0;

  let py = 0;

  // Translate the y = 0, position to height / 2

  translate(0, height / 2);

  for (let i = 0; i <= sampleTo; i += samplesPer){

    // For each element of the waveform, compare the 

    // current value to the previous value. Move the

    // previous value *part* of the way towards the

    // current value.

    let diff = currentWave[i] - previousWave[i];

    previousWave[i] += diff / easing;

    // Only actually display the first numSamples of points

    if (i <= sampleTo){

      // Note that we map to the number of samples

      let x = map(i, 0, sampleTo, 0, width);

      // Calculate mapped y limit based on multiply slider

      let yMap = height / 2 * multiply;

      let y = map(previousWave[i], -1, 1, -yMap, yMap);

      // If we are past the first point, draw a line

      if (i > 0){

        strokeWeight(1);

        line(px, py, x, y);        

      }

      strokeWeight(4);

      point(x,y);   

​

      // update px, py to be equal to x, y

      px = x;

      py = y;

    }

  }

}

​

​