Topological Semantic Constellation

Inspired by Dominikus Baur (@dominikus). A dynamic self-organizing force-directed network graph driven by Coulomb repulsion, Hooke spring tension, curved edge bundling, real-time luminous data packet routing, and interactive cursor perturbation physics.

Playground

60 FPS • Canvas 2D

Click + Drag to interact with field

</>

Full Executable Algorithm Code

23 lines 705 chars

// Topological Semantic Constellation (particles)
ctx.fillStyle = 'rgba(6, 8, 12, 0.18)';
ctx.fillRect(0, 0, width, height);

const cx = width * 0.5;
const cy = height * 0.5;
const maxR = Math.min(width, height) * 0.38;
const t = time * 1.2;

ctx.beginPath();
const steps = 360;
for (let i = 0; i <= steps; i++) {
  const phi = (i / steps) * Math.PI * 2;
  const r = maxR * (0.6 + 0.3 * Math.sin(phi * 6 + t * 2) * Math.cos(phi * 4 - t));
  const px = cx + Math.cos(phi) * r;
  const py = cy + Math.sin(phi) * r;
  if (i === 0) ctx.moveTo(px, py);
  else ctx.lineTo(px, py);
}
ctx.closePath();
ctx.strokeStyle = 'hsla(' + ((time * 30 + 195) % 360) + ', 95%, 68%, 0.85)';
ctx.lineWidth = 2.2;
ctx.stroke();

Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D

Mathematical Formulation

medium

Analytical Equation

\vec{F}_i = \sum_{j \neq i} \frac{k_r}{\|\vec{r}_{ij}\|^2} \hat{r}_{ij} - \sum_{j \in E_i} k_s (\|\vec{r}_{ij}\| - d_0) \hat{r}_{ij} - \mu \vec{v}_i

Click to expand

Compact Formula

F_i = sum(k_r / d^2) - sum(k_s * (d - d0)) - μ * v

Mathematical Tags

#network #graph #force-directed #data-vis #interactive #dominikus

Author: Dominikus Baur (@dominikus) Tribute Target: 60 FPS

Topological Semantic Constellation

Full Executable Algorithm Code

Mathematical Formulation

Mathematical Tags

Export & Embed: Topological Semantic Constellation

4K PNG Snapshot

WebM Video (5s Loop)

Standalone JS Script

HTML Iframe Embed

Support the Project