openprocessing_p5js · TronLightcycle
Tron Lightcycle Trails
Tron-style lightcycle trails. Each cycle moves at a fixed speed along one of four cardinal directions; on a random tick (or before hitting an existing trail) it turns left or right by 90 degrees, leaving behind a glowing tail that the other cycles must avoid. Crashes terminate the offending cycle; survivors continue until all are gone.
Original: https://codepen.io/BretCameron/pen/PoYERQK
▶ Try the live demo (JS port) ▶ Run reference.py via Pyodide 10 formulas have instant JS ports. The Pyodide path runs the actual Python in your browser — first load is ~6 MB, then instant.
Math essence
Per cycle: v in {(1,0),(0,1),(-1,0),(0,-1)}. With prob turn_prob: v <- (v_y, -v_x) or (-v_y, v_x) (90-deg left/right). Integrate position; stamp trail pixel on canvas with high alpha. On collision with non-background pixel or out-of-bounds: cycle dies.
Parameters
| Name | Type | Default | Range | Description |
|---|---|---|---|---|
dim | int | 512 | 200–1200 | Square arena side length. |
num_cycles | int | 6 | 1–24 | Number of lightcycles. |
speed | float | 1.4 | 0.5–12 | Pixels per tick per cycle. |
turn_prob | float | 0.05 | 0–0.2 | Per-tick probability of random turn. |
trail_alpha | float | 0.92 | 0.2–1 | Trail opacity per stamp. |
bg_color | tuple | 4,6,12 | — | Background arena color. |
seed | int | null | 0–999999 |
Reference
First 60 lines of reference.py. Full source:
library_external/openprocessing_p5js/TronLightcycle/reference.py
from __future__ import annotations
from typing import ClassVar
import numpy as np
class TronLightcycle:
"""Tron-style lightcycle trails on a 2-D arena.
Each lightcycle moves at a fixed speed along one of four cardinal
directions (N, E, S, W). On a random tick (or when it is about to crash
into an existing trail) it turns left or right by 90 degrees, leaving
behind a glowing tail that all the other cycles must avoid. Crashes
terminate the offending cycle; surviving cycles continue. This is the
classic Tron / OpenProcessing "tron-style trails" sketch family
(cf. <https://codepen.io/BretCameron/pen/PoYERQK> and the various Tron
forks on openprocessing.org).
The state is fully deterministic given ``seed`` and ``num_cycles``: a
cyclic RNG drives both the initial heading distribution and the per-tick
turn schedule. Trails are stamped onto the canvas each frame with a small
low-alpha blend so older segments fade slowly.
``step(n)`` advances the simulation by n ticks; ``render()`` returns the
accumulated trail canvas.
"""
family: ClassVar[str] = "openprocessing_p5js"
sketch: ClassVar[str] = "tronLightcycle"
def __init__(
self,
dim: int = 512,
num_cycles: int = 6,
speed: float = 1.0,
turn_prob: float = 0.04,
trail_alpha: float = 0.92,
bg_color: tuple[int, int, int] = (4, 6, 12),
palette: tuple[tuple[int, int, int], ...] | None = None,
seed: int | None = None,
) -> None:
self.dim = dim
self.num_cycles = num_cycles
self.speed = speed
self.turn_prob = turn_prob
self.trail_alpha = trail_alpha
self.bg_color = np.array(bg_color, dtype=np.float32)
if palette is None:
palette = (
(255, 32, 64),
(32, 220, 255),
(255, 240, 80),
(160, 80, 255),
(80, 255, 160),
(255, 128, 32),
)
self.palette = np.array(palette, dtype=np.float32)
self._seed = seed
self.reset() Try running it locally
The reference implementation is self-contained Python with numpy. Install the package and run:
python library_external/openprocessing_p5js/TronLightcycle/reference.py Need help? See Learn for the standard environment setup, or Playground for an in-browser sketchbook.
More from openprocessing · p5.js
Additive Synthesis Waveform Visualisation
openprocessing_p5js · SoundWaveform
Visualisation of additive synthesis: y(t) = A * sum_{i=0..N-1} a_i * sin(2π f_i t + phi_i).
Inverse-distance Attractor Network
openprocessing_p5js · AttractorNetwork
A population of point-agents, each carrying a position and a velocity, mutually attracted by an inverse-distance force F = G / max(d, d_min)^alpha along the displacement vector.
Kaleidoscope Mirror Mandala
openprocessing_p5js · KaleidoscopeMirror
Draws a single wandering line and reflects it across N rotational mirrors around the canvas centre.
Mathematical Rose (Rhodonea) Patterns
openprocessing_p5js · PolarCurves
Overlay of multiple rose (rhodonea) curves in the canonical polar form r = a * cos((n/d) * theta + phase), parametrised by the rational multiplier k = n/d.
Poincaré Disk Hyperbolic Tessellation
openprocessing_p5js · HyperbolicTiling
Escher-style regular hyperbolic tessellation in the Poincaré disk.