# Create visuals from sound (wav file)

**URL:** <https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795>\
**Category:** Libraries\
**Created:** [November 28, 2021, 2:35pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795 "2021-11-28T14:35:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [November 28, 2021, 2:35pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/1 "2021-11-28T14:35:24Z")

</div>

Hi, i’m new here and just using Processing a little bit. Started by “messing” with existing code. : ) Now, what i’d like to do is generate statics visuals form the data contained in sound files. For exemple amplitude and frequencies.

My wish is to :

- load a sound
- take its values
- transform it to forms in 2D
- export it at a PNG or SVG

That’s it !

I’m trying with the minim library but know if it’s a good way to realize it. Any tips are very welcome.  
Thanks,  
P.

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [December 6, 2021, 9:30am UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/2 "2021-12-06T09:30:42Z")

</div>

Hi  
I do not understand why there are so many views but no reply, no questions. If i missed something, if you need some details, just tell me please. 🙂  
Thanks,  
P.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 6, 2021, 11:33am UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/3 "2021-12-06T11:33:34Z")

</div>

Hello,

There are resources here including a sound library with examples:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

There are tools there to get you started and help you realize and unleash your creative potential.

And there are examples that come with the Processing IDE. Check the menus.

One example:

> [@Drawing a spectogram 2D (or 3D) from a recorded audio](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/20):
>
> Hello, I was able to add a few lines of code to the Processing sound library examples and do this: Upper left is the FFT plot of amplitude (y) vs frequency (x) with color added to amplitudes for each frequency. Lower left is time (y) vs frequency (x) with color added to amplitudes for each frequency. Right side is frequency (radius) vs time (angle) with a rotating sweep of the same data from lower left plot. Time was updated each frame. I am posting this to demonstrate that…

> [@Pyo](#):
>
> I do not understand why there are so many views but no reply, no questions.

We are all volunteers here and may be busy with our lives.  
It is year end and that usually translates to a busy time for many.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [December 6, 2021, 1:16pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/4 "2021-12-06T13:16:14Z")

</div>

Thanks @glv for the tips. I have already read the documentation (not all) as i already coded some stuff with Processing.  
Of course i understand that everybody here act as a volunteer. My question was more to know if more explanations was needed.  
I continue to work on my project and will tell you how it grows.

---

<div class="post-metadata">

**Author:** ![robertesler](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@robertesler](https://discourse.processing.org/u/robertesler)\
**Post date:** [December 8, 2021, 11:24pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/5 "2021-12-08T23:24:49Z")

</div>

Hi @Pyo. I just saw this and wanted to give you my perspective. The biggest hurdle of analyzing audio is choosing which features you are going to try to extract from the signal. Most P3 audio libs have FFT support but without a deeper dive into what the data means or patterns within the data, FFT only goes so far. So it depends on what you want to extract, for example, pitch, noise, rhythm, timbre, speech, etc.  
Are you looking at certain features of your audio or just using the frequency domain (FFT) information? Knowing more about the feature extraction would help in providing more information.

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [December 9, 2021, 10:15am UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/6 "2021-12-09T10:15:27Z")

</div>

Hello @robertesler. Thank you for your pertinent reflection. This is a project around experimental music. I would like to use the pitch and tone of each sound, which are mainly frequencies. So I will certainly have to calculate the average or maximum pitch and tone (peak?) of each of them. Then retrieve this data to turn it into a graph.  
I don’t know if I’m clear enough? : )

---

<div class="post-metadata">

**Author:** ![robertesler](https://avatars.discourse-cdn.com/v4/letter/r/ec9cab/32.png) [@robertesler](https://discourse.processing.org/u/robertesler)\
**Post date:** [December 10, 2021, 10:23pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/7 "2021-12-10T22:23:28Z")

</div>

Though most sound libraries have some sort of support for raw FFT, it is not always the best way to get pitch information from a signal because the harmonics of a fundamental may have more energy than the fundamental making your detection provide varied results.  
I don’t think Minim provides pitch analysis other than typical FFT methods and the P3 sound library is similar. I have not used Beads, but there a few more options for analysis in that library.  
Personally, I implement Miller Puckette’s algorithm used in Pd4P3’s Sigmund class when trying to detect pitch, or pitch energy in a signal. I have a Processing example here:  
[Pd4P3/examples/Analysis/SigmundDemo - GitHub](https://github.com/robertesler/Pd4P3/tree/main/examples/Analysis/SigmundDemo)  
I don’t know exactly what you mean by tone, as that can also be interpreted as pitch. Do you mean timbre or something else?  
Anyway, good luck with the project!

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [January 17, 2022, 3:29pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/8 "2022-01-17T15:29:31Z")

</div>

Hi, been a long time since i came here as i was busy. But still on the project, no real change a this time. Anyway, thanks for your reply. I mean “hauteur de note” in french. I don’t know if it’s more clear. : ) I’m gonna check your example, thanks. By the way, if you have any tips…  
Best

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [April 23, 2022, 1:02pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/9 "2022-04-23T13:02:54Z")

</div>

Hi, i finally find a part of solution of what i want to do in remixing different codes i’ve found.

```auto
import ddf.minim.*;
  Minim minim;
  AudioPlayer song;
  
int spacing = 20;
int border = 10;
int amplification = 10;
int y = spacing;
float ySteps;  
void setup() {  
  size(200, 200);
  background(255);
  noStroke();
  minim = new Minim(this);
  song = minim.loadFile("audio.wav");
  song.play();
}

void draw() {
  int screenSize = int((width-2*border)*(height-2*border)/spacing);
  int x = int(map(song.position(), 0, song.length(), 0, screenSize));
  ySteps = x/(width-2*border); // calcul du nombre de lignes
  x -= (width-2*border)*ySteps; // nouvelle posiition de x pour chaque lignes
  float frequency = song.mix.get(int(x))*spacing*amplification; 
  square(x, y*ySteps, 50);
  fill(random(x+frequency*amplification*20), (x+frequency*ySteps), (#CC6600*frequency));
}

void stop() {
  song.close();
  minim.stop();
  super.stop();
}

```

What i’d like to do now it’s exporting an SVG of those graphics from multiple audio files, not in realtime. I mean i got more than 400 sounds… My questions are :

- how can i create an SVG from an animation (not frame by frame) ?
- is there a function or something to automatise this like a script on a folder, for exemple ?

Thanks for your help, good day !

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 23, 2022, 6:25pm UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/10 "2022-04-23T18:25:27Z")

</div>

Welcome Back!

> [@Pyo](#):
>
> how can i create an SVG from an animation (not frame by frame) ?

SVG Library:

> **[SVG Export / Libraries](https://processing.org/reference/libraries/svg/index.html)**
>
> Create SVG files.

Some test code I wrote:

> **Click here to see code!**
>
> ```auto
> import processing.svg.*;
> 
> boolean end = false;
> PGraphics svg;
> 
> void setup() 
> {
> size(400, 400);
> background(200);
>   
> svg = createGraphics(400, 400, SVG, "output.svg");
> svg.beginDraw();
> svg.background(200);
> frameRate(15); //Slow things down for this test
> }
> 
> void draw() 
> {  
> float ranX = random(width);
> float ranY = random(height);
>   
> line(width/2, height/2, ranX, ranY);
> svg.line(width/2, height/2, ranX, ranY);  
> 
> if(end)
> {
> svg.dispose();
> svg.endDraw();
> //exit();
> noLoop();
> }
> }
> 
> void keyPressed()
> {
> end = true;
> }
> 
> ```

You will see the sketch in the main sketch window and capture it to an SVG from a PGraphics buffer with a key press.

You could have just generated this in the background but I wanted to see the progress.

This was only my initial effort… an exploration of the library with some experimentation and you may find an alternative approach.

I did get it to work with your code and generated this SVG:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/4/4419a6eb746673cb087c75e2b77dfa2a49a33d20.png)

> [@Pyo](#):
>
> is there a function or something to automatise this like a script on a folder, for exemple ?

Code could be written to do this on your 400 files.

`:)`

---

<div class="post-metadata">

**Author:** ![Pyo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pyo/32/15087_2.png) [@Pyo](https://discourse.processing.org/u/Pyo)\
**Post date:** [April 25, 2022, 10:21am UTC](https://discourse.processing.org/t/create-visuals-from-sound-wav-file/33795/11 "2022-04-25T10:21:52Z")

</div>

Hi @glv !  
Thanks for the help, i already tried but i didn’t find the way to make it works with my code…  
Here it is :

```auto
import processing.svg.*;
boolean record;

import ddf.minim.*;
  Minim minim;
  AudioPlayer song;
  
int spacing = 20;
int border = 5;
int amplification = 10;
int y = spacing;
float ySteps;
  
void setup() {
  
  size(200, 200);
  background(255);
  noStroke();
  minim = new Minim(this);
  song = minim.loadFile("audio.wav");
  song.play();
}

void draw() {

 if (record) {
    beginRecord(SVG, "img-####.svg");
  }

  int screenSize = int((width-2*border)*(height-2*border)/spacing);
  int x = int(map(song.position(), 0, song.length(), 0, screenSize));
  ySteps = x/(width-2*border); // calcul du nombre de lignes
  x -= (width-2*border)*ySteps; // nouvelle posiition de x pour chaque lignes
  float frequency = song.mix.get(int(x))*spacing*amplification; 
  square(x, y*ySteps, 50);
  fill(random(x+frequency*amplification*20), (x+frequency*ySteps), (#CC6600*frequency)); //choix des couleurs 1
  //fill(frequency*ySteps*200, x+10*frequency, 120*frequency); //choix des couleurs 2

if (record) {
    endRecord();
    record = false;
  }

}
void mousePressed() {
  record = true;
}

void stop() {
  
  song.close();
  minim.stop();
  super.stop();

}

```

Only got this result :  
 ![img-0100](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/4/d438a7120a19f5af792596f806b6bd0d011f61a7.png)

By the way, and in a second time, do you have a link regarding a function to automatise ?  
Thanks again !