Using the Renderer

Renderer

The renderer module provides a canvas-based animation system for rendering generative line art. It wraps the Canvas 2D API with a modular controller architecture that handles configuration, drawing, animation, and state management.

example source code

Quick Start

import { useRenderer } from 'generative-lines'

const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const renderer = useRenderer(canvas, context)

renderer.initialize({
  steps: 10,
  colors: 3,
})

// Run a single animation
await renderer.animateIn()

// Or run a continuous loop
renderer.animateLoop()

Core API

useRenderer(canvas, context)

Factory function that returns a renderer controller.

Parameters:

Name	Type	Description
canvas	HTMLCanvasElement	Canvas element to draw on
context	CanvasRenderingContext2D	2D rendering context

interface Renderer {
  // Getters/Setters
  config: Config
  state: RenderState

  // Initialization
  initialize(rawConfig: RawConfig, incomingState?: Partial<RenderState>): void

  // Configuration Updates
  mergeConfig(newConfig: Partial<Config>): void
  mergeState(newState: Partial<RenderState>): void

  // State Manipulation
  rerollLines(): void
  rerollColors(): void

  // Rendering
  drawFull(): void
  clearCanvas(): void
  captureImage(): string
  drawSegment(from: number, to: number): void
  getCurrentSegment(): [from: number, to: number]

  // Animation Control
  replaceTweens(...tweens: Tween[]): void

  // Animation
  animate(animationConfig: AnimationConfig): Promise<void>
  animateIn(): Promise<void>
  animateBackOut(): Promise<void>
  animateWipeOut(): Promise<void>
  animateLoop(
    holdAfterIn?: Milliseconds,
    holdAfterOut?: Milliseconds,
    inConfig?: AnimationConfig,
    outConfig?: AnimationConfig
  ): void
}

Animation Modes

Simple animations tween from a start rendering range to an end rendering range:

Method	Description	Tween Range
animateIn()	Draw lines from left to right	[0, 0] → [0, 1]
animateBackOut()	Erase lines from right to left	[0, 1] → [0, 0]
animateWipeOut()	Erase lines from left to right	[0, 1] → [1, 1]
animateLoop()	Continuous loop with hold periods and config	[0,0]→[0,1]→[1,1]→[0,0]...
animate(AnimationConfig)	Whatever ranges you like	Example: { from: [0, 0.5], to: [0.5, 1] } See AnimationConfig

State Management

When updating config via mergeConfig(), the renderer determines what needs to be rebuilt:

Config Change	Action
background, line-cap, line-join	Restyle lines
thickness	Restyle + rebuild lines
colors	Reroll colors + restyle
steps	Reroll lines + rebuild
distance, amplitude, paddingX/Y, etc.	Rebuild lines only
animationDuration, animationEasing	Changes running animation