Draw continuously animated line with FFT and amplitude

p5.js Libraries
1

Hi Processing community, I am trying to recreate the effect from this video (8:28 minutes in) which draw the song amplitude as a continuous animated line. I got to the point where I have dots flying around, but have hard time translate the rest p5 code to Processing, especially have difficulty understanding the volhistory.push(vol) part and splice function. Thanks for helping.
PS: sorry, can’t seem to update .mp3 file here…

import processing.sound.*;
FFT fft;
SoundFile xmas;

int bands = 512;
float[] spectrum = new float[bands];

void setup() {
  size(512, 512);
  background(255);
  xmas = new SoundFile(this, "xmas.mp3");
  fft = new FFT(this, bands);
  fft.input(xmas);
  play();
}      

void draw() { 
  background(255);
  fftFunc();
}

void fftFunc() {
  fft.analyze(spectrum);
  for (int i = 0; i < bands; i++) {
    stroke(0);
    beginShape();
    vertex(i, height - spectrum[i]*height*50);
    endShape();
  }
}

void play() {
  xmas.play();
}
1 Like
2

one point is your for loop / vertex / creates points not connected points curve

import processing.sound.*;

SoundFile sample;
FFT fft;

int bands = 128;
float smoothingFactor = 0.2;
float[] sum = new float[bands];
int scale = 50;
float barWidth;

public void setup() {
  size(640, 360);
  background(255);
  barWidth = width/float(bands);
  sample = new SoundFile(this, "beat.aiff");
  sample.loop();
  fft = new FFT(this, bands);
  fft.input(sample);
}

public void draw() {
  background(125, 255, 125);
  stroke(200, 0, 0);
  strokeWeight(5);
  noFill();
  fft.analyze();
  beginShape();
  for (int i = 0; i < bands; i++) {
    sum[i] += (fft.spectrum[i] - sum[i]) * smoothingFactor;
    // rect(i*barWidth, height, barWidth, -sum[i]*height*scale);    // Draw the rectangles, adjust their height using the scale factor
    vertex(i*5, height - sum[i]*height*scale);
  }
  endShape();
}

that is the
FFTSpectrum example
modified to vertex line instead bars/rects

SOUND_FFT_vertex_line_graph
SOUND_FFT_vertex_line_graph1158×911 70 KB

1 Like
3

Thank you kll. I figured vertex not connected is the problem. However, I still couldn’t figure out how to make these lines moving forward like it is in the video at 8:28. One thing I did notice, the animated forward moving line is the sound volume of the song in the video not the frequency of the song like we are doing here right? which has 512 bands.

4

please find the
PDE / File / Examples /Libraries / Sound / Analysis / PeakAmplitude

example and try to combine it with my above code.

2 Likes
5

Thank you kll, will give it a try and post the code here ~

1 Like