Spatial Canvas Engine

Making a Graph Tangible

A graph can explain how parts of a system relate, but a static diagram leaves its behaviour to the reader. Spatial Canvas Engine explores a more direct way to work with that structure: move a node, connect a port, and inspect the pieces while an animated preview remains visible.

The supplied prototype combines a React node editor with Canvas 2D drawing. React holds the nodes, connections, selection, and parameters. Canvas draws the connecting curves and a separate visual preview. This keeps the graph available as editable data while giving its relationships a visible form.

Exploring the Presets

The resonance preset presents a sequence of wave, attractor, physics, and output nodes. The swarm preset offers another arrangement with an illustrative particle animation. A third preset uses CRDT and layout terminology to present a conceptual state-processing graph.

These are demonstrations of the editor and its visual language. The prototype does not execute the graph as a general-purpose processing pipeline, run WebGPU shaders, or implement distributed CRDT synchronisation. The preview uses predefined Canvas 2D animations, selected partly through specific nodes and connections. Rewiring the diagram is not equivalent to compiling a new simulation.

Editing the Structure

Nodes can be moved around the workspace, selected for inspection, added, and deleted. Removing a node also removes its associated connections. Input and output ports provide a way to draw new relationships, with duplicate connections and direct self-connections prevented by the interaction logic.

The inspector exposes the selected node's parameters. Changes are retained in the current editor state, but the illustrative preview does not evaluate those parameters as a physics engine would. This distinction lets visitors assess the editing experience without confusing it with a completed computational runtime.

Try the Canvas

1. Start the animation with Play and watch the connection pulses and preview.
2. Select a node and inspect its parameters. Move it to see its connections follow.
3. Drag an output port onto another node's input to add a relationship.
4. Add or delete a node, then use Reset to reload the current preset.
5. Switch presets to compare the graph structures, or hide the preview and inspector to free up space.

Animation starts paused so the page does not demand continuous motion on arrival. The displayed frame rate measures the preview's animation callbacks, and the frame interval is derived from those observations. Neither is a GPU benchmark or a performance guarantee.

Adapting the Prototype for the Portfolio

Spatial Canvas Engine runs as a native React component inside this project page. It uses the site's existing React, TypeScript, icon, and styling dependencies rather than loading another application into an iframe. Its container is observed for size changes, and its initial render is consistent with the site's generated HTML.

The integration also replaces the imported page's fixed performance claims with descriptions of the implemented renderer. Animation frames are cancelled when the component unmounts, and hiding and reopening the preview reconnects its drawing loop. Node identifiers are generated independently of the current timestamp to avoid collisions during rapid additions.

This snapshot has no persistence, export workflow, or multi-user session. Reloading restores the initial graph. Touch handlers are included, but a complete keyboard graph-editing workflow remains further work. The current project demonstrates the spatial editing interface and offers a foundation for connecting a real graph evaluator later.