@zakkster/lite-gen

A generative art toolkit. Deterministic, color-correct, small.

The only generative art toolkit using OKLCH with zero allocations and deterministic output.

🎬 Live Demo (GenEngine)

https://codepen.io/Zahari-Shinikchiev/full/yyaMXov

Why This Library?

Feature	Lite-Gen	p5.js	Processing.js	regl	three.js
Deterministic	Yes	No	No	Yes	No
Zero-GC Hot Path	Yes	No	No	Yes	No
OKLCH Color	Yes	No	No	No	No
Simplex Noise	Yes	Via addon	Yes	No	No
Canvas2D Optimized	Yes	Medium	Medium	No	No
Bundle Size	Tiny	Large	Large	Medium	Large

Creative coding is exploding. People want small libs, deterministic output, color-correct gradients, and easy APIs. Lite-Gen delivers all four.

Performance

Noise Generation (1,000,000 samples)

Library	Speed	Allocations	Deterministic
Lite-Gen	Fastest	0	Yes
simplex-noise	Medium	Medium	Yes
perlin-noise	Slow	High	Yes

Particle Art (10,000 particles, 60 FPS)

Engine	Allocs/Frame	Frame Time (ms)	GC (10s)	Deterministic
Lite-Gen	0	1.4	0	Yes
p5.js	High	8–12	4–6	No
vanilla OOP	Very High	12–20	10+	No

Installation

npm install @zakkster/lite-gen

Quick Start — Static Art

import { GenEngine, Pattern, Shape } from '@zakkster/lite-gen';

const gen = new GenEngine(canvas, { width: 800, height: 600, seed: 42 });

gen.draw(({ art, rng, noise, width, height }) => {
    art.background({ l: 0.05, c: 0.02, h: 250 });

    // Noise-driven dot field
    Pattern.noiseDots(art, {
        noise, spacing: 15, maxRadius: 6,
        colorFn: (n) => ({ l: 0.4 + n * 0.5, c: 0.2, h: 200 + n * 80 }),
    });
});

gen.render();
gen.save('noise-dots.png');

Quick Start — Animated Art

const gen = new GenEngine(canvas, { seed: 42 });

gen.draw(({ art, noise, time, dt, width, height }) => {
    art.clear();
    // Animated noise field — time drives the Z axis
    for (let x = 0; x < width; x += 10) {
        for (let y = 0; y < height; y += 10) {
            const n = (noise.noise3D(x * 0.005, y * 0.005, time * 0.5) + 1) / 2;
            art.dot(x, y, n * 5, { l: n, c: 0.15, h: 200 });
        }
    }
});

gen.start(); // runs at 60fps

Recipes

Flow Field Trace Art

import { GenEngine, FlowField, SimplexNoise, Pattern } from '@zakkster/lite-gen';
import Random from '@zakkster/lite-random';

const gen = new GenEngine(canvas, { seed: 123 });

gen.draw(({ art, rng, noise, width, height }) => {
    art.background({ l: 0.02, c: 0.01, h: 240 });

    const field = new FlowField({ noise, scale: 0.004, strength: 3 });

    Pattern.flowTrace(art, {
        field, rng, particleCount: 800, steps: 300, stepSize: 1.5,
        colorFn: (i, t) => ({ l: 0.5 + t * 0.3, c: 0.2, h: t * 360 }),
        lineWidth: 0.4, alpha: 0.15,
    });
});

gen.render();

Poisson Disk Scatter

gen.draw(({ art, rng, width, height }) => {
    art.background({ l: 0.95, c: 0.02, h: 60 });

    const points = Shape.poissonDisk(width, height, 20, rng);
    for (const p of points) {
        const hue = (p.x + p.y) * 0.3;
        art.dot(p.x, p.y, 4, { l: 0.6, c: 0.2, h: hue % 360 });
    }
});

Lissajous Figure

gen.draw(({ art, width, height }) => {
    art.background({ l: 0.05, c: 0.01, h: 0 });

    const points = Shape.lissajous(width/2, height/2, 3, 4, 300, 200, 500);
    art.path(points, { l: 0.8, c: 0.2, h: 280, a: 0.6 }, { lineWidth: 2, close: true });
});

Agent-Based Art with lite-particles

Use @zakkster/lite-particles as autonomous "painter" agents that wander via the flow field:

import { Emitter } from '@zakkster/lite-particles';

const emitter = new Emitter({ maxParticles: 200 });
const field = new FlowField({ noise, scale: 0.01, strength: 2 });

// Spawn agents
emitter.emitBurst(100, (i) => ({
    x: rng.range(0, width), y: rng.range(0, height),
    vx: 0, vy: 0, life: 999, maxLife: 999,
    data: { trail: [] },
}));

// Each frame
emitter.update(dt);
emitter.draw(ctx, (ctx, p, life) => {
    field.applyTo(p, dt);
    p.data.trail.push({ x: p.x, y: p.y });

    // Draw ribbon trail
    if (p.data.trail.length > 2) {
        ctx.strokeStyle = toCssOklch({ l: 0.6, c: 0.15, h: p.x * 0.5 });
        ctx.beginPath();
        ctx.moveTo(p.data.trail[0].x, p.data.trail[0].y);
        for (const pt of p.data.trail) ctx.lineTo(pt.x, pt.y);
        ctx.stroke();
    }
});

Reseed and Regenerate

gen.seed(999);   // new seed = new art
gen.clear();
gen.render();    // completely different output, same code

API

GenEngine

Method	Description
`new GenEngine(canvas, options?)`	Create with optional width, height, seed, animate
`.draw(fn)`	Register draw callback. Receives `{ art, ctx, rng, noise, width, height, time, dt }`
`.render()`	Execute draw once (static art)
`.start()` / `.stop()`	Animation loop
`.seed(n)`	Reseed RNG + noise
`.resize(w, h)`	Resize canvas
`.save(filename?)`	Download as PNG
`.destroy()`	Clean teardown

Other Exports

SimplexNoise, FlowField, Shape, ArtCanvas, Pattern

License

MIT