Home → General Discussion →

Is it possible to export a vector animation ?

• Edit

Ignacio P

01 Mar, 2021 11:49 PM

Hello Nodeboxeros,

I have a question about exporting animations.
When I export to a video file I lose all the beautiful clean vector lines that Nodebox does so well...
Is it possible to export some kind of animated vector file?
Either an SVG file that could run in a browser, or better yet, maybe a self-contained application ,,,

1. Support Staff 1 Posted by john on 02 Mar, 2021 03:50 AM

   

   Hi Ignacio,

   You are right that Export Movie in Nodebox converts each frame to a JPEG, resulting in a subtle loss of quality. In practice, I find the animations I make still look pretty good since each frame is on the screen for only 1/25th of a second. But when you pause on a single frame and look closely, you can see the difference.

   One simple thing you can do to improve quality is to use a larger canvas size for your movie, then display the resulting MP4 at a smaller size.

   If you want true vector output, one option you have is to use Export Range and set format to SVG. This will export each frame as a separate SVG file. You would then have to rely on a 3rd party app or scripting to show those files in a browser as a cel animation.

   I spent some time looking for any apps or techniques to do this but didn't find a tool that would directly display a folder of SVGs as an animation in a single bound. But you could achieve something similar depending on exactly what you are trying to do.

   Most 3rd party tools and techniques produce animations from individual SVG elements using basic transformations like translate, scale, or rotate,. For example, moving an SVG element along an SVG path. If this is the kind of thing you want to do, you could use NodeBox to export individual SVG elements and use these tools to do the actual animation. One such tool is SVGator:

   https://www.svgator.com

   Using SMIL or CSS (or javascript), you could display multiple SVGs as a cel animation within a web browser. I have never tried this and I wonder how smooth the resulting animation would be. Here is an article describing this technique:

   https://www.smashingmagazine.com/2015/09/creating-cel-animations-wi...

   If you want to make an animated slideshow presentation inside a browser, you could use Sozi:

   https://sozi.baierouge.fr

   Sozi uses a single SVG poster as the basis for its animated presentations. To use it with NodeBox you could alter your NodeBox code to draw frames side by side and save the whole thing as a single giant SVG. The results could be quite nice, but would be a presentation, not a true animation, so users would have to click through it to see the whole thing.

   If you want to produce a standalone file outside a browser, some tools can export SVG animations as MP4s, but I think you would be back to same problem. In order to display any vector imagery on a computer screen, you have to convert it to pixels - which will always result in some lose of precision.

   So again, it all depends on exactly what you are trying to do. If you do manage to find a 3rd party tool or script to show multiple SVGs as an animation, please share it with us by replying to this thread.

   Hope that helped!

   John

   • Edit

2. 2 Posted by Ignacio P on 03 Mar, 2021 06:27 AM

   

   Thanks for the quick and thorough reply John!
   i had looked into svgator, it looks like a lot of fun, but does have the limitations that you mention....
   I am going to try your suggestion of exporting at a larger canvas size and then scaling down the movie.... that's a great idea, reminds me of drawing zines oversize and reducing them as a photocopy to get nice fine linework....

   Just out of curiosity, would it be possible for someone who understands python far better than I do to take the nodebox code that actually creates the animations and use it to create a standalone application that would act as a sort of selfcontained nodebox viewer to display just that one particular file?

   Thanks again for the informative reply, and for all the work you are doing for all the nodeboxistas around the world......

   • Edit

3. Support Staff 3 Posted by john on 03 Mar, 2021 10:52 AM

   

   Thanks for the thanks, Ignacio; I appreciate it.

   I have often had the same desire for a NodeBox viewer app that replicates the wonderful responsive, hi-def, zoomable user interface that we have at design time - but makes it available for end users. If I could wave a magic wand, I would add the ability for interactivity, so that end users could turn knobs or drag sliders to change visualizations or art in real time.

   Unfortunately, I don't think you could achieve that with just a little Python code. You would need to replicate 98% of Nodebox itself.

   I think you need an actual app - which means multiple apps: one for the Mac, one for Windows, and (please oh please oh please) one for iOS. I would love to swipe and zoom with an interactive NodeBox creation right on my iPad. (I would like to draw networks with an Apple Pencil for that matter.)

   With access to the actual app code of Nodebox 3 (which is open source after all) this would be totally doable, though I think it would have to be coded in C (or Swift!) to achieve the necessary performance. I don't have the chops for such a thing, but would gladly help someone who did. But creating an app is just the start - you also have to maintain it over time. That takes a level of commitment that is hard to sustain.

   I am old enough to remember earlier apps that offered read-only runtime versions just for "playing" a file. This model never really worked at scale because unless everyone already has the reader apps installed it's just too much added friction to distribute a reader with every file. The web replaced all that by providing a single all-purpose reader - a browser - that everyone has.

   Frederik attempted to leverage that universal browser with NodeBox Live, but that idea never worked for me - even if it had ever been fully baked. I think the compromises necessary to run inside a browser - and the extra UI chrome around the edges - weaken the experience too much, at least the design-time experience.

   I think a better compromise would be the ability to export HTML (or interactive SVG) from the NodeBox app. I think interactive SVG, wrapped with some CSS and javascript inside an html package of some kind, could be make to work. A technique like this could enable limited forms of SVG-based animation that you could play with any browser.

   You might be able to get part way there with some Rube-Goldberg machinations (e.g. including special tags in node comments and doing post-processing on a saved SVG file), but it would be much more seamless if it was built into NodeBox itself as a new export option.

   Still, I might try post-processing an SVG file somehow. It's on my ever-exploding list of things to try someday. Please feel free to keep this discussion going if you want.

   John

   P.S. I hadn't heard of Sozi until I did the research to answer your question. If I hadn't just retired I would try using it to create a Prezi-style presentation walking through a high-res NodeBox SVG map or org chart. Maybe I will try it anyway - I bet you could use that technique to do something cool.

   • Edit

4. 4 Posted by Ignacio P on 07 Mar, 2021 06:40 AM

   

   Yeah, I think you're right, if this happens (and I really hope it does....), it will probably be through a browser.....
   If it's the interactivity that's the big stumbling block, I think it would still be well worth it to just be able to play non-interactive svg animations ....
   I realize that's missing out on a lot of the power of Nodebox, but it might provide a launchpad for future interactivity.....
   Anyways, it is beyond my humble scripting skills, but maybe some hotshot nodeboxnik will take on the challenge.....

   Also, thanks for the link to Sozi, looks quite cool.....

   • Edit