There Is(Ǝ) – Such That (∋)
This project unveils "There Is(Ǝ) – Such That (∋)", a unique visual programming language and tool for composing procedural clocks with an artistic flair. Users build dynamic, animated timepieces by connecting abstract elements like vectors, scalars, and 'habitats' in a node-graph interface. It captures HN's interest by blending creative coding, novel language design, and practical web technology into a surprisingly elegant, interactive art generator.
The Lowdown
The article introduces "There Is(Ǝ) – Such That (∋)", an abstract visual programming language designed for creating procedural, animated clocks. Developed during a 6-week batch at the Recurse Center, this tool allows users to compose intricate time-telling visuals by manipulating a system of vectors, scalars, and graphical elements within a browser-based environment. The goal is to provide a 'wordless' interface for artistic expression through code, generating unique, exportable clocks.
- Canvas and Time Vectors: Compositions occur on a square canvas, with time represented by conceptual 'vectors'—a raven for hours, a crow for minutes, and a mag-pi for seconds, all stemming from an origin.
- Scalars and Modified Vectors: These vectors can be normalized into scalars (single numbers) representing aspects like dot products or magnitudes, which can then be combined mathematically. Vectors themselves can be added, subtracted, rotated, and multiplied, retaining their horizontal and vertical components.
- Glyphs and Habitats: 'Glyphs' are visible elements (sun, moon, star, lines) that take vector inputs and render on the canvas, with tunable parameters. 'Habitats' are more complex compositions (e.g., grass, nebula, egg) that paint larger areas, responding subtly to vector inputs.
- Tuning and Composition: A variety of global parameters, from 'cycles per day' to 'theme' and 'frame rate', allow users to fine-tune the overall rhythm and aesthetic of the clock. The entire system is designed for composing these elements into a functional, visual clock.
- Technical Implementation: The tool consists of a 'Loom' (a node-graph editor using Svelte Flow) for composition and a 'Weave' that compiles it into a p5.js sketch, displayed in a preview. Clocks are procedural, generating visuals from p5 primitives, and can be exported as self-contained HTML files. The stack includes Svelte 5, TypeScript, Vite, and p5.js, all running entirely in the browser.
- Design Philosophy: Key design choices include a mostly wordless interface relying on sigils and hand-drawn icons, procedural generation for rendered clocks, a single source of truth for time tracking, and a visual debug mode for scrubbing through the day.
In essence, "There Is(Ǝ) – Such That (∋)" offers a sophisticated yet intuitive way to explore the intersection of art, mathematics, and programming. It provides a platform for crafting dynamic visual art that also functions as a clock, all within a self-contained, browser-based editor.