P5Live sin/cos Spirograph Sketch

Math essence

For each point i in [0, N): a_i = i*point_freq + t*0.01; ring_mod = (1/R) Σ ring_radii[k] * sin(t*ring_freqs[k] + ring_phases[k] + jitter*0.5); r0 = 0.55*max_r + ring_mod; x = cx + r0*cos(a_i); y = cy + r0*sin(a_i); sz = 4 + 4*sin(t*size_freq + i*0.21); hue = (i/N + t*hue_speed/360) mod 1; canvas = max(canvas, falloff*HSV2RGB(hue, 0.65, 1.0)).

Parameters

Reference

First 60 lines of reference.py. Full source: library_external/live_coding_synth/P5LiveSketch/reference.py

"""P5LiveSketch — a p5.js-style live-coding sketch in pure numpy.

A sin/cos-driven parametric animation that re-creates the visual
a P5Live session produces when a coder types lines like:

    function setup() { createCanvas(W, W); }
    function draw() {
        background(8, 12, 24);
        translate(W/2, W/2);
        for (let i = 0; i < 200; i++) {
            const r = 80 + 60 * sin(t * 0.07 + i * 0.13);
            const a = i * 0.31 + t * 0.01;
            const x = r * cos(a);
            const y = r * sin(a);
            const sz = 6 + 4 * cos(t * 0.13 + i * 0.2);
            fill(200 + 50*sin(t + i), 100 + 100*cos(t*0.5), 200);
            noStroke();
            ellipse(x, y, sz, sz);
        }
    }

In numpy form: a single `step()` advances the clock, every frame
rebuilds a vectorised cloud of 200 sin/cos-driven ellipses on a
trail-decaying canvas — the canonical "p5.js sin/cos generative
art" sketch that the live-coding community has run for a decade.
The default sketch is a *hypotrochoid-style spirograph* of 3
nested sin/cos rings whose radii morph over time, exactly the
"circle of circles" pattern that appears in the Coding Train's
"sin/cos" lessons and in P5Live demo reels.
"""

from __future__ import annotations

from typing import ClassVar

import numpy as np


class P5LiveSketch:
    """A p5.js-style sin/cos generative sketch rendered in numpy.

    The default sketch draws a spirograph-like cloud of points
    whose polar coordinates are themselves nested sin/cos chains:

        ring_k(θ_i) = R_k + r_k * sin(t * ω_k + φ_k)
        a(θ_i)     = θ_i * n + t * 0.01
        x = Σ ring_k * cos(a + δ_k)
        y = Σ ring_k * sin(a + δ_k)
        sz = 4 + 4 * sin(t * 0.13 + i * 0.21)
        hue = HSV( (i + t * 30) / N, 0.6, 1.0 )

    The full canvas is redrawn every step on a low-trail background
    so past frames leave a soft ghost — the same trail-accumulation
    look that P5Live / p5.js sketches produce when you `background(0, 5)`
    instead of `background(0)` each frame.
    """

    family: ClassVar[str] = "live_coding_synth"
    sketch: ClassVar[str] = "P5LiveSketch"