GUMP Viz

One script tag. Zero dependencies. Living visuals.

Coupling-based visualization engine. Canvas 2D. Works everywhere.

flock

Emergent formations from coupling. Scouts, trails, breathing, pulse propagation. The full 7-force system simplified for embedding.

<script src="https://begump.com/js/viz.js"
  data-viz="flock"
  data-n="80"></script>

kuramoto

Phase circle with N oscillators. Watch R (the order parameter) climb as oscillators synchronize. The math of fireflies, heart cells, applause.

<script src="https://begump.com/js/viz.js"
  data-viz="kuramoto"
  data-n="32"
  data-k="1.5"></script>

lorenz

The strange attractor. Deterministic chaos in warm tones. Move your mouse to rotate the projection. No two traces are the same.

<script src="https://begump.com/js/viz.js"
  data-viz="lorenz"></script>

life

Emergent biological forms. Three cell types self-organize into chains, clusters, and spirals. Same-type cells couple; different types separate.

<script src="https://begump.com/js/viz.js"
  data-viz="life"
  data-n="60"></script>

pulse

Heartbeat ripples through a network. Nodes connected by sync. The pulse originates from the nearest node to your cursor, or randomly if untouched.

<script src="https://begump.com/js/viz.js"
  data-viz="pulse"
  data-n="50"></script>

creation

0+0=1. Particles emerge, drift, discover each other, and couple. Coupled pairs orbit and glow. The founding equation, visualized.

<script src="https://begump.com/js/viz.js"
  data-viz="creation"
  data-n="120"></script>

field

Background field of distant particles with nebulae. Parallax on mouse move. Designed as a website background — quiet, deep, alive.

<script src="https://begump.com/js/viz.js"
  data-viz="field"
  data-background="true"></script>

dance

Two flocks orbiting each other. Internal coupling is strong (K = 1.868). Cross-coupling is weaker but real. The rose-gold glow between them is the 3.

<script src="https://begump.com/js/viz.js"
  data-viz="dance"
  data-n="80"></script>

Embed API

Drop one script tag. The visualization creates itself.

<!-- Minimal: fills the page -->
<script src="https://begump.com/js/viz.js" data-viz="flock"></script>

<!-- With options -->
<script src="https://begump.com/js/viz.js"
  data-viz="flock"
  data-n="100"
  data-k="1.5"
  data-palette="ocean"
  data-container="my-div-id"
  data-background="true"
  data-interactive="true"
  data-fps="60"></script>

<!-- Or programmatic -->
<script src="https://begump.com/js/viz.js"></script>
<script>
  GUMP.create({
    type: 'flock',
    container: document.getElementById('hero'),
    n: 100,
    k: 1.868,
    palette: 'ember',
    interactive: true
  });
</script>

Data Attributes

Attribute	Description	Default
data-viz	Visualization type	flock
data-n	Number of particles/oscillators	varies by type
data-k	Coupling strength	1.868
data-palette	Color palette name	ember
data-container	ID of parent element	document.body
data-background	Fixed behind page content	false
data-interactive	Respond to mouse/touch	true
data-fps	Target frame rate	60

Palettes

ember (default)

ocean

forest

mono

custom

GUMP.create({
  type: 'flock',
  palette: 'custom',
  customPalette: {
    bg: [10, 5, 20],
    particles: [[200, 100, 255], [150, 80, 220], ...],
    glow: [200, 100, 255],
    accent: [150, 80, 220],
    dim: [80, 60, 100],
    text: [230, 220, 240]
  }
});

Programmatic API

// Create returns a handle
var viz = GUMP.create({ type: 'flock', container: el });

// Update coupling strength
viz.setK(2.5);

// Change particle count (reinitializes)
viz.setN(120);

// Tear down
viz.destroy();

// Access constants
GUMP.PHI     // 1.618...
GUMP.GA      // 2.3999... (golden angle)
GUMP.K_STAR  // 1.868 (coupling ceiling)

begump.com · GUMP Viz v1.0.0 · No dependencies. No tracking. No server.