@wavegrid/simulator 0.2.0 → 0.3.0

package/LICENSE

@@ -1,7 +1,20 @@
-All Rights Reserved.
+The San Francisco License (SF License)
 
-Copyright (c) 2024 Interweb, Inc.
+Copyright (c) 2026 Interweb, Inc.
 
-This software and associated documentation files (the "Software") may not be
-reproduced, distributed, or used without express written permission from
-Interweb, Inc.
+Permission is granted, free of charge, to any person or organization
+obtaining a copy of this software and associated documentation files
+(the "Software"), to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit others
+to whom the Software is furnished to do the same.
+
+The only requirement is that this license notice and copyright notice
+shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/animations.d.ts

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

package/animations.js

@@ -4,9 +4,9 @@ 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;
+    wave: (grid, tick, attack, cols = grid_1.DEFAULT_GRID_COLUMNS) => {
+        for (let i = 0; i < grid.length; i++) {
+            const col = i % cols;
             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);
@@ -14,91 +14,87 @@ exports.animations = {
     },
     breathe: (grid, tick, attack) => {
         const brightness = 40 + Math.sin(tick * 0.03) * 35;
-        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+        for (let i = 0; i < grid.length; 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;
+    rainbow: (grid, tick, attack, cols = grid_1.DEFAULT_GRID_COLUMNS) => {
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
             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();
+    pacman: (grid, tick, attack, cols = grid_1.DEFAULT_GRID_COLUMNS) => {
+        const perimeter = getPerimeterIndices(grid.length, cols);
         const pos = Math.floor(tick * 0.3) % perimeter.length;
-        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+        for (let i = 0; i < grid.length; 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);
+    spiral: (grid, tick, attack, cols = grid_1.DEFAULT_GRID_COLUMNS) => {
+        const rows = Math.ceil(grid.length / cols);
+        const cx = (cols - 1) / 2;
+        const cy = (rows - 1) / 2;
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            const dx = col - cx, dy = row - cy;
+            const angle = Math.atan2(dy, dx);
+            const dist = Math.sqrt(dx * dx + dy * dy);
             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;
+    rain: (grid, tick, attack, cols = grid_1.DEFAULT_GRID_COLUMNS) => {
+        const rows = Math.ceil(grid.length / cols);
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            const phase = (tick * 0.15 + col * 2.3 + col * col * 0.7) % rows;
             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
+            brightness = 40 + phase * 5;
         else if (phase < 20)
-            brightness = 90 - (phase - 10) * 5; // first pulse down
+            brightness = 90 - (phase - 10) * 5;
         else if (phase < 30)
-            brightness = 40 + (phase - 20) * 4; // second pulse up
+            brightness = 40 + (phase - 20) * 4;
         else if (phase < 40)
-            brightness = 80 - (phase - 30) * 4; // second pulse down
+            brightness = 80 - (phase - 30) * 4;
         else
-            brightness = 40; // rest
-        for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
+            brightness = 40;
+        for (let i = 0; i < grid.length; i++) {
             (0, grid_1.setCannonTarget)(grid, i, 0, 90, brightness, attack);
         }
     }
 };
-function getPerimeterIndices() {
+function getPerimeterIndices(numCannons, cols) {
+    const rows = Math.ceil(numCannons / cols);
     const indices = [];
-    // Top row
-    for (let c = 0; c < grid_1.GRID_SIZE; c++)
+    for (let c = 0; c < cols; 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;
+    for (let r = 1; r < rows; r++)
+        indices.push(r * cols + (cols - 1));
+    for (let c = cols - 2; c >= 0; c--)
+        indices.push((rows - 1) * cols + c);
+    for (let r = rows - 2; r >= 1; r--)
+        indices.push(r * cols);
+    return indices.filter(i => i < numCannons);
 }
 function getAnimationNames() {
     return Object.keys(exports.animations);

package/esm/animations.js

@@ -1,8 +1,8 @@
-import { GRID_SIZE, NUM_CANNONS, setCannonTarget } from './grid';
+import { DEFAULT_GRID_COLUMNS, setCannonTarget } from './grid';
 export const animations = {
-    wave: (grid, tick, attack) => {
-        for (let i = 0; i < NUM_CANNONS; i++) {
-            const col = i % GRID_SIZE;
+    wave: (grid, tick, attack, cols = DEFAULT_GRID_COLUMNS) => {
+        for (let i = 0; i < grid.length; i++) {
+            const col = i % cols;
             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);
@@ -10,91 +10,87 @@ export const animations = {
     },
     breathe: (grid, tick, attack) => {
         const brightness = 40 + Math.sin(tick * 0.03) * 35;
-        for (let i = 0; i < NUM_CANNONS; i++) {
+        for (let i = 0; i < grid.length; 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;
+    rainbow: (grid, tick, attack, cols = DEFAULT_GRID_COLUMNS) => {
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
             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();
+    pacman: (grid, tick, attack, cols = DEFAULT_GRID_COLUMNS) => {
+        const perimeter = getPerimeterIndices(grid.length, cols);
         const pos = Math.floor(tick * 0.3) % perimeter.length;
-        for (let i = 0; i < NUM_CANNONS; i++) {
+        for (let i = 0; i < grid.length; 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);
+    spiral: (grid, tick, attack, cols = DEFAULT_GRID_COLUMNS) => {
+        const rows = Math.ceil(grid.length / cols);
+        const cx = (cols - 1) / 2;
+        const cy = (rows - 1) / 2;
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            const dx = col - cx, dy = row - cy;
+            const angle = Math.atan2(dy, dx);
+            const dist = Math.sqrt(dx * dx + dy * dy);
             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;
+    rain: (grid, tick, attack, cols = DEFAULT_GRID_COLUMNS) => {
+        const rows = Math.ceil(grid.length / cols);
+        for (let i = 0; i < grid.length; i++) {
+            const row = Math.floor(i / cols);
+            const col = i % cols;
+            const phase = (tick * 0.15 + col * 2.3 + col * col * 0.7) % rows;
             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
+            brightness = 40 + phase * 5;
         else if (phase < 20)
-            brightness = 90 - (phase - 10) * 5; // first pulse down
+            brightness = 90 - (phase - 10) * 5;
         else if (phase < 30)
-            brightness = 40 + (phase - 20) * 4; // second pulse up
+            brightness = 40 + (phase - 20) * 4;
         else if (phase < 40)
-            brightness = 80 - (phase - 30) * 4; // second pulse down
+            brightness = 80 - (phase - 30) * 4;
         else
-            brightness = 40; // rest
-        for (let i = 0; i < NUM_CANNONS; i++) {
+            brightness = 40;
+        for (let i = 0; i < grid.length; i++) {
             setCannonTarget(grid, i, 0, 90, brightness, attack);
         }
     }
 };
-function getPerimeterIndices() {
+function getPerimeterIndices(numCannons, cols) {
+    const rows = Math.ceil(numCannons / cols);
     const indices = [];
-    // Top row
-    for (let c = 0; c < GRID_SIZE; c++)
+    for (let c = 0; c < cols; 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;
+    for (let r = 1; r < rows; r++)
+        indices.push(r * cols + (cols - 1));
+    for (let c = cols - 2; c >= 0; c--)
+        indices.push((rows - 1) * cols + c);
+    for (let r = rows - 2; r >= 1; r--)
+        indices.push(r * cols);
+    return indices.filter(i => i < numCannons);
 }
 export function getAnimationNames() {
     return Object.keys(animations);

package/esm/grid.js

@@ -1,13 +1,16 @@
-export const NUM_CANNONS = 49;
-export const GRID_SIZE = 7;
+export const DEFAULT_NUM_CANNONS = 49;
+export const DEFAULT_GRID_COLUMNS = 7;
+// Legacy aliases for backwards compatibility
+export const NUM_CANNONS = DEFAULT_NUM_CANNONS;
+export const GRID_SIZE = DEFAULT_GRID_COLUMNS;
 /**
  * Smoothing factor per tick (0–1).
  * Lower = smoother/slower transitions (more low-pass filtering).
  * At 60fps with alpha=0.08, a full transition takes ~1.5s to settle.
  */
 export const DEFAULT_ALPHA = 0.08;
-export function createGrid() {
-    return Array.from({ length: NUM_CANNONS }, () => ({
+export function createGrid(numCannons = DEFAULT_NUM_CANNONS) {
+    return Array.from({ length: numCannons }, () => ({
         h: 220,
         s: 90,
         b: 80,

package/esm/index.js

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

package/esm/scenes.js

@@ -1,31 +1,31 @@
-import { NUM_CANNONS, setCannonTarget } from './grid';
+import { DEFAULT_GRID_COLUMNS, setCannonTarget } from './grid';
 export const scenes = {
     civic: () => ({ h: 220, s: 90, b: 80 }),
     pride: (i, total) => ({ h: Math.round((i / total) * 360), s: 90, b: 80 }),
     gold: () => ({ h: 45, s: 95, b: 80 }),
     white: () => ({ h: 0, s: 0, b: 80 }),
-    solstice: (i) => {
-        const row = Math.floor(i / 7);
-        const col = i % 7;
+    solstice: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
         return { h: 40 + row * 5 + col * 4, s: 85, b: 80 };
     },
-    ocean: (i) => {
-        const row = Math.floor(i / 7);
-        const col = i % 7;
+    ocean: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
         return { h: 180 + row * 8 + col * 3, s: 75, b: 70 };
     },
-    sunset: (i) => {
-        const row = Math.floor(i / 7);
+    sunset: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
         return { h: 10 + row * 5, s: 90, b: 85 - row * 5 };
     },
     off: () => ({ h: 0, s: 0, b: 0 })
 };
-export function applyScene(grid, sceneName) {
+export function applyScene(grid, sceneName, gridColumns = DEFAULT_GRID_COLUMNS) {
     const generator = scenes[sceneName];
     if (!generator)
         return;
-    for (let i = 0; i < NUM_CANNONS; i++) {
-        const { h, s, b } = generator(i, NUM_CANNONS);
+    for (let i = 0; i < grid.length; i++) {
+        const { h, s, b } = generator(i, grid.length, gridColumns);
         setCannonTarget(grid, i, h, s, b);
     }
 }

package/esm/server.js

@@ -1,12 +1,14 @@
 import http from 'http';
 import { WebSocket, WebSocketServer } from 'ws';
 import { animations } from './animations';
-import { createGrid, DEFAULT_ALPHA, setAllTargets, setCannonTarget, tickGrid } from './grid';
+import { createGrid, DEFAULT_ALPHA, DEFAULT_GRID_COLUMNS, DEFAULT_NUM_CANNONS, 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 NUM_CANNONS = process.env.NUM_CANNONS ? parseInt(process.env.NUM_CANNONS, 10) : DEFAULT_NUM_CANNONS;
+const GRID_COLUMNS = process.env.GRID_COLUMNS ? parseInt(process.env.GRID_COLUMNS, 10) : DEFAULT_GRID_COLUMNS;
+const grid = createGrid(NUM_CANNONS);
 let currentAlpha = DEFAULT_ALPHA;
 let currentAttack = 1.0;
 let currentAnimation = null;
@@ -22,7 +24,7 @@ const server = http.createServer((req, res) => {
         return;
     }
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-    res.end(getHTML());
+    res.end(getHTML(NUM_CANNONS, GRID_COLUMNS));
 });
 const wss = new WebSocketServer({ server });
 function broadcastState() {
@@ -63,7 +65,7 @@ function handleMessage(msg) {
         case 'scene':
             if (msg.name && scenes[msg.name]) {
                 currentAnimation = null;
-                applyScene(grid, msg.name);
+                applyScene(grid, msg.name, GRID_COLUMNS);
             }
             break;
         case 'animation':
@@ -99,7 +101,7 @@ function handleMessage(msg) {
 // Animation loop: tick interpolation and broadcast
 setInterval(() => {
     if (currentAnimation && animations[currentAnimation]) {
-        animations[currentAnimation](grid, animationTick, currentAttack);
+        animations[currentAnimation](grid, animationTick, currentAttack, GRID_COLUMNS);
         animationTick++;
     }
     const changed = tickGrid(grid, currentAlpha);
@@ -107,14 +109,16 @@ setInterval(() => {
         broadcastState();
     }
 }, TICK_MS);
+const GRID_ROWS = Math.ceil(NUM_CANNONS / GRID_COLUMNS);
 server.listen(PORT, '0.0.0.0', () => {
     console.log('');
     console.log('╔══════════════════════════════════════════╗');
-    console.log('║   Illuminate · 7×7 Grid Simulator       ║');
-    console.log('║   49 virtual cannons ready               ║');
+    console.log(`║   Wavegrid · ${GRID_COLUMNS}×${GRID_ROWS} Grid Simulator${' '.repeat(Math.max(0, 16 - String(GRID_COLUMNS).length - String(GRID_ROWS).length))}║`);
+    console.log(`║   ${NUM_CANNONS} virtual cannons ready${' '.repeat(Math.max(0, 21 - String(NUM_CANNONS).length))}║`);
     console.log('╚══════════════════════════════════════════╝');
     console.log('');
     console.log(`  → http://localhost:${PORT}`);
+    console.log(`  → Grid: ${NUM_CANNONS} cannons (${GRID_COLUMNS} columns)`);
     console.log('');
 });
 export { grid, server };

package/esm/ui.js

@@ -1,8 +1,9 @@
 import { animations } from './animations';
 import { scenes } from './scenes';
-export function getHTML() {
+export function getHTML(numCannons = 49, gridColumns = 7) {
     const sceneNames = Object.keys(scenes);
     const animationNames = Object.keys(animations);
+    const gridRows = Math.ceil(numCannons / gridColumns);
     return `<!DOCTYPE html>
 <html>
 <head>
@@ -99,7 +100,7 @@ export function getHTML() {
 
     .grid {
       display: grid;
-      grid-template-columns: repeat(7, 1fr);
+      grid-template-columns: repeat(${gridColumns}, 1fr);
       gap: 4px;
       max-width: 420px;
     }
@@ -168,7 +169,7 @@ export function getHTML() {
 <body>
 
 <h1>Wavegrid · Master Controller</h1>
-<div class="subtitle">7×7 Civic Center Plaza · 49 cannons</div>
+<div class="subtitle">${gridColumns}×${gridRows} Grid · ${numCannons} cannons</div>
 
 <div class="columns">
 <div class="col-left">
@@ -272,7 +273,8 @@ export function getHTML() {
 <div class="status" id="status">Connecting...</div>
 
 <script>
-const NUM = 49;
+const NUM = ${numCannons};
+const COLS = ${gridColumns};
 const ws = new WebSocket('ws://' + location.host);
 const status = document.getElementById('status');
 const selected = new Set();
@@ -286,7 +288,7 @@ let idleTimeout = 0;
 let idleSeconds = 0;
 let lastInputTime = Date.now();
 
-ws.onopen = () => { status.textContent = 'Connected · 49 cannons · master controller'; };
+ws.onopen = () => { status.textContent = 'Connected · ' + NUM + ' cannons · master controller'; };
 ws.onclose = () => { status.textContent = 'Disconnected — reload page'; };
 
 ws.onmessage = (e) => {
@@ -328,22 +330,23 @@ for (let i = 0; i < NUM; i++) {
 
 // Build row/col buttons
 const rcEl = document.getElementById('rc-btns');
-for (let r = 0; r < 7; r++) {
+const ROWS = Math.ceil(NUM / COLS);
+for (let r = 0; r < ROWS; r++) {
   const btn = document.createElement('button');
   btn.className = 'rc-btn';
   btn.textContent = 'R' + (r + 1);
   btn.addEventListener('click', () => {
-    for (let c = 0; c < 7; c++) selectOn(r * 7 + c);
+    for (let c = 0; c < COLS; c++) { const idx = r * COLS + c; if (idx < NUM) selectOn(idx); }
     updatePanel();
   });
   rcEl.appendChild(btn);
 }
-for (let c = 0; c < 7; c++) {
+for (let c = 0; c < COLS; c++) {
   const btn = document.createElement('button');
   btn.className = 'rc-btn';
   btn.textContent = 'C' + (c + 1);
   btn.addEventListener('click', () => {
-    for (let r = 0; r < 7; r++) selectOn(r * 7 + c);
+    for (let r = 0; r < ROWS; r++) { const idx = r * COLS + c; if (idx < NUM) selectOn(idx); }
     updatePanel();
   });
   rcEl.appendChild(btn);

package/grid.d.ts

@@ -8,6 +8,8 @@ export interface CannonTarget extends CannonState {
     targetS: number;
     targetB: number;
 }
+export declare const DEFAULT_NUM_CANNONS = 49;
+export declare const DEFAULT_GRID_COLUMNS = 7;
 export declare const NUM_CANNONS = 49;
 export declare const GRID_SIZE = 7;
 /**
@@ -16,7 +18,7 @@ export declare const GRID_SIZE = 7;
  * At 60fps with alpha=0.08, a full transition takes ~1.5s to settle.
  */
 export declare const DEFAULT_ALPHA = 0.08;
-export declare function createGrid(): CannonTarget[];
+export declare function createGrid(numCannons?: number): CannonTarget[];
 /**
  * Exponential low-pass filter (lerp toward target).
  * Called once per animation frame to smoothly converge current → target.

package/grid.js

@@ -1,20 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_ALPHA = exports.GRID_SIZE = exports.NUM_CANNONS = void 0;
+exports.DEFAULT_ALPHA = exports.GRID_SIZE = exports.NUM_CANNONS = exports.DEFAULT_GRID_COLUMNS = exports.DEFAULT_NUM_CANNONS = void 0;
 exports.createGrid = createGrid;
 exports.tickGrid = tickGrid;
 exports.setCannonTarget = setCannonTarget;
 exports.setAllTargets = setAllTargets;
-exports.NUM_CANNONS = 49;
-exports.GRID_SIZE = 7;
+exports.DEFAULT_NUM_CANNONS = 49;
+exports.DEFAULT_GRID_COLUMNS = 7;
+// Legacy aliases for backwards compatibility
+exports.NUM_CANNONS = exports.DEFAULT_NUM_CANNONS;
+exports.GRID_SIZE = exports.DEFAULT_GRID_COLUMNS;
 /**
  * Smoothing factor per tick (0–1).
  * Lower = smoother/slower transitions (more low-pass filtering).
  * At 60fps with alpha=0.08, a full transition takes ~1.5s to settle.
  */
 exports.DEFAULT_ALPHA = 0.08;
-function createGrid() {
-    return Array.from({ length: exports.NUM_CANNONS }, () => ({
+function createGrid(numCannons = exports.DEFAULT_NUM_CANNONS) {
+    return Array.from({ length: numCannons }, () => ({
         h: 220,
         s: 90,
         b: 80,

package/index.d.ts

@@ -1,6 +1,6 @@
 export type { AnimationFn } from './animations';
 export { animations, getAnimationNames } from './animations';
 export type { CannonState, CannonTarget } from './grid';
-export { createGrid, DEFAULT_ALPHA, GRID_SIZE, NUM_CANNONS, setAllTargets, setCannonTarget, tickGrid } from './grid';
+export { createGrid, DEFAULT_ALPHA, DEFAULT_GRID_COLUMNS, DEFAULT_NUM_CANNONS, GRID_SIZE, NUM_CANNONS, setAllTargets, setCannonTarget, tickGrid } from './grid';
 export type { SceneColor, SceneGenerator } from './scenes';
 export { applyScene, scenes } from './scenes';

package/index.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scenes = exports.applyScene = exports.tickGrid = exports.setCannonTarget = exports.setAllTargets = exports.NUM_CANNONS = exports.GRID_SIZE = exports.DEFAULT_ALPHA = exports.createGrid = exports.getAnimationNames = exports.animations = void 0;
+exports.scenes = exports.applyScene = exports.tickGrid = exports.setCannonTarget = exports.setAllTargets = exports.NUM_CANNONS = exports.GRID_SIZE = exports.DEFAULT_NUM_CANNONS = exports.DEFAULT_GRID_COLUMNS = exports.DEFAULT_ALPHA = exports.createGrid = exports.getAnimationNames = exports.animations = void 0;
 var animations_1 = require("./animations");
 Object.defineProperty(exports, "animations", { enumerable: true, get: function () { return animations_1.animations; } });
 Object.defineProperty(exports, "getAnimationNames", { enumerable: true, get: function () { return animations_1.getAnimationNames; } });
 var grid_1 = require("./grid");
 Object.defineProperty(exports, "createGrid", { enumerable: true, get: function () { return grid_1.createGrid; } });
 Object.defineProperty(exports, "DEFAULT_ALPHA", { enumerable: true, get: function () { return grid_1.DEFAULT_ALPHA; } });
+Object.defineProperty(exports, "DEFAULT_GRID_COLUMNS", { enumerable: true, get: function () { return grid_1.DEFAULT_GRID_COLUMNS; } });
+Object.defineProperty(exports, "DEFAULT_NUM_CANNONS", { enumerable: true, get: function () { return grid_1.DEFAULT_NUM_CANNONS; } });
 Object.defineProperty(exports, "GRID_SIZE", { enumerable: true, get: function () { return grid_1.GRID_SIZE; } });
 Object.defineProperty(exports, "NUM_CANNONS", { enumerable: true, get: function () { return grid_1.NUM_CANNONS; } });
 Object.defineProperty(exports, "setAllTargets", { enumerable: true, get: function () { return grid_1.setAllTargets; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavegrid/simulator",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Dan Lynch <pyramation@gmail.com>",
   "description": "7×7 RGB grid simulator with smooth transitions",
   "main": "index.js",
@@ -43,5 +43,5 @@
     "@types/ws": "^8.5.13",
     "makage": "^0.3.0"
   },
-  "gitHead": "579bfca2fe84231a6722d3b4bfd44d1f42a0c9ef"
+  "gitHead": "1fc162ccd34d4b7e3594d26ee20043fb24a14ec6"
 }

package/scenes.d.ts

@@ -4,6 +4,6 @@ export interface SceneColor {
     s: number;
     b: number;
 }
-export type SceneGenerator = (index: number, total: number) => SceneColor;
+export type SceneGenerator = (index: number, total: number, gridColumns: number) => SceneColor;
 export declare const scenes: Record<string, SceneGenerator>;
-export declare function applyScene(grid: CannonTarget[], sceneName: string): void;
+export declare function applyScene(grid: CannonTarget[], sceneName: string, gridColumns?: number): void;

package/scenes.js

@@ -8,28 +8,28 @@ exports.scenes = {
     pride: (i, total) => ({ h: Math.round((i / total) * 360), s: 90, b: 80 }),
     gold: () => ({ h: 45, s: 95, b: 80 }),
     white: () => ({ h: 0, s: 0, b: 80 }),
-    solstice: (i) => {
-        const row = Math.floor(i / 7);
-        const col = i % 7;
+    solstice: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
         return { h: 40 + row * 5 + col * 4, s: 85, b: 80 };
     },
-    ocean: (i) => {
-        const row = Math.floor(i / 7);
-        const col = i % 7;
+    ocean: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
+        const col = i % cols;
         return { h: 180 + row * 8 + col * 3, s: 75, b: 70 };
     },
-    sunset: (i) => {
-        const row = Math.floor(i / 7);
+    sunset: (i, _total, cols) => {
+        const row = Math.floor(i / cols);
         return { h: 10 + row * 5, s: 90, b: 85 - row * 5 };
     },
     off: () => ({ h: 0, s: 0, b: 0 })
 };
-function applyScene(grid, sceneName) {
+function applyScene(grid, sceneName, gridColumns = grid_1.DEFAULT_GRID_COLUMNS) {
     const generator = exports.scenes[sceneName];
     if (!generator)
         return;
-    for (let i = 0; i < grid_1.NUM_CANNONS; i++) {
-        const { h, s, b } = generator(i, grid_1.NUM_CANNONS);
+    for (let i = 0; i < grid.length; i++) {
+        const { h, s, b } = generator(i, grid.length, gridColumns);
         (0, grid_1.setCannonTarget)(grid, i, h, s, b);
     }
 }

package/server.js

@@ -12,7 +12,9 @@ const scenes_1 = require("./scenes");
 const ui_1 = require("./ui");
 const PORT = parseInt(process.env.PORT || '3000', 10);
 const TICK_MS = 1000 / 60; // 60fps interpolation
-const grid = (0, grid_1.createGrid)();
+const NUM_CANNONS = process.env.NUM_CANNONS ? parseInt(process.env.NUM_CANNONS, 10) : grid_1.DEFAULT_NUM_CANNONS;
+const GRID_COLUMNS = process.env.GRID_COLUMNS ? parseInt(process.env.GRID_COLUMNS, 10) : grid_1.DEFAULT_GRID_COLUMNS;
+const grid = (0, grid_1.createGrid)(NUM_CANNONS);
 exports.grid = grid;
 let currentAlpha = grid_1.DEFAULT_ALPHA;
 let currentAttack = 1.0;
@@ -29,7 +31,7 @@ const server = http_1.default.createServer((req, res) => {
         return;
     }
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-    res.end((0, ui_1.getHTML)());
+    res.end((0, ui_1.getHTML)(NUM_CANNONS, GRID_COLUMNS));
 });
 exports.server = server;
 const wss = new ws_1.WebSocketServer({ server });
@@ -71,7 +73,7 @@ function handleMessage(msg) {
         case 'scene':
             if (msg.name && scenes_1.scenes[msg.name]) {
                 currentAnimation = null;
-                (0, scenes_1.applyScene)(grid, msg.name);
+                (0, scenes_1.applyScene)(grid, msg.name, GRID_COLUMNS);
             }
             break;
         case 'animation':
@@ -107,7 +109,7 @@ function handleMessage(msg) {
 // Animation loop: tick interpolation and broadcast
 setInterval(() => {
     if (currentAnimation && animations_1.animations[currentAnimation]) {
-        animations_1.animations[currentAnimation](grid, animationTick, currentAttack);
+        animations_1.animations[currentAnimation](grid, animationTick, currentAttack, GRID_COLUMNS);
         animationTick++;
     }
     const changed = (0, grid_1.tickGrid)(grid, currentAlpha);
@@ -115,13 +117,15 @@ setInterval(() => {
         broadcastState();
     }
 }, TICK_MS);
+const GRID_ROWS = Math.ceil(NUM_CANNONS / GRID_COLUMNS);
 server.listen(PORT, '0.0.0.0', () => {
     console.log('');
     console.log('╔══════════════════════════════════════════╗');
-    console.log('║   Illuminate · 7×7 Grid Simulator       ║');
-    console.log('║   49 virtual cannons ready               ║');
+    console.log(`║   Wavegrid · ${GRID_COLUMNS}×${GRID_ROWS} Grid Simulator${' '.repeat(Math.max(0, 16 - String(GRID_COLUMNS).length - String(GRID_ROWS).length))}║`);
+    console.log(`║   ${NUM_CANNONS} virtual cannons ready${' '.repeat(Math.max(0, 21 - String(NUM_CANNONS).length))}║`);
     console.log('╚══════════════════════════════════════════╝');
     console.log('');
     console.log(`  → http://localhost:${PORT}`);
+    console.log(`  → Grid: ${NUM_CANNONS} cannons (${GRID_COLUMNS} columns)`);
     console.log('');
 });

package/ui.d.ts

@@ -1 +1 @@
-export declare function getHTML(): string;
+export declare function getHTML(numCannons?: number, gridColumns?: number): string;

package/ui.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getHTML = getHTML;
 const animations_1 = require("./animations");
 const scenes_1 = require("./scenes");
-function getHTML() {
+function getHTML(numCannons = 49, gridColumns = 7) {
     const sceneNames = Object.keys(scenes_1.scenes);
     const animationNames = Object.keys(animations_1.animations);
+    const gridRows = Math.ceil(numCannons / gridColumns);
     return `<!DOCTYPE html>
 <html>
 <head>
@@ -102,7 +103,7 @@ function getHTML() {
 
     .grid {
       display: grid;
-      grid-template-columns: repeat(7, 1fr);
+      grid-template-columns: repeat(${gridColumns}, 1fr);
       gap: 4px;
       max-width: 420px;
     }
@@ -171,7 +172,7 @@ function getHTML() {
 <body>
 
 <h1>Wavegrid · Master Controller</h1>
-<div class="subtitle">7×7 Civic Center Plaza · 49 cannons</div>
+<div class="subtitle">${gridColumns}×${gridRows} Grid · ${numCannons} cannons</div>
 
 <div class="columns">
 <div class="col-left">
@@ -275,7 +276,8 @@ function getHTML() {
 <div class="status" id="status">Connecting...</div>
 
 <script>
-const NUM = 49;
+const NUM = ${numCannons};
+const COLS = ${gridColumns};
 const ws = new WebSocket('ws://' + location.host);
 const status = document.getElementById('status');
 const selected = new Set();
@@ -289,7 +291,7 @@ let idleTimeout = 0;
 let idleSeconds = 0;
 let lastInputTime = Date.now();
 
-ws.onopen = () => { status.textContent = 'Connected · 49 cannons · master controller'; };
+ws.onopen = () => { status.textContent = 'Connected · ' + NUM + ' cannons · master controller'; };
 ws.onclose = () => { status.textContent = 'Disconnected — reload page'; };
 
 ws.onmessage = (e) => {
@@ -331,22 +333,23 @@ for (let i = 0; i < NUM; i++) {
 
 // Build row/col buttons
 const rcEl = document.getElementById('rc-btns');
-for (let r = 0; r < 7; r++) {
+const ROWS = Math.ceil(NUM / COLS);
+for (let r = 0; r < ROWS; r++) {
   const btn = document.createElement('button');
   btn.className = 'rc-btn';
   btn.textContent = 'R' + (r + 1);
   btn.addEventListener('click', () => {
-    for (let c = 0; c < 7; c++) selectOn(r * 7 + c);
+    for (let c = 0; c < COLS; c++) { const idx = r * COLS + c; if (idx < NUM) selectOn(idx); }
     updatePanel();
   });
   rcEl.appendChild(btn);
 }
-for (let c = 0; c < 7; c++) {
+for (let c = 0; c < COLS; c++) {
   const btn = document.createElement('button');
   btn.className = 'rc-btn';
   btn.textContent = 'C' + (c + 1);
   btn.addEventListener('click', () => {
-    for (let r = 0; r < 7; r++) selectOn(r * 7 + c);
+    for (let r = 0; r < ROWS; r++) { const idx = r * COLS + c; if (idx < NUM) selectOn(idx); }
     updatePanel();
   });
   rcEl.appendChild(btn);