Sketch

Add it

Declare it in prototir.json at the root of your ZIP. Prototir checks the version at upload and adds it to the page's import map.

{
  "modules": [
    "prefab-sketch@0.1.1"
  ]
}

Then import it by name, from 'prefab-sketch', as you would from npm.

Smallest example

import { createSketch } from 'prefab-sketch';

createSketch({
  draw(ctx, { width, height, mouse }) {
    ctx.fillStyle = '#0a0a0a';
    ctx.fillRect(0, 0, width, height);
    ctx.strokeStyle = '#ededed';
    ctx.strokeRect(mouse.x - 20, mouse.y - 20, 40, 40);
  }
});

API

createSketch(options)

draw(ctx, state)

Required. Called every frame with the 2D context and state { t, dt, frame, width, height, mouse: { x, y, down } }. dt is capped at 0.05 s.

setup(ctx, state)

Called once before the first frame.

canvas, mount = document.body

Draw into your own canvas, or let it add a full-window one to mount.

dpr = min(devicePixelRatio, 2), clear = false

Pixel density, and whether to clear the canvas before each frame.

The returned sketch

canvas, ctx, state

The canvas, its context and the live state.

destroy()

Stops the loop, removes listeners, and removes the canvas if it created it.

Good to know

• The byte-light path for canvas art: the p5 setup/draw ergonomics without shipping the library. p5 is still in the catalog for Processing-style sketches.

Versions

Every version stays available, so a prototype keeps working exactly as published. Declare the one you tested with.

• prefab-sketch@0.1.1
• prefab-sketch@0.1.0