Give sound to AI paths

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!



this is idea how to generate beep

Add beep to your project

1 Like


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:


  • The Processing website has references , examples , tutorials , etc.

  • 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:


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:

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

There may be libraries that are useful: 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:

Check out the libraries:

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

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

Click here to see code
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…


1 Like

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

1 Like

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

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

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.