viewof regl = {
const pixelRatio = Math.min(1.5, devicePixelRatio);
const canvas = DOM.canvas(
Math.floor(width * pixelRatio),
Math.floor(height * pixelRatio)
);
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const regl = createREGL({
canvas,
pixelRatio,
// This can also dramatically increase performance:
attributes: { antialias: false }
});
return Object.assign(canvas, { value: regl });
}
draw({ zoom })
draw = createDrawCommand(regl)
createDrawCommand = regl =>
regl({
frag: `
precision mediump float;
uniform sampler2D texture;
varying vec2 uv;
void main () {
gl_FragColor = texture2D(texture, uv);
}`,
vert: `
precision mediump float;
attribute vec2 position;
uniform vec2 aspectRatio;
uniform float zoom;
varying vec2 uv;
void main () {
uv = 0.5 + 0.5 * vec2(position) * aspectRatio;
gl_Position = vec4(position, 0, 1.0 / zoom);
}`,
attributes: {
position: [[-2, -4], [-2, 4], [4, 0]]
},
depth: { enable: false },
uniforms: {
texture: regl.texture({ data: image, flipY: true }),
aspectRatio: ctx => {
const ar = ctx.viewportWidth / ctx.viewportHeight;
return ar > 1 ? [ar, 1] : [1, 1 / ar];
},
zoom: regl.prop('zoom')
},
count: 3
})
image = new Promise(resolve => {
const im = new Image();
im.crossOrigin = "anonymous";
im.src =
"https://raw.githubusercontent.com/regl-project/regl/master/example/assets/peppers.png";
im.onload = () => resolve(Object.assign(im, { style: "max-width:200px" }));
})
createREGL = require("regl")
height = 500
import { slider } from "@jashkenas/inputs"
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.
