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.
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
New CLI check command
ABeamer CLI (command-line interface) has the new command
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,
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
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
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:
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.
This will generate:
--movie-pre -loglevel --movie-pre -8 will add
-loglevel -8 before ABeamer adds the remaining parameters.
Preparing ABeamer 2.x
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.
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.