# Give sound to AI paths

**URL:** <https://discourse.processing.org/t/give-sound-to-ai-paths/31660>\
**Category:** Coding Questions\
**Created:** [August 10, 2021, 10:13am UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660 "2021-08-10T10:13:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![markelloskolofotias](https://avatars.discourse-cdn.com/v4/letter/m/ea5d25/32.png) [@markelloskolofotias](https://discourse.processing.org/u/markelloskolofotias)\
**Post date:** [August 10, 2021, 10:13am UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660/1 "2021-08-10T10:13:01Z")

</div>

Dear community,

I am a postgraduate fine art student from Greece and I have a question for you.

I designed the following symbols in Adobe Illustrator and I would like to give them sound.

So, could you please tell me if there is a way for Processing to scan these symbols, go along/ follow their paths and as a result give them sound? (I hope I explained myself well enough!)

I am really looking forward to hearing from you.

Thank you in advance!

Markellos

 ![Markellos Kolofotias Alphabet](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9d751c405680c3da3d63b702c35c160680b9979.jpeg)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [August 10, 2021, 2:26pm UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660/2 "2021-08-10T14:26:49Z")

</div>

hi

this is idea how to generate beep

[Add beep to your project](https://discourse.processing.org/t/add-beep-to-your-project/31602)

---

<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:** [August 11, 2021, 11:05am UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660/3 "2021-08-11T11:05:22Z")

</div>

Hello,

I provided a very short list of initial thoughts… this certainly has me thinking about it!

A good place to start:

> **Click here for resources**
>
> I encourage you to look at the resources available here:
> 
> **Beginner**
> 
> - The Processing website has _references_ , _examples_ , _tutorials_ , etc.  
> [https://processing.org/](https://processing.org/)
> 
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the menu items will reveal what is available!  
> You will find _libraries_ , _tools_ , _examples_ and more!  
> For example:  
> ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d1f59b878cb30a4047dbfd8407702c77bc49bca6.png)
> 
> **Advanced**
> 
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
> Many of the Processing functions are here:  
> [https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
> - And the Internet.

> [@markelloskolofotias](#):
>
> So, could you please tell me if there is a way for Processing to scan these symbols, go along/ follow their paths and as a result give them sound? (I hope I explained myself well enough!)

There is always a way…

**Scan these symbols**

Extract an individual PImage for each symbol from your picture.  
Use a camera with the video library and extract a PImage.

**Go along/ follow their paths**

If you want to follow the curve on a picture this is one very simple example:

> [@How to rotate a sprite toward the direction of motion](https://discourse.processing.org/t/how-to-rotate-a-sprite-toward-the-direction-of-motion/21056/12):
>
> Hello, You need the slope of the curve at that point to get the angle. If you do not have an equation to the curve (for derivative) you will have to use two points on the curve close to your plot point (I used data in an array; an index higher an index lower) to approximate. See below for example. I got this to work nicely and animated it as well; the tangent moved across the curve. This is a Processing (Java) snippet to get you thinking about this: PVector [] data; //Slope using atan() …

I shared the above to illustrate that it can be done.

There may be libraries that are useful:  
[http://www.ricardmarxer.com/geomerative/](http://www.ricardmarxer.com/geomerative/) This came to mind… it is a maybe.  
I am sure there are others!

**A result give them sound**

There are a few sound libraries to use. Seek them out.

Another reference:

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

Check out the libraries:

> **[Libraries](https://processing.org/reference/libraries/)**
>
> Extend Processing beyond graphics and images into audio, video, and communication with other devices.

I did write some code to extract the individual symbols for later Processing:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9b260a1dfee4b65c1b6695760be7359b8376b98.png)

I provided the simplest example; the picture shows the images “shuffled” in some more advanced code I wrote.

> **Click here to see code**
>
> ```auto
> PImage symbol []; // Array of individual symbols
> PImage symbols; // Pimage of all symbols
> IntList num; // Array to shuffle
> 
> int xsp;
> int ysp;
> 
> void setup() 
> {
> size(700, 500);
> symbols = loadImage("symbols.jpg");
> println(symbols.width, symbols.height);
> symbol = new PImage[20];
> 
> xsp = 127;
> ysp = 108;
>   
> // Creates PImage array
> for(int y = 0; y<4; y++)
> {
> for(int x = 0; x<5; x++)
> {
> int n = x+y*5;
> println(x, y, n); 
> symbol[n] = symbols.get(x*xsp+25, y*ysp+25, xsp, ysp);
> }
> }
> 
> //Displays PImage array
> for(int y = 0; y<4; y++)
> {
> for(int x = 0; x<5; x++)
> {
> int n = x+y*5;
> println(x, y, n); 
> image(symbol[19-n], x*(xsp+5)+20, y*(ysp+5)+20);
> }
> }
> }
> 
> ```

Also thinking about what can be done with an SVG… `:)`

I can’t comment on the AI part…

`:)`

---

<div class="post-metadata">

**Author:** ![markelloskolofotias](https://avatars.discourse-cdn.com/v4/letter/m/ea5d25/32.png) [@markelloskolofotias](https://discourse.processing.org/u/markelloskolofotias)\
**Post date:** [August 12, 2021, 4:10pm UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660/4 "2021-08-12T16:10:16Z")

</div>

Thank you all so much for your precious feedback! I really appreciate it!

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [August 12, 2021, 5:48pm UTC](https://discourse.processing.org/t/give-sound-to-ai-paths/31660/5 "2021-08-12T17:48:43Z")

</div>

Sounds like you may want to take a look at this.

> [@OpenCV update, Heaviside Step Function, deriving parametric functions of shapes, Sobel filter](https://discourse.processing.org/t/opencv-update-heaviside-step-function-deriving-parametric-functions-of-shapes-sobel-filter/21931):
>
> Hi. I would like to plot this function but I’m not sure how to implement it. [equasion] It is a [Heaviside step function](https://mathworld.wolfram.com/HeavisideStepFunction.html), and I assume that the theta sign means that the sinusoid applies only to 27π \< t \< 31π , and otherwise the function would be zero. Any hint?

Some of this is irrelevant to your problem but the parametric equation part and the fourier series part might be useful.

Also Daniel Shiffman’s fourier series challenge

[![](https://img.youtube.com/vi/Mm2eYfj0SgA/maxresdefault.jpg "Coding Challenge 125: Fourier Series") ](https://www.youtube.com/watch?v=Mm2eYfj0SgA)

This could be combined with some audio synth.

This last one is p5.js but it should give you so hints to the approach required.