# How to make fft into a circle

**URL:** <https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255>\
**Category:** Libraries\
**Created:** [December 8, 2019, 8:01pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255 "2019-12-08T20:01:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lane](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Lane](https://discourse.processing.org/u/Lane)\
**Post date:** [December 8, 2019, 8:01pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255/1 "2019-12-08T20:01:42Z")

</div>

Hello! Is there a way to make this fft into a circle? Or other cool shape?

```auto
import processing.sound.*;

SoundFile file1;

FFT fft;
FFT fft2;
int bands = 128;
float smoothingFactor = 0.2;
float []sum = new float [bands];
int scale = 5;
float barWidth;

void setup() {
  fullScreen();

  barWidth = width/float(bands);

  file1 = new SoundFile(this, "song.mp3");  
  file1.play();
  fft2 = new FFT(this, bands);
  fft2.input(file1);
}

void draw() {
  background(255);

  fft2.analyze();
  pushMatrix();
  translate(width/2, height/2-1100);
  //beginShape();
  for (int i = 0; i < bands; i++) {
    sum[i] += (fft2.spectrum[i] - sum[i]) * smoothingFactor;
    ellipse(i*barWidth, height, barWidth, -sum[i]*height*scale);
  }
  //endShape();
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [December 8, 2019, 8:23pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255/2 "2019-12-08T20:23:35Z")

</div>

Check these two:

- [Drawing a shape around a central point - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/17779/drawing-a-shape-around-a-central-point)
- [https://www.youtube.com/watch?v=h\_aTgOl9J5I](https://www.youtube.com/watch?v=h_aTgOl9J5I)

The second is a YT video from Daniel explaining the concept.

EDIT:

- [Music Visualization - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/4050/music-visualization)
- [Circular Audio Visualizer - OpenProcessing](https://www.openprocessing.org/sketch/406994/) (p5.js)

Kf

---

<div class="post-metadata">

**Author:** ![Lane](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Lane](https://discourse.processing.org/u/Lane)\
**Post date:** [December 8, 2019, 9:22pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255/3 "2019-12-08T21:22:12Z")

</div>

Thanks for responding so soon! Do you know of any examples that are not in p5.js? I am very new to processing and have not branched out to anything else yet.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [December 8, 2019, 10:12pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255/4 "2019-12-08T22:12:06Z")

</div>

The first three are Processing java. If you don’t understand any of the concepts, start with simpler sketches. Have a look at the provided examples that come with Processing as well as these tutorials:

[https://processing.org/tutorials/](https://processing.org/tutorials/)

I recommend the 2D transformations.

Kf

---

<div class="post-metadata">

**Author:** ![Lane](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@Lane](https://discourse.processing.org/u/Lane)\
**Post date:** [December 8, 2019, 10:25pm UTC](https://discourse.processing.org/t/how-to-make-fft-into-a-circle/16255/5 "2019-12-08T22:25:57Z")

</div>

The first three are not all processing java. The first one is primarily p5.js and the second one is a p5.js video. Thanks anyway.