Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
viewof gl = {
const canvas = DOM.canvas(width + 28, height);
canvas.style.margin = "0 -14px";
canvas.value = canvas.getContext("webgl", {depth: false});
return canvas;
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, `
precision highp float;
uniform float iTime;
${await include("glsl-noise/simplex/3d.glsl")}
${await include("glsl-hsl2rgb/index.glsl")}
void main() {
float n = snoise(vec3(gl_FragCoord.xy * 0.005, iTime / 2.0));
float h = 0.25 + n * 0.3 + mod(iTime / 10.0, 1.0);
float s = 0.65 - n * 0.1;
float l = 0.68 - n * 0.25;
gl_FragColor = vec4(hsl2rgb(h, s, l), 1.0);
}
`);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
function include(name) {
return require.resolve(name)
.then(fetch)
.then(r => r.text());
}
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, `
attribute vec2 a_vertex;
void main(void) {
gl_Position = vec4(a_vertex, 0.0, 1.0);
}
`);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
vertexBuffer = {
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);
return buffer;
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;
throw new Error(gl.getProgramInfoLog(program));
}
draw = {
const a_vertex = gl.getAttribLocation(program, "a_vertex");
const u_time = gl.getUniformLocation(program, "iTime");
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
while (true) {
const t = performance.now() / 1000;
gl.uniform1f(u_time, t);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
yield t;
}
}
height = 600
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.
