Reanimate

Reanimate is:

An animation library: Animations are written as code.
Written in Haskell: High-level, purely functional, expressive.
Based on SVG: Powerful and introspective.
Cross-platform: Windows, MacOS, and Linux.

Reanimate aims to be a batteries-included way of creating animations and illustrations. It builds on two core ideas: (1) graphics (both still and animated) should be expressed as code, and (2) reactive programming is the best paradigm for animating data that changes over time. Reactive programming has been popularized by D3.js and React.js, and familiarity with either of those two libraries makes reanimate easier to understand.

Installation instructions are available on github. If you run into any trouble, by far the quickest way to get help is to ask in our discord server.

Try it live!

Play with reanimate right here in your browser before installing it locally:

Showcase

The best way to understand what reanimate does is to see it in action. Click on the videos below to view them in high-definition. Click again to close the high-definition video.

Reanimate is built on vector graphics, including support for introspection. This example animation shows the letter 'S', and the tangent and normal of each point along the curve.

The combination of vector graphics and Haskell's expressiveness makes reanimate particularly well suited for rendering mathematical illustrations. In this example, a fourier series is used to increasingly approximate the shape of pi.

With the full power of Haskell, manipulating GeoJSON data becomes easy. This example shows country borders being distorted by a range of map projections.

Starfield. This example was inspired by a pixel-based shader. Many pixel-based effects can be easily vectorized without having to resort to pixmaps.

While SVG has built-in support for text, it's heavily dependent on available system fonts and does not support typesetting. Fortunately, LaTeX can produce SVGs and integrates directly with reanimate.

Animating with Haskell means you have access to a large number of code libraries. In the spirit of being a batteries-included framework, reanimate ships with a built-in 2D physics library, called Chipmunk2D. The video to the left demonstrates how SVG shapes can be used nearly effortlessly in a physics simulation.

All the videos above have demonstrated 2D vector graphics. But reanimate is capable of much more with the help of external programs. In this video, the ray-tracer Povray is used to apply 3D transformations to the LaTeX animation.

Mixing 2D and 3D graphics with pixel-perfect precision can be difficult when using a regular, perspective camera. A perspective camera changes sizes and angles, making it complicated to predict where a 3D object will appear on the screen. But switch out the perspective camera with an orthographic camera and it becomes trivial to align 2D and 3D objects. This example renders a sphere with an orthographic camera. Notice how the symbols stay the same size even as they move into the background.

With povray, we can project our vector graphics into a 3D world and get beautiful, pixel-based images. If we want to apply further vector transformations then we have to convert the pixel-based images back into vector graphics and this is exactly what 'potrace' does.

Blender is an amazingly powerful tool for 3D graphics and it is entirely scriptable with Python. Reanimate offers built-in support for moving vector graphics into Blender, running custom scripts, and then merging the results back into an animation. The spinning cube to the left is the famous Default Cube and represents the simplest scene possible.

Animated vector graphics are projected on to a 9-by-16 plane. This plane is then morphed into a sphere and rotated. The blender script to achieve this may appear fairly complex but was created using the blender GUI which has a gentler learning curve.

Vector graphics (be they in 2D or 3D) can easily look cold and hard with straight lines and mathematically defined curves being dominant. For a more organic feel, SVG filter effects can be used to merge shapes and colors.

Psychedelic Octopus Cat.
Filter effects are powerful and versatile enough that the limiting factor is imagination.