Public
Edited
Jun 3
Importers
quickStart = (() => {
const spaces = new Map();
return (
canvasSelector, // <canvas> node or selector string
{ bgcolor = "#f5f5b8" } = {}
) => {
// 1. resolve the DOM node
const cnv =
typeof canvasSelector === "string"
? document.querySelector(canvasSelector)
: canvasSelector;
// 2. tear down any old space on this canvas
if (spaces.has(cnv)) {
spaces.get(cnv).pause();
spaces.delete(cnv);
}
// 3. create new CanvasSpace & Form
const space = new pts.CanvasSpace(cnv).setup({ bgcolor });
const form = space.getForm();
spaces.set(cnv, space);
// 4. return your runner
return (drawFn) => {
space.add((time, ftime) => drawFn(time, ftime, space, form));
space.bindMouse().bindTouch();
space.play();
return { space, form };
};
};
})()
canvas = html`<canvas id="myCanvas" width=1024 height=200></canvas>`
{
const run = quickStart(canvas);
const { space, form } = run((time, ftime, space, form) => {
const { Num } = pts;
const pct = (time % 1000) / 1000;
const radius = Num.cycle(pct) * 50;
form.fill("teal").point(space.center, radius, "circle");
form.fill("crimson").point(space.pointer, radius + 20, "circle");
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
