SVG Shape manipulation

I am doing a project which involves deforming text in this fashion, both for a static and an animated result:


So far I’ve been successful getting that effect by loading the text as an image, loading the pixels and manipulating them, but that is not very efficient, especially for animation. I would really like to get this effect with vector images. Is there a way to do manipulate PShapes (combine with boolean operations á la illustrator pathfinder, crop, distort…)?

1 Like

There are at least two ways to do this.

One is what you request: altering vertices. If you load the SVG into a PShape, you can access the vertices. The tricky part in your examples is that you would need to insert new vertices at the intersection points. Doable, but I’ll let others suggest how to do that.

The other approach is by using shaders, which is much more efficient than copying pixels around in the CPU. Here a simple example: or a more fun alternative :slight_smile:


If you want to manage and manipulate the vertices of text, rather than pixels, I would recommend using the geomerative library – for example, create an RFont, use RFont.toGroup to create an RGroup out of a text string, and then retrieve the vertex points for manipulation with getPoints().

Here is one past example project:

and a search on the current forum:


Thanks @jeremydouglass, that seems like it could do the trick!