DemoFX

You may not have noticed but we published a new demo on the WebFX website a few weeks ago.

This demo is based on the excellent DemoFX library by Chris Newman, a JavaFX canvas library that offers a collection of effects which were primarily designed for JavaFX canvas benchmarks, but can be used and chained to make animations too. We made a partial port of this library in WebFX Libs, our dedicated space for WebFX libraries.

We first made this DemoFX kitchen sink to test and visualize each effect individually, and then chose to sequence them in a particular order, with the music of David Newman played in the background (also provided by the DemoFX library). We set accurate transition times to match the musical rhythm. The demo starts with an introductory animation, asking to click in order to play the actual demo, because in the browser sandbox, playing sound is not permitted before interacting with the user. The resulted demo is just one single java source file.

Most effects should run fluidly, except maybe the fractal rings (2nd effect in the demo) on low-powered devices or big screens, especially when another effect is running simultaneously (such as the fading star field at the beginning, or the Sierpinski effect at the end). You may try the native version of the demo to get better results. But on modern devices (we tested on an iPad mini 6) the performance is excellent already with the web version. A modern backlit display also renders the fractal rings effect much better.

This WebFX demo mainly emphasises the canvas support and the MediaPlayer sound support, including the audio spectrum analysis as demonstrated by the equaliser. Some effects rely on the PixelWriter API. WebFX emulates this JavaFX API, but also provides its own alternative PixelWriter API, slightly different but with better performance for the web (more explanation on this topic will be given in a separate post). So we rewrote these effects using the WebFX PixelWriter API to ensure optimal performance. The final demo JS size is 129kB, and this shows once again how WebFX can produce lightweight and performant web apps that load and start quickly.

Follow us on Twitter

By the way, we just created a Twitter account for WebFX. So if you’re interested, you can follow us on @WebFXProject.