@wavegrid/simulator 0.1.1 → 0.2.0

package/animations.d.ts

@@ -0,0 +1,4 @@
+import { CannonTarget } from './grid';
+export type AnimationFn = (grid: CannonTarget[], tick: number, attack: number) => void;
+export declare const animations: Record<string, AnimationFn>;
+export declare function getAnimationNames(): string[];

package/animations.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animations = void 0;
+exports.getAnimationNames = getAnimationNames;
+const grid_1 = require("./grid");
+exports.animations = {
+    wave: (grid, tick, attack) => {
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            const col = i % grid_1.GRID_SIZE;
+            const hue = (tick * 2 + col * 40) % 360;
+            const bright = 60 + Math.sin(tick * 0.05 + col * 0.8) * 20;
+            (0, grid_1.setCannonTarget)(grid, i, hue, 85, bright, attack);
+        }
+    },
+    breathe: (grid, tick, attack) => {
+        const brightness = 40 + Math.sin(tick * 0.03) * 35;
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            (0, grid_1.setCannonTarget)(grid, i, 220, 80, brightness, attack);
+        }
+    },
+    rainbow: (grid, tick, attack) => {
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            const row = Math.floor(i / grid_1.GRID_SIZE);
+            const col = i % grid_1.GRID_SIZE;
+            const hue = (tick * 1.5 + (row + col) * 25) % 360;
+            (0, grid_1.setCannonTarget)(grid, i, hue, 90, 80, attack);
+        }
+    },
+    pacman: (grid, tick, attack) => {
+        // Bright dot chasing around the perimeter
+        const perimeter = getPerimeterIndices();
+        const pos = Math.floor(tick * 0.3) % perimeter.length;
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            (0, grid_1.setCannonTarget)(grid, i, 220, 60, 15, attack);
+        }
+        // Pac-man (bright yellow)
+        const pacIdx = perimeter[pos];
+        (0, grid_1.setCannonTarget)(grid, pacIdx, 55, 95, 95, 1.0);
+        // Trail (fading)
+        for (let t = 1; t <= 3; t++) {
+            const trailPos = (pos - t + perimeter.length) % perimeter.length;
+            const trailIdx = perimeter[trailPos];
+            (0, grid_1.setCannonTarget)(grid, trailIdx, 55, 80, 70 - t * 18, 1.0);
+        }
+    },
+    spiral: (grid, tick, attack) => {
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            const row = Math.floor(i / grid_1.GRID_SIZE);
+            const col = i % grid_1.GRID_SIZE;
+            const cx = col - 3, cy = row - 3;
+            const angle = Math.atan2(cy, cx);
+            const dist = Math.sqrt(cx * cx + cy * cy);
+            const hue = (angle * 57.3 + dist * 40 + tick * 3) % 360;
+            (0, grid_1.setCannonTarget)(grid, i, (hue + 360) % 360, 85, 75, attack);
+        }
+    },
+    rain: (grid, tick, attack) => {
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            const row = Math.floor(i / grid_1.GRID_SIZE);
+            const col = i % grid_1.GRID_SIZE;
+            // Each column has a different phase offset (pseudo-random via prime)
+            const phase = (tick * 0.15 + col * 2.3 + col * col * 0.7) % grid_1.GRID_SIZE;
+            const dist = Math.abs(row - phase);
+            const bright = dist < 1.5 ? 90 - dist * 30 : 10;
+            (0, grid_1.setCannonTarget)(grid, i, 200 + col * 8, 70, bright, attack);
+        }
+    },
+    heartbeat: (grid, tick, attack) => {
+        // Double-pulse then rest (period ~120 ticks at 60fps = 2s)
+        const phase = tick % 120;
+        let brightness;
+        if (phase < 10)
+            brightness = 40 + phase * 5; // first pulse up
+        else if (phase < 20)
+            brightness = 90 - (phase - 10) * 5; // first pulse down
+        else if (phase < 30)
+            brightness = 40 + (phase - 20) * 4; // second pulse up
+        else if (phase < 40)
+            brightness = 80 - (phase - 30) * 4; // second pulse down
+        else
+            brightness = 40; // rest
+        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            (0, grid_1.setCannonTarget)(grid, i, 0, 90, brightness, attack);
+        }
+    }
+};
+function getPerimeterIndices() {
+    const indices = [];
+    // Top row
+    for (let c = 0; c < grid_1.GRID_SIZE; c++)
+        indices.push(c);
+    // Right column (skip top-right corner)
+    for (let r = 1; r < grid_1.GRID_SIZE; r++)
+        indices.push(r * grid_1.GRID_SIZE + (grid_1.GRID_SIZE - 1));
+    // Bottom row reversed (skip bottom-right corner)
+    for (let c = grid_1.GRID_SIZE - 2; c >= 0; c--)
+        indices.push((grid_1.GRID_SIZE - 1) * grid_1.GRID_SIZE + c);
+    // Left column reversed (skip corners)
+    for (let r = grid_1.GRID_SIZE - 2; r >= 1; r--)
+        indices.push(r * grid_1.GRID_SIZE);
+    return indices;
+}
+function getAnimationNames() {
+    return Object.keys(exports.animations);
+}

package/esm/animations.js

@@ -0,0 +1,101 @@
+import { GRID_SIZE, NUM_CANNONS, setCannonTarget } from './grid';
+export const animations = {
+    wave: (grid, tick, attack) => {
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            const col = i % GRID_SIZE;
+            const hue = (tick * 2 + col * 40) % 360;
+            const bright = 60 + Math.sin(tick * 0.05 + col * 0.8) * 20;
+            setCannonTarget(grid, i, hue, 85, bright, attack);
+        }
+    },
+    breathe: (grid, tick, attack) => {
+        const brightness = 40 + Math.sin(tick * 0.03) * 35;
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            setCannonTarget(grid, i, 220, 80, brightness, attack);
+        }
+    },
+    rainbow: (grid, tick, attack) => {
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            const row = Math.floor(i / GRID_SIZE);
+            const col = i % GRID_SIZE;
+            const hue = (tick * 1.5 + (row + col) * 25) % 360;
+            setCannonTarget(grid, i, hue, 90, 80, attack);
+        }
+    },
+    pacman: (grid, tick, attack) => {
+        // Bright dot chasing around the perimeter
+        const perimeter = getPerimeterIndices();
+        const pos = Math.floor(tick * 0.3) % perimeter.length;
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            setCannonTarget(grid, i, 220, 60, 15, attack);
+        }
+        // Pac-man (bright yellow)
+        const pacIdx = perimeter[pos];
+        setCannonTarget(grid, pacIdx, 55, 95, 95, 1.0);
+        // Trail (fading)
+        for (let t = 1; t <= 3; t++) {
+            const trailPos = (pos - t + perimeter.length) % perimeter.length;
+            const trailIdx = perimeter[trailPos];
+            setCannonTarget(grid, trailIdx, 55, 80, 70 - t * 18, 1.0);
+        }
+    },
+    spiral: (grid, tick, attack) => {
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            const row = Math.floor(i / GRID_SIZE);
+            const col = i % GRID_SIZE;
+            const cx = col - 3, cy = row - 3;
+            const angle = Math.atan2(cy, cx);
+            const dist = Math.sqrt(cx * cx + cy * cy);
+            const hue = (angle * 57.3 + dist * 40 + tick * 3) % 360;
+            setCannonTarget(grid, i, (hue + 360) % 360, 85, 75, attack);
+        }
+    },
+    rain: (grid, tick, attack) => {
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            const row = Math.floor(i / GRID_SIZE);
+            const col = i % GRID_SIZE;
+            // Each column has a different phase offset (pseudo-random via prime)
+            const phase = (tick * 0.15 + col * 2.3 + col * col * 0.7) % GRID_SIZE;
+            const dist = Math.abs(row - phase);
+            const bright = dist < 1.5 ? 90 - dist * 30 : 10;
+            setCannonTarget(grid, i, 200 + col * 8, 70, bright, attack);
+        }
+    },
+    heartbeat: (grid, tick, attack) => {
+        // Double-pulse then rest (period ~120 ticks at 60fps = 2s)
+        const phase = tick % 120;
+        let brightness;
+        if (phase < 10)
+            brightness = 40 + phase * 5; // first pulse up
+        else if (phase < 20)
+            brightness = 90 - (phase - 10) * 5; // first pulse down
+        else if (phase < 30)
+            brightness = 40 + (phase - 20) * 4; // second pulse up
+        else if (phase < 40)
+            brightness = 80 - (phase - 30) * 4; // second pulse down
+        else
+            brightness = 40; // rest
+        for (let i = 0; i < NUM_CANNONS; i++) {
+            setCannonTarget(grid, i, 0, 90, brightness, attack);
+        }
+    }
+};
+function getPerimeterIndices() {
+    const indices = [];
+    // Top row
+    for (let c = 0; c < GRID_SIZE; c++)
+        indices.push(c);
+    // Right column (skip top-right corner)
+    for (let r = 1; r < GRID_SIZE; r++)
+        indices.push(r * GRID_SIZE + (GRID_SIZE - 1));
+    // Bottom row reversed (skip bottom-right corner)
+    for (let c = GRID_SIZE - 2; c >= 0; c--)
+        indices.push((GRID_SIZE - 1) * GRID_SIZE + c);
+    // Left column reversed (skip corners)
+    for (let r = GRID_SIZE - 2; r >= 1; r--)
+        indices.push(r * GRID_SIZE);
+    return indices;
+}
+export function getAnimationNames() {
+    return Object.keys(animations);
+}

package/esm/grid.js

@@ -48,17 +48,35 @@ function angleDelta(from, to) {
     let d = ((to - from + 540) % 360) - 180;
     return d;
 }
-export function setCannonTarget(grid, index, h, s, b) {
+/**
+ * Set target for a single cannon.
+ * attack (0–1): how much of the new value to apply.
+ *   1.0 = full (instant snap to new target)
+ *   0.1 = soft (target blends 10% toward new value)
+ */
+export function setCannonTarget(grid, index, h, s, b, attack = 1.0) {
     const c = grid[index];
-    if (h !== undefined)
-        c.targetH = h;
-    if (s !== undefined)
-        c.targetS = s;
-    if (b !== undefined)
-        c.targetB = b;
+    if (attack >= 1.0) {
+        if (h !== undefined)
+            c.targetH = h;
+        if (s !== undefined)
+            c.targetS = s;
+        if (b !== undefined)
+            c.targetB = b;
+    }
+    else {
+        if (h !== undefined) {
+            const dh = angleDelta(c.targetH, h);
+            c.targetH = (c.targetH + dh * attack + 360) % 360;
+        }
+        if (s !== undefined)
+            c.targetS = c.targetS + (s - c.targetS) * attack;
+        if (b !== undefined)
+            c.targetB = c.targetB + (b - c.targetB) * attack;
+    }
 }
-export function setAllTargets(grid, h, s, b) {
+export function setAllTargets(grid, h, s, b, attack = 1.0) {
     for (let i = 0; i < grid.length; i++) {
-        setCannonTarget(grid, i, h, s, b);
+        setCannonTarget(grid, i, h, s, b, attack);
     }
 }

package/esm/index.js

@@ -1,2 +1,3 @@
-export { createGrid, tickGrid, setCannonTarget, setAllTargets, NUM_CANNONS, GRID_SIZE, DEFAULT_ALPHA } from './grid';
+export { animations, getAnimationNames } from './animations';
+export { createGrid, DEFAULT_ALPHA, GRID_SIZE, NUM_CANNONS, setAllTargets, setCannonTarget, tickGrid } from './grid';
 export { applyScene, scenes } from './scenes';

package/esm/server.js

@@ -1,12 +1,26 @@
 import http from 'http';
-import { WebSocketServer, WebSocket } from 'ws';
-import { createGrid, tickGrid, setCannonTarget, setAllTargets } from './grid';
+import { WebSocket, WebSocketServer } from 'ws';
+import { animations } from './animations';
+import { createGrid, DEFAULT_ALPHA, setAllTargets, setCannonTarget, tickGrid } from './grid';
 import { applyScene, scenes } from './scenes';
 import { getHTML } from './ui';
 const PORT = parseInt(process.env.PORT || '3000', 10);
 const TICK_MS = 1000 / 60; // 60fps interpolation
 const grid = createGrid();
-const server = http.createServer((_req, res) => {
+let currentAlpha = DEFAULT_ALPHA;
+let currentAttack = 1.0;
+let currentAnimation = null;
+let animationTick = 0;
+// constructive.io brand mark — served as the favicon
+const FAVICON_SVG = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3315 21.7046V28.9348L26.2354 27.2232L29.8206 25.1157L36.9909 29.3307V37.761L30.1657 41.7731V41.785L22.9955 46L19.4102 43.8925L15.8343 41.7848V41.7749L12.5759 39.8595L9 37.7518V21.2924L12.5759 19.1847L15.8343 17.2694V9.25722L19.4102 7.14956L22.6685 5.23418V5.21521L26.2445 3.10755L29.8297 1L37 5.21499V13.6453L30.1657 17.6628V17.6873L23.3315 21.7046ZM16.16 17.8789L12.9168 19.7854L10.0443 21.4784L16.0542 25.0113L22.2948 21.4903L19.4101 19.7945L16.16 17.8789ZM23.6598 5.43249L29.7813 9.0309L35.955 5.40169L33.0743 3.70829L29.8297 1.80095L26.5853 3.70818L23.6598 5.43249ZM22.5139 38.2327L16.8333 41.5721L19.7511 43.2918L22.5185 44.9187L22.5196 38.2427L22.5139 38.2327ZM29.0399 33.6349L29.0153 33.5916L29.1105 33.5357L26.24 31.8482L23.3405 30.1438V33.546V36.9854L29.0399 33.6349ZM29.0998 9.43154L26.24 7.75041L22.9953 5.84307L19.7509 7.7503L16.8486 9.461L22.97 13.0595L29.0348 9.49437L29.0244 9.47595L29.0998 9.43154ZM16.5153 10.0661V13.4722V17.2854L22.5224 20.8167L22.5236 13.598L16.5153 10.0661ZM35.9458 29.5176L33.0651 27.8242L29.8205 25.9168L26.5761 27.8241L23.6705 29.5367L29.7919 33.1352L35.9458 29.5176ZM15.794 33.7218L12.5758 31.8299L9.68105 30.1237V33.5369V37.3517L12.9167 39.2589L15.7928 40.9496L15.794 33.7218ZM15.7954 25.7332L9.68116 22.1389V25.5074V29.3222L12.9168 31.2293L15.7943 32.9208L15.7954 25.7332Z" fill="#01A1FF"/>
+</svg>`;
+const server = http.createServer((req, res) => {
+    if (req.url === '/favicon.svg' || req.url === '/favicon.ico') {
+        res.writeHead(200, { 'Content-Type': 'image/svg+xml; charset=utf-8' });
+        res.end(FAVICON_SVG);
+        return;
+    }
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
     res.end(getHTML());
 });
@@ -41,30 +55,54 @@ wss.on('connection', (ws) => {
 function handleMessage(msg) {
     switch (msg.type) {
         case 'cannon':
-            setCannonTarget(grid, msg.index, msg.h ?? undefined, msg.s ?? undefined, msg.b ?? undefined);
+            setCannonTarget(grid, msg.index, msg.h ?? undefined, msg.s ?? undefined, msg.b ?? undefined, currentAttack);
             break;
         case 'master_brightness':
-            setAllTargets(grid, undefined, undefined, msg.value * 100);
+            setAllTargets(grid, undefined, undefined, msg.value * 100, currentAttack);
             break;
         case 'scene':
             if (msg.name && scenes[msg.name]) {
+                currentAnimation = null;
                 applyScene(grid, msg.name);
             }
             break;
+        case 'animation':
+            if (msg.name && animations[msg.name]) {
+                currentAnimation = msg.name;
+                animationTick = 0;
+            }
+            else if (msg.name === 'stop') {
+                currentAnimation = null;
+            }
+            break;
         case 'selection':
             if (Array.isArray(msg.indices)) {
                 for (const idx of msg.indices) {
                     if (idx >= 0 && idx < grid.length) {
-                        setCannonTarget(grid, idx, msg.h ?? undefined, msg.s ?? undefined, msg.b ?? undefined);
+                        setCannonTarget(grid, idx, msg.h ?? undefined, msg.s ?? undefined, msg.b ?? undefined, currentAttack);
                     }
                 }
             }
             break;
+        case 'smoothness':
+            if (typeof msg.value === 'number') {
+                currentAlpha = msg.value;
+            }
+            break;
+        case 'attack':
+            if (typeof msg.value === 'number') {
+                currentAttack = msg.value;
+            }
+            break;
     }
 }
 // Animation loop: tick interpolation and broadcast
 setInterval(() => {
-    const changed = tickGrid(grid);
+    if (currentAnimation && animations[currentAnimation]) {
+        animations[currentAnimation](grid, animationTick, currentAttack);
+        animationTick++;
+    }
+    const changed = tickGrid(grid, currentAlpha);
     if (changed) {
         broadcastState();
     }
@@ -79,4 +117,4 @@ server.listen(PORT, '0.0.0.0', () => {
     console.log(`  → http://localhost:${PORT}`);
     console.log('');
 });
-export { server, grid };
+export { grid, server };