w1n5t0n/memlnaut-nisps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(manifold): add faithful flow-field particle port + ParticleStage view

Browse source 
Faithful TypeScript port of the a-immersive visualiser
(deployments/meml-aimmersive/js/ui/visualizer.js): 400 particles, identical
value-noise + 20-output param mapping + advection/attractor/dispersion/repulsor
integration. ParticleStage renders the full-bleed canvas (driven by engine
outputs each rAF) plus the macro-axis bar and a corner input pad.
This commit is contained in:
monkey-w1n5t0n 2026-06-28 04:21:22 +02:00
parent 19b7f7eee8
commit 785935bf25
2 changed files with 494 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
manifold/src/console/ParticleStage.tsx Normal file
View file

@ -0,0 +1,127 @@
/**
* ParticleStage — the Particle System output Mode's main view.
*
* Mirrors the a-immersive playground layout:
* • a full-bleed Canvas2D flow-field particle system (the main view), driven
* by the live model outputs (first 20) read each animation frame;
* • a horizontal macro-axis slider bar across the top (Boldness / Memory /
* Precision), the same compound axes the rest of the console uses;
* • a small circular pad in the bottom-left corner that drives the 2D input
* (engine.setInput) — the "joystick" of the immersive app.
*
* The canvas animates on its own rAF clock so particles keep flowing between
* inferences; only the *field* parameters change when the MLP outputs do.
*/
import { useEffect, useRef } from 'react';
import { useEngine } from '../engine';
import { ControlAxis } from '../primitives/ControlAxis';
import { VirtualJoystick } from '../primitives/VirtualJoystick';
import { FlowFieldVisualizer } from './flow-field';
import type { Axes } from './types';
export interface ParticleStageProps {
pos: [number, number];
onMove: (x: number, y: number) => void;
axes: Axes;
setAxis: (k: keyof Axes, v: number) => void;
}
export function ParticleStage({ pos, onMove, axes, setAxis }: ParticleStageProps) {
const engine = useEngine();
const canvasRef = useRef<HTMLCanvasElement>(null);
const vizRef = useRef<FlowFieldVisualizer | null>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const viz = new FlowFieldVisualizer(canvas);
vizRef.current = viz;
let raf = 0;
const tick = () => {
const outputs = engine?.getOutputs();
if (outputs) viz.setParams(outputs);
viz.draw();
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
const ro = new ResizeObserver(() => viz.resize());
ro.observe(canvas);
return () => {
cancelAnimationFrame(raf);
ro.disconnect();
vizRef.current = null;
};
}, [engine]);
return (
<div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#0d0d0d' }}>
{/* Main view — the flow-field particle system */}
<canvas
ref={canvasRef}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
/>
{/* Top horizontal macro-axis slider bar (Boldness / Memory / Precision) */}
<div
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
zIndex: 20,
display: 'flex',
gap: 'var(--sp-2)',
padding: 'var(--sp-2) var(--sp-3)',
alignItems: 'center',
background: 'var(--glass)',
backdropFilter: 'blur(14px)',
WebkitBackdropFilter: 'blur(14px)',
borderBottom: '1px solid var(--line)',
}}
>
<strong
style={{
color: 'var(--accent)',
fontSize: 'var(--fs-md)',
fontFamily: 'var(--font-mono)',
whiteSpace: 'nowrap',
paddingRight: 'var(--sp-2)',
}}
>
MEMLNaut
</strong>
<ControlAxis
label="Boldness"
endpoints={['Caution', 'Bold']}
value={axes.boldness}
onChange={(v) => setAxis('boldness', v)}
style={{ flex: 1 }}
/>
<ControlAxis
label="Memory"
endpoints={['Amnesia', 'Elephant']}
value={axes.memory}
onChange={(v) => setAxis('memory', v)}
accent="var(--accent-2)"
style={{ flex: 1 }}
/>
<ControlAxis
label="Precision"
endpoints={['Raw', 'Precise']}
value={axes.precision}
onChange={(v) => setAxis('precision', v)}
accent="var(--ok, var(--accent))"
style={{ flex: 1 }}
/>
</div>
{/* Bottom-left circular pad — drives the 2D input */}
<div style={{ position: 'absolute', left: 18, bottom: 18, zIndex: 20 }}>
<VirtualJoystick size={120} position={pos} onMove={onMove} ariaLabel="particle input pad" />
</div>
</div>
);
}

367
manifold/src/console/flow-field.ts Normal file
View file

@ -0,0 +1,367 @@
/**
* flow-field.ts — Canvas2D flow-field particle system, a faithful TypeScript
* port of the a-immersive playground visualiser
* (`/home/w1n5t0n/deployments/meml-aimmersive/js/ui/visualizer.js`).
*
* FAITHFULNESS (verified 2026-06-28 against the original):
* • 400 particles, identical permutation-table value noise (`PERM`/`noise2D`).
* • The first 20 model outputs (each ∈ [0,1]) map to the visual ranges exactly
* as the original `setParams` (p0..p19 — see the per-line comments below).
* • The advection/attractor/dispersion/repulsor integration in `draw()` is a
* line-for-line port of the original.
* • Deliberate improvements over the original (NOT drift):
* - `resize()` resets the transform before `scale(dpr)` so repeated resizes
* don't compound the device-pixel-ratio scale (the original double-scaled
* on every resize); it also repaints the background so a resize doesn't
* leave stale trails.
* - `draw()` early-returns while the canvas has zero size (pre-layout).
*
* The simulation advances on its own clock, so particles keep flowing between
* inferences — only the *field* changes when the MLP outputs do.
*/
// Simple value noise (no dependencies) — identical permutation scheme to the
// a-immersive port. The table is shuffled once at module load.
const PERM = new Uint8Array(512);
{
const p = new Uint8Array(256);
for (let i = 0; i < 256; i++) p[i] = i;
for (let i = 255; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[p[i], p[j]] = [p[j], p[i]];
}
for (let i = 0; i < 512; i++) PERM[i] = p[i & 255];
}
function fade(t: number): number {
return t * t * t * (t * (t * 6 - 15) + 10);
}
function lerp(a: number, b: number, t: number): number {
return a + t * (b - a);
}
function grad(hash: number, x: number, y: number): number {
const h = hash & 3;
const u = h < 2 ? x : y;
const v = h < 2 ? y : x;
return ((h & 1) ? -u : u) + ((h & 2) ? -v : v);
}
function noise2D(x: number, y: number): number {
const X = Math.floor(x) & 255;
const Y = Math.floor(y) & 255;
const xf = x - Math.floor(x);
const yf = y - Math.floor(y);
const u = fade(xf);
const v = fade(yf);
const aa = PERM[PERM[X] + Y];
const ab = PERM[PERM[X] + Y + 1];
const ba = PERM[PERM[X + 1] + Y];
const bb = PERM[PERM[X + 1] + Y + 1];
return lerp(
lerp(grad(aa, xf, yf), grad(ba, xf - 1, yf), u),
lerp(grad(ab, xf, yf - 1), grad(bb, xf - 1, yf - 1), u),
v,
);
}
const TWO_PI = Math.PI * 2;
interface Particle {
x: number;
y: number;
id: number;
age: number;
life: number;
vx: number;
vy: number;
}
interface FlowParams {
angleOffset: number;
scale: number;
speed: number;
hueBase: number;
hueSpread: number;
particleSize: number;
fadeRate: number;
turbulence: number;
attractStrength: number;
attractRadius: number;
dispersionRate: number;
dispersionAmount: number;
particleLifetime: number;
respawnStyle: number;
advectionMode: number;
inertia: number;
drag: number;
repulsorStrength: number;
repulsorCount: number;
repulsorOrbitRate: number;
}
export class FlowFieldVisualizer {
private canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D;
private particles: Particle[] = [];
private numParticles = 400;
private time = 0;
private width = 0;
private height = 0;
private params: FlowParams = {
angleOffset: 0, // p0: flow direction
scale: 0.005, // p1: pattern size
speed: 2, // p2: particle speed
hueBase: 180, // p3: base colour
hueSpread: 60, // p4: colour variation
particleSize: 3, // p5: dot radius
fadeRate: 0.05, // p6: trail length
turbulence: 1, // p7: chaos
attractStrength: 0.8, // p8: pull toward screen centre
attractRadius: 200, // p9: radius where attraction is strongest
dispersionRate: 2.0, // p10: speed of outward dispersion pulses
dispersionAmount: 1.0, // p11: strength of outward dispersion
particleLifetime: 220, // p12: average frames before respawn
respawnStyle: 0.0, // p13: 0=random, 1=edge, 2=center-burst
advectionMode: 0.0, // p14: flow->orbit->radial blend
inertia: 0.2, // p15: velocity memory
drag: 0.02, // p16: velocity damping
repulsorStrength: 0.0, // p17: repulsor force amount
repulsorCount: 0, // p18: number of active repulsors
repulsorOrbitRate: 0.8, // p19: repulsor orbital speed
};
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('FlowFieldVisualizer: 2D context unavailable');
this.ctx = ctx;
this.resize();
this.initParticles();
}
resize(): void {
const rect = this.canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
this.canvas.width = Math.max(1, Math.round(rect.width * dpr));
this.canvas.height = Math.max(1, Math.round(rect.height * dpr));
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.scale(dpr, dpr);
this.width = rect.width;
this.height = rect.height;
// Clear to background so a resize doesn't leave stale trails.
this.ctx.fillStyle = '#0d0d0d';
this.ctx.fillRect(0, 0, this.width, this.height);
}
private initParticles(): void {
this.particles = [];
for (let i = 0; i < this.numParticles; i++) {
this.particles.push(this.makeParticle(i));
}
this.ctx.fillStyle = '#0d0d0d';
this.ctx.fillRect(0, 0, this.width, this.height);
}
private makeParticle(id: number): Particle {
return {
x: Math.random() * this.width,
y: Math.random() * this.height,
id,
age: Math.floor(Math.random() * this.params.particleLifetime),
life: this.computeLifetime(),
vx: 0,
vy: 0,
};
}
private computeLifetime(): number {
const variance = 0.65 + Math.random() * 0.7;
return Math.max(10, Math.floor(this.params.particleLifetime * variance));
}
private respawnParticle(p: Particle): void {
const mode = Math.min(2, Math.floor(this.params.respawnStyle * 2.999));
const { width, height } = this;
if (mode === 1) {
// Edge respawn
const side = Math.floor(Math.random() * 4);
if (side === 0) {
p.x = Math.random() * width;
p.y = 0;
}
if (side === 1) {
p.x = width;
p.y = Math.random() * height;
}
if (side === 2) {
p.x = Math.random() * width;
p.y = height;
}
if (side === 3) {
p.x = 0;
p.y = Math.random() * height;
}
// Give edge spawns an inward impulse.
const towardCenterX = width * 0.5 - p.x;
const towardCenterY = height * 0.5 - p.y;
const inwardDist = Math.hypot(towardCenterX, towardCenterY) + 1e-6;
p.vx = (towardCenterX / inwardDist) * 2.0;
p.vy = (towardCenterY / inwardDist) * 2.0;
} else if (mode === 2) {
// Center-burst respawn
const angle = Math.random() * TWO_PI;
const r = Math.random() * Math.min(width, height) * 0.08;
p.x = width * 0.5 + Math.cos(angle) * r;
p.y = height * 0.5 + Math.sin(angle) * r;
p.vx = Math.cos(angle) * 2.5;
p.vy = Math.sin(angle) * 2.5;
} else {
// Random respawn
p.x = Math.random() * width;
p.y = Math.random() * height;
p.vx = (Math.random() * 2 - 1) * 0.5;
p.vy = (Math.random() * 2 - 1) * 0.5;
}
p.age = 0;
p.life = this.computeLifetime();
}
/** Set parameters from the model output (first 20 values, each ∈ [0,1]). */
setParams(outputs: ArrayLike<number> | null | undefined): void {
if (!outputs || outputs.length < 20) return;
this.params.angleOffset = outputs[0] * TWO_PI;
this.params.scale = 0.001 + outputs[1] * 0.009;
this.params.speed = 0.5 + outputs[2] * 4.5;
this.params.hueBase = outputs[3] * 360;
this.params.hueSpread = outputs[4] * 120;
this.params.particleSize = 1 + outputs[5] * 5;
this.params.fadeRate = 0.01 + outputs[6] * 0.14;
this.params.turbulence = outputs[7] * 2;
this.params.attractStrength = 0.1 + outputs[8] * 2.9;
this.params.attractRadius = 40 + outputs[9] * 420;
this.params.dispersionRate = 0.2 + outputs[10] * 8;
this.params.dispersionAmount = outputs[11] * 3;
this.params.particleLifetime = 30 + outputs[12] * 470;
this.params.respawnStyle = outputs[13];
this.params.advectionMode = outputs[14];
this.params.inertia = outputs[15] * 0.98;
this.params.drag = outputs[16] * 0.35;
this.params.repulsorStrength = outputs[17] * 4.5;
this.params.repulsorCount = Math.floor(outputs[18] * 4.999);
this.params.repulsorOrbitRate = 0.1 + outputs[19] * 2.9;
}
draw(): void {
const { ctx, width, height, params } = this;
if (width === 0 || height === 0) return;
this.time += 0.003;
// Fade existing content (creates trails)
ctx.fillStyle = `rgba(13, 13, 13, ${params.fadeRate})`;
ctx.fillRect(0, 0, width, height);
for (const p of this.particles) {
const cx = width * 0.5;
const cy = height * 0.5;
// Sample flow field
const nx = p.x * params.scale;
const ny = p.y * params.scale;
const angle = noise2D(nx + this.time, ny) * TWO_PI + params.angleOffset;
const curl = noise2D(nx + 100, ny + 100 + this.time * 0.5) * params.turbulence;
// Mix between three advection fields for larger visual mode changes.
const flowVx = Math.cos(angle + curl) * params.speed;
const flowVy = Math.sin(angle + curl) * params.speed;
const fromCenterX = p.x - cx;
const fromCenterY = p.y - cy;
const centerDist = Math.hypot(fromCenterX, fromCenterY) + 1e-6;
const radialX = fromCenterX / centerDist;
const radialY = fromCenterY / centerDist;
const orbitX = -radialY;
const orbitY = radialX;
const orbitVx = orbitX * params.speed;
const orbitVy = orbitY * params.speed;
const radialVx = radialX * params.speed;
const radialVy = radialY * params.speed;
const modeBlend = params.advectionMode * 2;
let targetVx: number;
let targetVy: number;
if (modeBlend < 1) {
targetVx = lerp(flowVx, orbitVx, modeBlend);
targetVy = lerp(flowVy, orbitVy, modeBlend);
} else {
targetVx = lerp(orbitVx, radialVx, modeBlend - 1);
targetVy = lerp(orbitVy, radialVy, modeBlend - 1);
}
p.vx = p.vx * params.inertia + targetVx * (1 - params.inertia);
p.vy = p.vy * params.inertia + targetVy * (1 - params.inertia);
p.vx *= 1 - params.drag;
p.vy *= 1 - params.drag;
let nextX = p.x + p.vx;
let nextY = p.y + p.vy;
// Central attractor keeps trajectories from sticking to the outer edges.
const dx = cx - nextX;
const dy = cy - nextY;
const dist = Math.hypot(dx, dy) + 1e-6;
const nxCenter = dx / dist;
const nyCenter = dy / dist;
const normalizedDist = Math.min(dist / params.attractRadius, 2);
const falloff = 1 / (1 + normalizedDist * normalizedDist);
nextX += nxCenter * params.attractStrength * falloff;
nextY += nyCenter * params.attractStrength * falloff;
// Time-varying dispersion pushes particles outward near the centre.
const dispersionPulse =
0.5 + 0.5 * Math.sin(this.time * params.dispersionRate + p.id * 0.07);
const dispersionForce = params.dispersionAmount * dispersionPulse * falloff;
nextX -= nxCenter * dispersionForce;
nextY -= nyCenter * dispersionForce;
// Orbiting repulsor points carve dynamic voids and bursts.
const repulsorRadius = Math.min(width, height) * 0.28;
for (let r = 0; r < params.repulsorCount; r++) {
const phase = this.time * params.repulsorOrbitRate + (r / 4) * TWO_PI;
const wobble = 0.6 + 0.15 * r;
const rx = cx + Math.cos(phase * (1.0 + wobble)) * repulsorRadius;
const ry = cy + Math.sin(phase * (1.3 + wobble)) * repulsorRadius;
const repulseDx = nextX - rx;
const repulseDy = nextY - ry;
const distSq = repulseDx * repulseDx + repulseDy * repulseDy + 160;
const distInv = 1 / Math.sqrt(distSq);
const force = params.repulsorStrength * (650 / distSq);
nextX += repulseDx * distInv * force;
nextY += repulseDy * distInv * force;
}
p.x = nextX;
p.y = nextY;
// Wrap around edges
if (p.x < 0) p.x += width;
if (p.x > width) p.x -= width;
if (p.y < 0) p.y += height;
if (p.y > height) p.y -= height;
p.age += 1;
if (p.age >= p.life) this.respawnParticle(p);
// Colour based on particle id + hue params
const hue = (params.hueBase + (p.id / this.numParticles) * params.hueSpread) % 360;
const lightness = 50 + Math.sin(p.id * 0.1 + this.time) * 15;
ctx.fillStyle = `hsl(${hue}, 75%, ${lightness}%)`;
ctx.beginPath();
ctx.arc(p.x, p.y, params.particleSize, 0, TWO_PI);
ctx.fill();
}
}
}