Public
Edited
Apr 15, 2023
Insert cell
Insert cell
createREGL = require('regl')
Insert cell
viewof regl = reglCanvas();
Insert cell
Insert cell
pos = {
const stops = 360;
const positions = [];
for (let i = 0; i < stops; i++){
positions.push(Math.cos(i * 2 * Math.PI/stops)); // x coord
positions.push(Math.sin(i * 2 * Math.PI/stops)); // y coord
}
return positions;
}

Insert cell
loop = {
while (true) {
regl.poll();
regl.clear({ color: [1, 1, 1, 1.0] });
draw();
yield;
}
}
Insert cell
function include(name) {
return require.resolve(name)
.then(fetch)
.then(r => r.text());
}
Insert cell
function reglCanvas() {
const canvas = document.createElement('canvas');
const dpi = Math.min(devicePixelRatio, 1.5)
const reglOptions = {
attributes: { antialias: true, depth: false}
}
const regl = createREGL(Object.assign({}, reglOptions, {pixelRatio: dpi, canvas}));
canvas.width = width;
canvas.height = 600;
canvas.value = regl;
canvas.__reglConfig = {dpi, reglOptions};
return canvas
}
Insert cell

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.
Learn more