New datetime plugin

A new plugin was added, providing date and time functions.
now and date are the date/time creator functions, providing a value to be used internally for the following functions:
year, shortYear, month, day, hour, minute, second.
Given the goals of ABeamer, all the date/time functions use local time.

It also supports a date/time formatter function, where the formatter is a mini-version of moment.js.

Examples:

  "=format('YYYY-MM-DD HH:mm:ss', now())"
  "=format('ddd, MMM D (YY) hA', now())"

All these functions are teleportable, but if you plan to render your story in remote server is advisable to setup the date using date function, since the actual date/time which it will be executed is uncertain.

Since every time the now is executed, it provides a different date/time, a call using =hour(now()) followed by =minute(now()) can provide inconsistent results.
The best strategy for setting a date is by using set-var task:

  scene
    .addAnimations([{
      tasks: [{
        handler: 'add-vars',
        params: {
          allowExpr: true,
          now: `=now()`,
        } as ABeamer.AddVarsTaskParams,
      }],
    }]);

With this setting, the following will provide consistent results:

  • =hour(now).
  • =minute(now).

It’s advisable to avoid the variable name now since in future versions, now might be a built-in variable.

See the details on the documentation and an example on datetime-workbench.

Color functions

Now the color-functions plugin has 4 new teleportable functions:

  • hsl.
  • hsla.
  • hsl2Rgb.
  • rgb2Hsl.

With these new functions, now it’s simpler the process of animating colors not just on rgb, but also on hsl color space.
Since rgb, rgba, hsl, hsla functions, return a textual value without the starting #,
for CSS color interpolation, it must be added in at the beginning of the expression.

Example: "='#' + hsl(0.5, 0.2, 0.1)".

It was also added support for array input to the color functions.

Examples:

  // before only
  "='#' + rgb(200, 50, 100)"
  // now also
  "='#' + rgb([200, 50, 100])"

At the moment, the usage of hsl2Rgb and rgb2Hsl is very limited, but once the array slicing is implemented as defined in What is Next, it will be possible to use it has an expression:
"='#0F' + get(hsl2Rgb(0.4, 0.5, 0.8), 1) + 'FF'"

Core functions

2 new functions were added to the core functions: abs and sign.
More functions are expected, read on the section What is Next.

Add-var task

As it was seen above, the set-var task has a new parameter: allowExpr.
When it’s set to true, every textual variable added by this task is calculated if it starts with =.
Although, it would make sense to have it true by default, since this it would make breaking changes, then is therefore false by default.

Bug fixing

In the previous version blog post was announced that the ABeamer had become smaller, but I detected a bug on the way the export functions starting _ were being processed fro the release version, and there was a bug, preventing from reduce the name of those functions.
This bug is fixed in this version.

What is next

The internet presence, and promotion of ABeamer continues to be my main goal at the moment, but what is expected for the next version is:

  • New array and statistical functions including min, max, std, mean, sum.
  • Added array support for the current numerical functions: round, abs, ceil, floor.
  • Array element slicing: get and slice.
  • Beta support for Firefox as render server via slimer.js.

Chrome is a great browser, it has tremendous CSS properties support to generate awesome renders, and puppeteer performs well the interconnection with server agent, but the current Google policy regarding its browser is too limit its usage, allowing mobile users to have a more snappier experience and prevent pesky auto-start videos, but this policy collides with ABeamer goals of bringing the web to the video creation.
Chrome executed as server render has no master switch to disable all limitations:

  • auto-play policy.
  • font fallback.

There are surely some startup parameters, such as --ignore-autoplay-restrictions and --autoplay-policy=no-user-gesture-required but they fail to produce the expected results.
For animations that don’t use video overlays, Chrome as a render server is still a reliable solution, but when video overlays are the animation goal, at the moment, it doesn’t provides a valid solution.