Import Adobe Illustrator bezier coordinates into p5.js bezier() function

koysun

I'm working on a project where I can take my lettering pieces I do on illustrator with the pen tool and take the bezier point coordinates (curves and all) from illustrator into processing bezier() function so I can individually manipulate the points with different formulas for animation.

I've tried using Adobe Point Exporter but it seems to only give the x, y coordinates without the curves. I've found a library for processing called Geomerative but I couldn't figure out how to export the coordinates into specific bezier points that I can import into bezier(). Basically anything I've done with SVG files have came back really illegible and hard to import.

If there's any way for me to extract my Ai file (or SVG etc.) and get clear numbers on the coordinates and curves of all my points that would be more than enough, then I can import individually each number from there.

Thank you for taking the time to read this!

jeremydouglass

This seems like an Adobe export question -- perhaps you might get better help on Adobe specialized forums? Something like:

"How can I export bezier curve point data (including control points) from Illustrator?"

If you can get them into any common format -- even CSV -- then you could load them into a Processing sketch.

If I am understanding, right your data export to a text file could look like this -- with two anchors (a1 and a2) and two control points (c1 and c2), shown here in the order of the Processing bezier() function:

a1x, a1y, c1x, c1y, c2x, c2y, a2x, a2y
a1x, a1y, c1x, c1y, c2x, c2y, a2x, a2y
a1x, a1y, c1x, c1y, c2x, c2y, a2x, a2y

...

• https://processing.org/reference/bezier_.html