Lignes
Lignes was inspired by the project Arte, which explored generative algorithms by creating SVG components based on models.
Models encoded instructions for generating specific things. For example a model that generates trees would always output a tree but with variable characteristics that make it rare or unique.
SVG elements provided a number of benefits, such as browser-based animations and instant creation of NFT artworks. However, I encountered constraints when diving deep into the world of generative art.
Lignes transfers these concepts into a canvas-based implementation.
Architecture
Models
Models are the foundational block of the architecture. A model is a function which performs operations on a canvas context to produce an output. These functions are the core of how different renderers produce their results. There are currently three model types and the most frequent development is done at this level.
Artboards
Artboard models are designed to work with the ProgrammableCanvas API.
Sketches
Sketch models are designed to work with the P5Canvas API.
Etches
Etch models are designed to work with the EtchCanvas API.
Renderers
Renderers execute models against a canvas element to produce a visual output. Under the hood, renderers leverage different APIs such as the native canvas controls, custom code, or libraries like p5.js. The renderer instance configures the canvas element, provides dependencies required by compatible models, and then executes to create its result. In practice these renderers are written as React components.
ProgrammableCanvas
This component wraps a HTMLCanvasElement and uses native browser APIs.
P5Canvas
This component wraps a p5 instance and provides a harness which makes p5 compatible with React. The introduction of p5 is a drastic deviation from the API used in the ProgrammableCanvas and as such models must use a very different interface.
EtchCanvas
This component extends the functionality of the P5Canvas, providing addtional APIs for the Viewer, shaders and other higher level capabilities.
Viewer
This is the top level component which is presented to the users. The component provides controls for interactions, dimensions, analytics, and other application level behaviors.