Background Generators

2 min read

PinePaper provides procedural background generators that create dynamic patterns and scenes.

Using Generators

Execute a Generator

await app.executeGenerator('drawSunburst', {
  colors: ['#4f46e5', '#7c3aed', '#a855f7'],
  rayCount: 16,
  bgColor: '#0f172a'
});

Available Generators

Generator	Description
`drawSunburst`	Radial rays from center
`drawSunsetScene`	Animated sunset with clouds
`drawGrid`	Lines, dots, or squares grid
`drawStackedCircles`	Overlapping circles
`drawCircuit`	Tech circuit board
`drawWaves`	Layered wave pattern
`drawPattern`	Geometric shapes in orbit

Get Generator List

const generators = app.getAvailableBackgroundGenerators();
generators.forEach(g => {
  console.log(g.name, g.displayName, g.description);
});

Generator Registry

The GeneratorRegistry manages all generators and supports:

Parameter schemas with validation
Live parameter updates (knobs)
Animation callbacks
Custom generator registration

Get Registry

const registry = app.generatorRegistry;

Check if Generator Exists

if (registry.has('drawSunburst')) {
  // Generator is available
}

Distribution Utilities

Built-in algorithms for natural element placement:

Poisson Disk Sampling

Evenly distributed points with minimum distance.

const points = await app.workerPool.poissonDiskSampling(800, 600, 50);
// points = [{x, y}, ...]

Golden Ratio Distribution

Spiral distribution following golden ratio.

const points = await app.workerPool.goldenRatioDistribution(100, 800, 600);

Parameters

Each generator accepts specific parameters. Use getAvailableBackgroundGenerators() to see the parameter schema for each.

Common parameters:

colors - Color palette array
bgColor - Background fill color
count - Number of elements
speed - Animation speed multiplier

Animation

Generators can include animated elements. The animation runs automatically in the view.onFrame loop.

// Generator animation updates automatically via internal update() method
// Called on every frame for generators with animations

Switching Generators

To clear a generator and switch to another mode:

// Switch to generator mode (interactive selection)
app.setBackgroundMode('generator');

// Switch to drawing mode
app.setBackgroundMode('drawing');

// Execute a new generator (replaces previous)
await app.executeGenerator('drawSunburst', { colors: ['#ff0000', '#00ff00'] });