Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
viewof gl = {
const canvas = DOM.canvas((width + 28) * devicePixelRatio, height * devicePixelRatio);
canvas.style.cssText = `margin: 0 -14px;width:${width + 28}px;height:${height}px;`;
canvas.value = canvas.getContext("webgl");
return canvas;
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.getExtension("OES_standard_derivatives");
gl.shaderSource(shader, `
precision highp float;
uniform float u_grid;
uniform float u_time;
uniform vec2 u_size;
#extension GL_OES_standard_derivatives : enable
float aastep(float edge, float x) {
#ifdef GL_OES_standard_derivatives
float w = length(vec2(dFdx(x), dFdy(x))) * 0.70710678118654757;
return smoothstep(edge - w, edge + w, x);
#else
return step(edge, x);
#endif
}
void main() {
float l = (length(mod(gl_FragCoord.xy, u_grid) - u_grid / 2.0) / (u_grid / 2.0) - 0.5) / 2.0;
float k = aastep(0.5 + sin(u_time / 2.0) / 1.5, gl_FragCoord.x / u_size.x + l);
gl_FragColor = vec4(vec3(k), 1.0);
}
`);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
u_grid = gl.getUniformLocation(program, "u_grid")
u_time = gl.getUniformLocation(program, "u_time")
u_size = gl.getUniformLocation(program, "u_size")
draw = {
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(u_size, viewof gl.width, viewof gl.height);
gl.uniform1f(u_grid, 20 * devicePixelRatio);
while (true) {
const t = performance.now() / 1000;
gl.uniform1f(u_time, t);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
yield t;
}
}
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));
}
a_vertex = gl.getAttribLocation(program, "a_vertex")
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));
}
height = 480
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.
