@wavegrid/canvas 0.1.1

package/LICENSE

@@ -0,0 +1,7 @@
+All Rights Reserved.
+
+Copyright (c) 2024 Interweb, Inc.
+
+This software and associated documentation files (the "Software") may not be
+reproduced, distributed, or used without express written permission from
+Interweb, Inc.

package/README.md

@@ -0,0 +1,39 @@
+# @wavegrid/canvas
+
+<p align="center" width="100%">
+  <img height="250" src="https://raw.githubusercontent.com/constructive-io/constructive/refs/heads/main/assets/outline-logo.svg" />
+</p>
+
+<p align="center" width="100%">
+  <a href="https://github.com/constructive-io/Illuminate/actions/workflows/ci.yml">
+    <img height="20" src="https://github.com/constructive-io/Illuminate/actions/workflows/ci.yml/badge.svg" />
+  </a>
+</p>
+
+Artist-facing creative canvas for the 7×7 Illuminate installation. This is a creative instrument for **painting the sky with light** — not a technical control panel.
+
+## Design Philosophy
+
+- No technical language, no projector numbers, no OSC concepts
+- Everything is fluid, playful, and expressive
+- Feels like Procreate or TouchDesigner, not a lighting console
+- Optimized for iPad touch interaction
+
+## Modes
+
+- **Paint** — Choose a color, touch/drag cannons to paint them
+- **Gradient** — Pick colors, drag to create live gradients
+- **Brush** — Adjustable size with soft falloff
+- **Energy** — Single intensity slider for live performance
+- **Scenes** — Visual color swatches, tap to apply
+- **Motion** — Draw paths, light animates along them
+- **Symmetry** — Mirror, radial, and kaleidoscope tools
+
+## Usage
+
+```sh
+pnpm dev
+# → http://localhost:3001
+```
+
+Connects to the simulator backend via WebSocket for state synchronization.

package/esm/index.js

@@ -0,0 +1 @@
+export { getCanvasHTML } from './ui';

package/esm/server.js

@@ -0,0 +1,68 @@
+import http from 'http';
+import { WebSocket, WebSocketServer } from 'ws';
+import { getCanvasHTML } from './ui';
+const PORT = parseInt(process.env.PORT || '3001', 10);
+const SIMULATOR_URL = process.env.SIMULATOR_URL || 'ws://localhost:3000';
+const server = http.createServer((_req, res) => {
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(getCanvasHTML());
+});
+const wss = new WebSocketServer({ server });
+let simulatorWs = null;
+let reconnectTimer = null;
+function connectToSimulator() {
+    try {
+        simulatorWs = new WebSocket(SIMULATOR_URL);
+        simulatorWs.on('open', () => {
+            console.log('  ✦ Connected to simulator');
+        });
+        simulatorWs.on('message', (data) => {
+            // Relay state from simulator to all canvas clients
+            const msg = data.toString();
+            wss.clients.forEach(client => {
+                if (client.readyState === WebSocket.OPEN) {
+                    client.send(msg);
+                }
+            });
+        });
+        simulatorWs.on('close', () => {
+            console.log('  ✦ Simulator disconnected, reconnecting...');
+            scheduleReconnect();
+        });
+        simulatorWs.on('error', () => {
+            scheduleReconnect();
+        });
+    }
+    catch (_e) {
+        scheduleReconnect();
+    }
+}
+function scheduleReconnect() {
+    if (reconnectTimer)
+        return;
+    reconnectTimer = setTimeout(() => {
+        reconnectTimer = null;
+        connectToSimulator();
+    }, 2000);
+}
+wss.on('connection', (ws) => {
+    ws.on('message', (raw) => {
+        // Relay commands from canvas clients to simulator
+        if (simulatorWs && simulatorWs.readyState === WebSocket.OPEN) {
+            simulatorWs.send(raw);
+        }
+    });
+});
+server.listen(PORT, '0.0.0.0', () => {
+    console.log('');
+    console.log('  ╭──────────────────────────────────────╮');
+    console.log('  │   Illuminate · Canvas                 │');
+    console.log('  │   painting the sky with light         │');
+    console.log('  ╰──────────────────────────────────────╯');
+    console.log('');
+    console.log(`  → http://localhost:${PORT}`);
+    console.log(`  → Simulator: ${SIMULATOR_URL}`);
+    console.log('');
+    connectToSimulator();
+});
+export { server };