app

Circuit Trace Generators

Public Made by Adom

by adom

Two dependency-free, seeded circuit-background generators: a seamless torus tile with ambient or progressive reveal, and the v9 continuous field with obstacles, scroll reveal, and five ambient systems.

svggenerativebackgroundpcbbrand
Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests Activity
master
circuit-trace-generators / src / FIELD-ROUTER.md
History Download
AdityaAngajala Publish 0.3.0 6d39e2e 2mo ago

Procedural circuit background

A dependency-free, seeded SVG generator modeled on the Nitrogen landing-page background. The active engine is circuit-background-v9.js. Version 8 is frozen at /v8, and version 9 is available at / and /v9.

The reference measurements used by the generator are:

  • a 7.895 unit routing grid;
  • 1.58 unit traces in #151b25;
  • horizontal and vertical channels with short 45° chamfers;
  • 3.34 / 1.76 unit annular vias;
  • Adom's teal to blue to purple signature gradient for routed light.

Unlike the source artwork, the generator does not repeat a tile. It creates one continuous field for the mount's real dimensions. A deterministic planar trace-packing pass fills that field with hundreds of independent routes. A rotatable vector field and seeded, low-frequency vortices organize long carriers, diagonal runs, and gentle swirls; channel attraction collects nearby routes into natural local buses, and reserves every occupied grid node. Separate traces therefore do not cross or overlap.

Run the demo

cd /home/adom/project/circuit-generator-codex
./serve.sh

Open http://localhost:8124. The v9 demo opens on Original match, using the same obstacle-free layout as v8. ADOM embed is the last generation preset. Dense, Diagonal sweep, Broad swirl, and Sparse remain available. The parameter panel exposes visual density, average route length, primary-flow balance, flow angle, diagonal flow, long-carrier density, swirl strength and scale, jog size, channel attraction, and obstacle placement. Movement power tunes the selected animation. Export SVG downloads the current field without motion layers.

The embedded-mark controls offer three routing modes. Avoid reserves the shape as negative space. Outline adds via-to-via traces along the exact contour. Outline + wrap also pulls nearby routes into tangent lanes around the contour. Size, position, clearance, and edge pull can be changed without affecting the reveal or ambient animation presets.

Generation, Reveal, and Animation are separate control groups. Geometry presets never change motion settings. Dense captures the high-density, thin-feature look and Sparse the opposite end: few long bundled runs at a large feature scale, so most of the field stays open. Visual density controls packing independently, while Circuit scale proportionally changes routing pitch, trace width, via rings, and routed-light geometry as one coherent motif. Every generated trace has a full annular via at both endpoints.

Reveal is independent from ambient animation. Instant mounts the complete board. Flow sweep grows every route from its source via to its destination via on a timed routing front. Scroll weave uses page progress only to make ordered routes eligible. A separate time-based queue grows each route to completion, so new traces keep resolving near the lower viewport without scrubbing when the reader scrolls quickly. Directional, radial, edge, and scatter spawn patterns can be tuned with angle, swirl, glow, duration, launch rate, active-trace count, scroll-speed response, and reveal lead controls.

Scroll weave can run as a finite field or an append-only continuous field. Continuous mode keeps one seeded world grid and one shared occupancy map, generates fixed chunks ahead during idle time, and extends the page only after the next section is ready. Existing geometry never moves or repeats when the field grows. Every appended trace still has a start via and an end via.

Ambient animation remains a separate choice: None, Adom reflection, Original conductor, Routed field, and Adom handshake. None creates no ambient layer. Adom reflection sends a slow brand-color sheen across a precomposed trace mask. Original conductor preserves the earlier currents and waves. Routed field keeps the legacy spatial field and owns its trace lifecycle, so Reveal is disabled while it is selected. Adom handshake runs a small number of via-to-via request and acknowledgement transactions. Reduced-motion preferences complete the reveal and disable ambient motion.

Reveal presets are exported as REVEAL_PRESETS:

  • Instant: the generated circuit appears complete.
  • Flow sweep: a timed, warped front grows each complete via-to-via route.
  • Scroll weave: scrolling queues independent trace growth and can append new world sections continuously.

Ambient presets are exported as ANIMATION_PRESETS:

  • None: no ambient animation layer.
  • Adom reflection: a restrained masked brand-color reflection.
  • Original conductor: the complete current, signal, and wave system.
  • Routed field: the legacy spatial field and bloom system.
  • Adom handshake: sparse via-to-via request and acknowledgement motion.

Use it in another page

<div id="hero-circuit"></div>
<script type="module">
  import { createCircuitBackground } from "./circuit-background-v9.js";

  const circuit = createCircuitBackground(
    document.querySelector("#hero-circuit"),
    {
      seed: "product-launch",
      fill: 0.668,
      routeLength: 0.78,
      horizontalFlow: 0.82,
      flowAngle: 0,
      diagonalFlow: 0.58,
      longFlow: 0.18,
      swirl: 0.28,
      swirlScale: 0.8,
      jogLength: 0.72,
      channelAttraction: 0.78,
      featureScale: 1,
      obstaclePreset: "adom",
      obstacleMode: "outline-wrap",
      obstacleScale: 0.68,
      obstacleX: 0.5,
      obstacleY: 0.66,
      obstacleClearance: 1.1,
      obstaclePull: 0.82,
      revealSystem: "scroll",
      spawnMode: "flow",
      spawnAngle: 90,
      traceDuration: 950,
      revealLaunchRate: 24,
      maxActiveTraces: 72,
      scrollSpeedResponse: 0.6,
      unlockLead: 0.025,
      continuousGeneration: true,
      generationAheadScreens: 2,
      animationSystem: "conductor",
      liveliness: 0.82,
      motion: true,
    },
  );

  // Same seed and dimensions produce identical geometry.
  circuit.regenerate({ seed: "another-layout" });

  // Reveal timing and spawn behavior can change without regenerating geometry.
  circuit.setReveal({ traceDuration: 1100, spawnAngle: 35, spawnSwirl: 0.12 });

  // Ambient animation can change without replaying the trace reveal.
  circuit.setAnimation({ animationSystem: "reflection", motion: true });

  // Trigger the selected ambient animation from a point in SVG coordinates.
  circuit.triggerAnimation({ x: 240, y: 180 });

  // Scroll progress can also be advanced from a custom page controller.
  circuit.setRevealProgress(0.5);

  // Export exactly what is mounted, without the motion layers.
  const svg = circuit.exportSvg();

  // Remove observers, listeners, timers, and generated DOM.
  // circuit.destroy();
</script>

The mount must have a real width and height. The helper observes resizes, clips overflow, respects prefers-reduced-motion, and leaves pointer interaction to the surrounding page. Pointer movement and clicks use the interaction language of the selected animation preset.

Geometry API

generateCircuitField(options) returns deterministic trace geometry without touching the DOM. Each trace contains points, length, viaStart, and viaEnd. pathData(points) converts one trace to SVG path data. Every regular and contour trace has distinct start and end points with annular vias.

Obstacles

Set obstaclePreset: "adom" for the built-in official wordmark. Programmatic callers can also pass an obstacles array. Supported types are rect, ellipse, polygon, rings, and wordmark. Coordinates are normalized to the field unless space: "world" is set.

const field = generateCircuitField({
  seed: "launch",
  width: 1200,
  height: 700,
  obstacleMode: "outline-wrap",
  obstacleClearance: 1.2,
  obstaclePull: 0.9,
  obstacles: [
    { type: "rect", x: 0.22, y: 0.3, width: 0.18, height: 0.12 },
    { type: "ellipse", x: 0.76, y: 0.34, width: 0.16, height: 0.2 },
    { type: "polygon", points: [[0.38, 0.76], [0.5, 0.56], [0.62, 0.76]] },
  ],
});

The default ADOM obstacle belongs to the first canonical page in continuous-scroll mode, so the wordmark appears once. Later generated pages continue the same seeded routing field without repeating it.

Useful options include seed, width, height, pitch, fill, routeLength, horizontalFlow, flowAngle, diagonalFlow, longFlow, swirl, swirlScale, jogLength, channelAttraction, edgeDensity, featureScale, traceColor, traceWidth, obstaclePreset, obstacleMode, obstacleScale, obstacleX, obstacleY, obstacleClearance, obstaclePull, obstacles, revealSystem, revealMotion, spawnMode, spawnAngle, spawnSwirl, spawnOriginX, spawnOriginY, traceDuration, revealLaunchRate, scrollSpeedResponse, unlockLead, maxActiveTraces, continuousGeneration, generationAheadScreens, animationSystem, liveliness, motion, signalInterval, waveInterval, ambientCurrentCount, ambientNodeCount, handshakeInterval, handshakeSpeed, handshakeLength, maxHandshakes, revealDuration, revealAngle, revealGlow, reflectionStrength, reflectionCycle, reflectionWidth, and reflectionAngle.