draw = regl({
vert: `
attribute vec2 circlePoint;
uniform vec2 aspectRatio;
uniform float time;
void main() {
// modulate circle size
float circleSize = 1.2 * cos(time * 1.5);
vec2 xy = circlePoint;
gl_Position = vec4(xy/aspectRatio, 0, 1);
gl_PointSize = 5.0;
}`,
frag: `
precision mediump float;
void main() {
gl_FragColor = vec4(0, 255, 0, 1);
}
`,
attributes: {
circlePoint: circleInstanceGeometry,
},
uniforms: {
time: regl.context('time'),
aspectRatio: ctx => ctx.framebufferWidth > ctx.framebufferHeight ?
[ctx.framebufferWidth / ctx.framebufferHeight, 1] :
[1, ctx.framebufferHeight / ctx.framebufferWidth],
},
count: circleInstanceGeometry.length,
primitive: 'points',
})
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.
