canvas = sketch(draw, { width, height, setup, update })
draw = (state) => {
p8g.background(220);
p8g.rect(50, 50, 100, 100);
}
setup = () => ({})
update = (state) => state
mutable state = ({})
p8g = import("https://unpkg.com/p8g.js")
sketch = {
var canvas, request;
return (draw = (state) => {}, options = {}) => {
const {
setup = () => ({}),
update = (state) => state,
width = 900,
height = 450
} = options || {};
if (!canvas) canvas = html`${p8g.createCanvas(width, height)}`;
if (request) cancelAnimationFrame(request);
mutable state = setup(mutable state || {}) || mutable state;
request = requestAnimationFrame(async function tick() {
mutable state = (await update(mutable state)) || mutable state;
mutable state = (await draw(mutable state)) || mutable state;
request = requestAnimationFrame(tick);
});
invalidation.then(() => cancelAnimationFrame(request));
return canvas;
};
}
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.
