Animation

The last in the series of interactive pieces written for BASF earlier this year, this BASF Haptex piece follows the same considerations as the rest of the interactive pieces.

Like the BASF Elastopave piece, this piece is heavily composed of animated GIFs for the artwork.

However, there is one partially animated SVG layered on top of background in slide 1 of the piece.

Again this was mainly due to time considerations after the artwork was frozen and this method of composition and editing was the easiest way out for the effect I wanted to achieve.

One of the bigger challenges for this piece was how to keep the animations invariant regardless of any form factor.

When the pieces were first designed, they were designed specifically for a 1920 x 1080 HD screensize, and the animations fit perfectly then. For example, in the first introduction pane, the objects would rotate correctly (they follow a simple bezier curve) and look good on the screen.

However, this would go entirely out of whack for smaller screens because the coordinates were all hard coded in. To solve this, the coordinates have to be relative to the screen size and a bit of math was involved to refactor the piece such that it works on any relative screen size.

Another interactive piece written for large touch screens, this BASF Elastopave interactive explorable follows the same style and design considerations as the original BASF Elastolit utility piece.

Besides the reuse of the Canvas rain code written for the BASF Elastolit utility piece (otherwise the videos would be huge!), this piece has a lot more animated GIFs added into the piece by my designers.

This is a huge time saver when the art pieces are confirmed, and you just need to make sure that the artwork is animated in a loop.

Whilst it is possible to animate every piece of artwork individually, the amount of time taken would be non-trivial. Getting to the nitty gritty of the low level allows absolutely flexibility, but time considerations are not unlimited.

There is one art piece that is a mix of SVG animation overlaid on top of static art, and it is the 3rd pane (yes in this piece you can go to certain slides immediately by a specific URL link).

I decomposed the SVGs files given to me (English and Chinese versions) to animate the piece. I cut out what I wanted to animate in inline SVG, and the rest is loaded as an image background (toggled for language). A bit of positioning, and you get the effect you see.

Whilst there are many ways to create animations and transition effects, each has a different cost. One should always bear in mind things like performance, browser compatibility (if needed) and flexibility of composition.

An interactive piece of work done for our client BASF, this BASF Elastolit utility piece is an interactive explorable designed for large touchscreens.

Used at exhibition event in China earlier in the year, the interactive explorable is meant to draw the attention of the crowd and get them to play with it.

There are several design objectives baked into this piece.

Because it is a standalone interactive, the piece will jump back to the introduction if no one has interacted with it for more than 3 mins.

There is also swipe-based touch capabilities added to the piece. This, together with other UI elements like touch cues, left/right arrows and the bottom navigation bar allows one to transit and navigate the piece easily.

Artwork is custom, and the animation effects are layered-on with a mix of static images, animated gifs, video, and code-based art animation.

A translation button (top-right corner) allows users to quickly switch between English and/or Chinese on the fly.

Beyond the use at one event, the piece was also meant to have a longer shelf-life and accessible on the web. A key to this was making the
load relatively light-weight.

The rain was originally encoded in the video, but then the video files would be huge (in the order of several 100Mb). This is because in video encoding, the screens are captured frame by frame, and file size is dependent on the amount of stuff moving on the screen at one time. More stuff = bigger file size for the quality required.

Thus the decision was made to switch the rain to entirely being code generated, and is a HTML5 canvas rain code layer overlaid on top of the video. You can see an example of the test UI code rain here.

Lightning effects are also canvas-code based, and also overlaid in the same layer as the rain. The comparison between HTML5 canvas code performance vs video size is stark.

The text is also all stored in the HTML5 code (and not video) which also reduced the load for the on-the-fly translation. We managed to get the videos down to below 1 Mb, and yet the entire piece, when run on a HD 1920 x 1080 screen, still retains its sharpness.


Interactive explorable running on a gorgeous 55-inch Samsung Flip touchscreen

Sound files are not in any of the videos and are separately fired during the transitions of the panes. Whilst they could be added within the videos, having all of the elements separately and only gluing them in the code layer makes for a much more flexible result.

I would also argue it is more powerful. For example, the music, wind and rain can be layered in ways dependent on how the viewer transits panes.

Lastly, some work was done to ensure that it looked decent on a mobile form factor (which will nag you to rotate the phone to landscape). It is not perfect for every form factor, but by-and-large should work decently.

This piece is a mix of many different Javascript libraries and technologies, including D3 (for the gauge generation and bottom UI element), GSAP (library for animations), JQuery (useful DOM manipulator), HowlerJS (sound library), low-level Canvas code, Reveal (framework + touch), Icomoon (custom icon pack for smaller sizes).

Firstbridge Montesorri

By Chi-Loong Chan | | Animation

We did this website project for Firstbridge Montesorri in 2017.

Unlike standard websites, the ask was to create a unique piece of artwork animation wise. This is a scroll-based animation website (pretty much like the main V/R website), where the animation is hooked to the scroll.

The animation tried in this piece is slightly different, where a lot of animations are line-based strokes. Combined with the color fills, it gives an idea of a children’s art piece, where the lines are drawn and coloured in.

The clouds are procedurally generated on the main page with random positioning, to give the effect that when you scroll downwards you’re actually moving through layers of clouds.

One thing to mention is that we took out all the parallax animations for mobile and tablet. The piece is heavy enough that it will work on the latest modern phones, but we wanted to give slightly less powerful mobile devices a fighting chance to run the site! 😀

Artwork is all custom (including all posters and logos) from our design end, and of course so is the animation design of this piece.

Small pieces of code to hook to the eBook platform that firstBridge publishes to, plus linking to all the latest photos on Facebook for the different schools on the site.

All in all, I loved doing something so pretty for the client.

moire2
In mathematics, physics, and art, moiré patterns are large scale interference patterns that can be produced when an opaque pattern with transparent gaps is overlaid on another similar pattern.
Besides being areas of study in mathematics and physics (e.g. in image processing and computer vision) they have real world applications like bank note forgery detection.

But as art itself, moiré patterns can be beautiful and hypnotic.

They are particularly suitable for visualization as procedurally generated art, and can create some really interesting optical illusions.
I was inspired by the below excellent Numberphile video on how random dots arranged on a page can create stunning optical dot illusions, and I wanted to duplicate the effect on an interactive medium.

So I coded up this interactive piece: A Study in Moire Patterns

Using D3 + Greensock

D3 (Data-Driven Documents) is an extremely popular javascript library often known for its use in creating data visualizations. However, it can also be used to create all kinds of fun code art experiments that have little to do with data visualization.

If you want to create SVG on the fly, I would well recommend D3. It is well supported, has excellent traction and there are lots of resources to find information. D3 is really excellent when it comes to binding data to the views.

For animation, my go-to library is Greensock. Sure, there are tons of other animation libraries out there. You can even do some nice transition work in D3. If it is simple, you can even just use CSS.

However I really like Greensock as it is pretty robust, and more importantly it provides a useful mental framework for animation using timelines and tweens.

The rest of the project used Bootstrap for easy responsive layout, and JQuery and JQuery UI was added to hook the interface together. One of the best things about vector-based graphics like SVG is that they are size invariant, and can look equally sharp on desktop to mobile.

There are tons of good reasons why animated SVG are a great way to build animations.

Code time

I’ve put up a few examples used for this project on bl.ocks.org, a viewer for mainly D3 code on Github’s Gist. (This, like D3, is created by Mike Bostock).

In them, you will see that the actual code is not that complicated. Draw the SVG using D3, then animate it using Greensock.

Final thoughts

The reason why we are able to build beautiful code so easily now is because of the amazing amount of high quality libraries, platforms and packages being released by the tech community as a whole.

So as coders we owe a huge debt to all the free tools and libraries we use to build our stuff.

At the same time it can easily feel overwhelming, and you constantly wonder why there are always so many things to learn. Here’s a humorous take on take on that. If you work in the frontend space, you’ll grok it immediately. 😀

Perhaps the answer is that there is no need to be an expert in everything because the simple answer is that you can’t be.

Just focus on an area that you like and work on that. Eventually like any craft if you do enough work in an area, you will acquire some experience and be better at it.

Once in a while, go learn something new because you are intrigued by something, not because it is the “next best thing” you need to learn.

And that is the way to keep the passion for your craft alive. 😀