cm.rasterGL({
width: 800,
height: 480,
fill: `
vec3 palette(float t) {
vec3 a = vec3(0.5, 0.5, 0.5);
vec3 b = vec3(0.5, 0.5, 0.5);
vec3 c = vec3(1.0, 1.0, 1.0);
vec3 d = vec3(0.263, 0.416, 0.557);
return a + b * cos(3.1415926 * 2.0 * (c * t + d));
}
void main() {
vec2 uv = (gl_FragCoord.xy * 2.0 - cm_resolution) / cm_resolution.y;
vec2 uv0 = uv;
vec3 rgb = vec3(0.0);
for (float i = 0.0; i < 4.0; i++) {
uv = fract(uv * 1.5) - 0.5;
float d = length(uv) * exp(-length(uv0));
vec3 col = palette(length(uv0) + i * 0.4 + cm_time * 0.4);
d = sin(d * 8.0 + cm_time) / 8.0;
d = abs(d);
d = pow(0.01 / d, 1.2);
rgb += col * d;
}
gl_FragColor = vec4(rgb, 1.0);
}`
})
function rasterGL({ width, height, fill, dpr = window.devicePixelRatio || 1 }) {
const canvas = document.createElement("canvas");
const scaledWidth = width * dpr;
const scaledHeight = height * dpr;
canvas.width = scaledWidth;
canvas.height = scaledHeight;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
const regl = create({ canvas });
const draw = regl({
frag: `
precision mediump float;
uniform vec2 cm_resolution;
uniform float cm_time;
${fill}
`,
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}
`,
attributes: {
position: regl.buffer([
[-1, 1],
[1, 1],
[1, -1],
[1, -1],
[-1, -1],
[-1, 1]
])
},
uniforms: {
cm_resolution: regl.prop("cm_resolution"),
cm_time: regl.prop("cm_time")
},
count: 6
});
regl.frame(({ time }) => {
draw({
cm_resolution: [scaledWidth, scaledHeight],
cm_time: time
});
});
invalidation.then(() => regl.destroy());
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.
