Building Procedural Motion for the Web: Geometry, Particles, and Deterministic Canvas Animation

In the world of web animation, there exists a particular aesthetic that combines thin lines, geometric structures, particles, orbital motion, and visuals that bridge the gap between engineering diagrams and generative art. However, many animations on the web are provided as finished assets like GIFs, videos, Lottie files, or components with numerous hard-coded constants.

Building Limot sparked the idea of treating animations as functions instead of assets, enabling them to be parameterized, reproduced, exported, and reused.

The core of this approach involves treating animation as a function of time, where the visual state can be calculated from the time, width, height, and parameters. The renderer, which calculates the frame, doesn't need to know the specifics of how it's being displayed, whether inside a browser, React component, Vue component, captured as a PNG, encoded as a GIF, or rendered frame-by-frame into a video. This separation allows for flexibility and ease of integration across various platforms.

Geometry plays a crucial role in creating visually appealing animations. Complex-looking motion can often stem from straightforward geometric concepts. For instance, when generating a sphere made up of particles, random points can lead to visible clustering. A more even distribution can be achieved using a Fibonacci sphere, which distributes points more uniformly across the surface.

Once the geometry is established, rotation becomes relatively simple. By rotating a point around the Y-axis and projecting it onto a 2D canvas, the 3D points can be converted into canvas coordinates. This process sets the foundation for creating deterministic canvas animations, where the animation is driven by a function that calculates the visual state based on the time and parameters, offering a flexible and reusable approach to web animation.