createREGL = require('https://unpkg.com/regl@1.3.1/dist/regl.min.js')
function createGL (opts) {
var canvas = html`<canvas width="960" height="400">`
var regl = createREGL(Object.assign({canvas: canvas}, opts || {}))
return {canvas, regl}
}
gl = createGL()
gl.canvas
gl.regl.clear({color: [red, green, blue, 1]})
gl2 = createGL()
gl2.canvas
cmd = gl2.regl({
vert: `
precision mediump float;
attribute vec2 xy;
uniform vec2 aspect;
uniform mat3 modelMatrix;
void main () {
vec2 pos = (modelMatrix * vec3(xy, 1)).xy;
gl_Position = vec4(pos / aspect, 0, 1);
}
`,
frag: `
precision mediump float;
void main () {
gl_FragColor = vec4(0.2, 0.3, 0.8, 1);
}
`,
attributes: {
xy: [0, 4, 8].map(i => [Math.cos(Math.PI * i / 6), Math.sin(Math.PI * i / 6)])
},
uniforms: {
aspect: ctx => [ctx.viewportWidth / ctx.viewportHeight, 1],
modelMatrix: gl2.regl.prop('modelMatrix')
},
count: 3
})
function draw(t) {
// Any time we render outside a `regl.frame()` call, we should invoke `regl.poll()` in order
// to ensure the canvas size and other internal state is updated
gl2.regl.poll();
gl2.regl.clear({ color: [0.7, 0.8, 0.2, 1] });
cmd({
modelMatrix: [
Math.cos(t),
Math.sin(t),
0,
-Math.sin(t),
Math.cos(t),
0,
x0,
0,
1
]
});
}
draw(now / 1000)
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.
