Ben Zenker

MicroGraph

Ongoing

A vector-based motion graphics animation tool that enables rapid development with an intuitive user interface.

Web

A rudementary build of the web application is available for testing.

Code

Building a web-based vector animation application, based on PaperJS. Managing data using MobX and an object-like-oriented design, with a React front end. Designed the property and animation mathematics with relative values for future export options into popular animation suites. Emphasized Bézier interpolation for smoothing across all properties. Partitioned toolsets into linear stages clarifying the flow from start to finish.

Science

Science, or more specifically mathematics, is at the core of every vector shape and every frame of animation, making it very relevant in the architecture of MicroGraph. What I'd like to highlight is how a Bézier curve, which is often used to represent the vector between two points in 2d space, is also an incredible tool in producing smooth and realistic animations in the 4th dimension, time.

The math that makes it possible to define a curve with 4 points is pretty ingenious, but it's only one of the infinite types of Bézier curves (cubic). You can dive deeper into this topic and play with them visually on this website.

Unfortunately, the general formula defines the curve as a function of how far along the curve you have traveled, which is very different than a traditional x-y series.

cubic bezier equation

Therefore, to use the beautiful shape of a Bézier curve to define the interpolation between two keyframes, we have to solve the curve so that it can be defined in an x & y relationship, or in this case time & interpolated value.

As you might have read in the code section of this project, I've opted for relative values in every way possible. This holds with keyframe interpolation. With both time and value now normalized on a scale of 0 to 1, we can say that P0 and P3 (the first and last points), will always fall at 0,0 and 1,1.

This gives us the power to greatly reduce the complexity in the function, which saves computation time, and eliminates the possibility of imaginary roots existing for a curve. It puts the emphasis, both mathematically and user experience wise, on the handles of the curve -- which are ultimately what define the smoothness and realisticness of an animation.

Animation

Here is an incredibly simple animation made with the current version of MicroGraph. It includes the two shapes and the three properties that can be animated at the time of writing.