# Draw continuously animated line with FFT and amplitude

**URL:** <https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069>\
**Category:** Libraries\
**Created:** [December 3, 2019, 6:51am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069 "2019-12-03T06:51:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 3, 2019, 6:51am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069/1 "2019-12-03T06:51:13Z")

</div>

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…

[![](https://img.youtube.com/vi/jEwAMgcCgOA/hqdefault.jpg "17.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial") ](https://www.youtube.com/watch?v=jEwAMgcCgOA)

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 3, 2019, 11:09am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069/2 "2019-12-03T11:09:02Z")

</div>

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/61e91bb151c30f256f6d6ba8a849b0497dcaf728.png)

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 4, 2019, 12:24am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069/3 "2019-12-04T00:24:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 4, 2019, 2:25am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069/4 "2019-12-04T02:25:40Z")

</div>

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

example and try to combine it with my above code.

---

<div class="post-metadata">

**Author:** ![juju](https://avatars.discourse-cdn.com/v4/letter/j/258eb7/32.png) [@juju](https://discourse.processing.org/u/juju)\
**Post date:** [December 6, 2019, 3:43am UTC](https://discourse.processing.org/t/draw-continuously-animated-line-with-fft-and-amplitude/16069/5 "2019-12-06T03:43:25Z")

</div>

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