Virtual Animators

The main focus of the work on ABeamer 1.1 was to improve the virtual animators.
This new version implements SimpleVirtualAnimator, allowing to simplify the creation of SVG, Canvas and WebGL virtual animators.
Now the adapters also include the method frameRendered, allowing virtual animators to render only once per frame, instead of rendering on the update of each property.
Given the power and complexity of these new features, I created a separated blog post called How to use Virtual Animators in ABeamer with the details and examples on how to use Virtual Animators using SimpleVirtualAnimator.

New CLI check command

ABeamer CLI (command-line interface) has the new command check.
This command checks if there are missing requirements and if the environments variables are well configured.
The main reason for this new command is the fact that puppeteer by default uses Chromium, and Chromium doesn’t supports all Chrome features, resulting in many missing parts in the PNG file sequence generation. It’s important that the user executes this command before he installs puppeteer npm i -g puppeteer, and configures the environments variables to skip downloading Chromium and use Chrome instead.
Since the process of setting these variables differs from OS, the description of the process could confuse the first time user, and with this new command, it will display all steps the user has to take in order to configure puppeteer.

New CLI environments variables

While in some Linux distributions, imagemagick and ffmpeg are already installed, in Windows and other OS, it has to be manually installed, and on Windows there is already the system command named convert which can cause conflict if the search path isn’t well configure.
Now the CLI includes FFMPEG_BIN and IM_CONVERT_BIN to allow the CLI to use ffmpeg and imagemagick convert without having to be in the search path.
These environment variables don’t require quotes even if the full path has spaces included.

Passing parameters to the movie and gif generators

ABeamer movie and gif generate a .mp4 and animated .gif respectively, by using ffmpeg and imagemagick convert, but up until now the user was limited to ABeamer configuration of these programs, but now it’s possible to add parameters with the new CLI options:

  • --movie-pre
  • --movie-post
  • --gif-pre
  • --gif-post

These new options will add parameters before(‘-pre’) and after (‘-post’) the parameters passed to the program by ABeamer.
If the program parameter has also a value, then it CLI parameter must be added one for the parameter and the other for the value.


$ abeamer movie gallery/animate-colors/ --movie-pre -loglevel --movie-pre -8

This will generate:

$ ffmpeg -loglevel -8 -r 20 -f image2 -s 200x100 -i gallery/animate-colors/story-frames/frame%05d.png -y -vcodec libx264 gallery/animate-colors/story-frames/story.mp4

The --movie-pre -loglevel --movie-pre -8 will add -loglevel -8 before ABeamer adds the remaining parameters.

Preparing ABeamer 2.x

ABeamer was built to transform animations built using CSS/JavaScript into PNGs, movies and animated gifs, to be used as video overlays, ads, e-commerce, and other businesses.
Before the project was first push to Github, ABeamer went to many redesigns, and during one of the redesigns it become clear the necessity to be able to simulate real-time CSS/JavaScript animation, mainly for the purpose of testing the animation to be send to the render server.
After implementing the story.render(story.bestPlaySpeed()); which would render not at full-speed but synchronized with a timer, I saw the potential of using ABeamer as an online video editor, mainly to add interactive video overlays, which today requires the installation of complex video F/X programs.
And now, as I was implementing the ABeamer 1.1, I saw the possibility of using ABeamer as real-time web animation library.
But with so many CSS/JavaScript animation libraries why use ABeamer instead?
Because ABeamer supports not only real-time but also allows to generate file sequences without frame-drop, and also it’s decoupled from CSS, so it allows to animate SVG, Canvas, and WebGL using the same infrastructure, and for last it has a large number of tools and motion animators which simplifies the implementation of an animation.
But to become an real-time animation library, it needs to be faster to load, execute faster each state change of each frame, and include better timer synchronization.
Probably it will never reach the same speed as other web animation libraries but as devices gets faster the execution speed difference will be less important and the key features become the most important factor.
In this version, I took steps in that direction, and created core-* plugins were the core functions, oscillators, paths, and transitions will pass to these plugins.
For now, those core parts aren’t yet inside those plugins because it generate breaking changes, but this allows to create projects already including those plugins, although for now are empty, so once the ABeamer 2.x is deployed it no longer require any changes in the projects that include these plugins.
With this change, projects that don’t use these core parts can leave them out, making the ABeamer faster to load.
This is only of many steps that have to be made to speed up ABeamer to reach real-time animator level.