AnnoMetta (‘Anno’ meaning year in Latin and ‘Metta’ meaning loving-kindness in Pali), is an artwork that symbolizes community connections through a dynamic canvas. With elements shifting daily, monthly, and annually, the generative art is fully customizable via URL parameters.

AnnoMetta (live render)

Inspiration and Creation

I approached this project as a way to visualize the connections between individuals. These could be simple relationships, a network or community, or an abstract representation of compassion (in the spirit of Metta). I wanted to create a single piece of art that will always change, but where a specific output can always be recreated.

I feel like the longest cycle many people think about is a single year, and the starting hue of any render of this work cycles over the course of a year, just like seasons. The piece will look about the same every year on your birthday, for example, but it would never be exactly the same. Technically, new art is created every hour, but even within a single hour, multiple outputs can be made – change the window size or the screen resolution and the art changes. Everything is deterministic, meaning that there is always a reproducible pattern to the dynamic changes. No output is ever truly lost and can be recreated with the right settings. Shapes change with the calendar month, and the renders in frequent flux, but it’s one piece of art.

AnnoMetta can be enjoyed for free around the world and at any time, and I hope that when viewing it, one thinks of the connections and maybe even the compassion shared between us.

The Generative Program

This project utilizes 10kb of JavaScript (no libraries) to create the artwork. It is dynamic, and deterministically changes every hour. It is interactive and takes URL parameters to override the dynamic default settings, allowing vast customization of the resulting piece.

Artwork Interactivity

    • “S” saves an image.
    • “N” draws the next cycle.
    • ” ” (space) or double-clicking plays/pauses the animation.
    • (Up/Down arrows) change the hue.
    • (Escape) opens a customization menu. ⇒


Customizable settings via URL parameters:

    • Year, Month, Date, and Hour.
    • Nodes, Cycles, Connections, and Attraction.
    • Node Style (overrides any ‘Month’ setting), Hue, Background Hue.
    • Noise, Pride, Fast Draw, Hourly Refresh, and Continuous Draw modes.