Importing animated vector graphics?

Processing Coding Questions
1

Hi there,

I did some small animations in After Effects and want them included in my Processing project. I know that I could display GIFs, but since AE allows me to export animated SVGs (as JSON files) by the help of a plugin called Bodymovin, I would much rather want that than GIFs because of the fact that it displays as vector graphics, the file sizes are much smaller, and the crisp look remains.

I tried just importing the JSON file with “loadJSONObject(“data.json”);”, but nothing shows up on my canvas. How do I go on from here? :slight_smile:

Here is the JSON file (data.json), exported from After Effects using Bodymovin:

{"v":"5.5.3","fr":25,"ip":0,"op":100,"w":1000,"h":1000,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[266,0],[0,-142],[-118,0],[0,108]],"o":[[-266,0],[0,142],[118,0],[0,-108]],"v":[[8,-272],[-324,24],[-4,244],[324,20]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":99,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":34,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"Red Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":1000,"sh":1000,"sc":"#dc0e0e","ip":0,"op":100,"st":0,"bm":0}],"markers":[]}

… and the corresponding HTML file, which can display the file in a browser, is here:
http://hetoft.com/upload/bodymovin/demo.html

Just any small clues would be very helpful.

Alternatively: is there any other way to display vector animations done with AE in Processing?

Thanks so much in advance!

1 Like
2

You might want to check out loadShape(). I’m guessing that it doesn’t have support for animated SVGs but it might be worth a try. I’m sure that it doesn’t work with json data. Could be an option if you can export an SVG sequence from after effects. Someone else might have more experience with this.

As a side note I know Robby Kraft has been doing some interesting animated stuff with SVGs using javascript. Here’s his library if you’re interested in that.

1 Like
3

Dunno what this is

https://airbnb.io/lottie/#/

4

Hi Chris,

Here’s an explanation of Lottie, taken from: https://medium.com/spemer/using-airbnb-lottie-with-after-effects-plug-in-bodymovin-c3608c9aa82 : " Airbnb released a stunning open-source called ‘ Lottie ’ several months ago. Once designer makes an animated image and export it as .json file through ‘ Bodymovin ’ plug-in, which runs on Adobe After Effects, developer can control it with using open source ‘Lottie’ by Airbnb to make it runs on web or mobile."

Basically, Lottie is the player of the animated SVG (JSON file) exported from AE with the Bodymovin plugin. Don’t know if there’s any other way of doing it though.

5

Hi figraham,

Thanks for the reply. Yes, I know that loadShape() can load SVGs, but AFAIK there’s no way to export an SVG sequence from After Effects. Correct me if I’m wrong. :slight_smile:

Kraft’s library looks interesting – but for my particular case I’m looking for it to work with Processing and not JavaScript, unfortunately. :confused: Let me know if you have any other ideas though!

6

Isn’t there a java lib for that?

7

@Chrisir @figraham

Thanks for pointing me in the right direction, both of you.

I managed to convert the Bodymovin JSON file to single SVGs (one for each frame of the animation), and I could then of course just display that SVG sequence. A bit tedious, but it works! :slight_smile:

If anyone else stumbles upon this, here’s the tool I used to go from Bodymovin to single SVGs (make sure to choose “Export old json format” in settings when exporting from AE):
https://bodymovin-svg-exporter.herokuapp.com/

Now, my next question is how to display multiple SVG sequences in an array, but one after the other (not all at once), but since that is a separate issue, I made a new thread about it:

Thanks again!

3 Likes