Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, `
precision highp float;
const float PI = 3.14159265359;
const float a = -2.0;
const float b = -2.0;
const float c = -1.2;
const float d = 2.0;
attribute vec2 position;
void main() {
float x1, x2 = position.x;
float y1, y2 = position.y;
for (int i = 0; i < 8; i++) {
x1 = x2, y1 = y2;
x2 = sin(a * y1) - cos(b * x1);
y2 = sin(c * x1) - cos(d * y1);
}
gl_Position = vec4(x2 / 2.0, y2 / 2.0, 0.0, 1.0);
gl_PointSize = 1.0;
}
`);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader);
invalidation.then(() => gl.deleteShader(shader));
return shader;
}
u_a = gl.getUniformLocation(program, "a")
u_b = gl.getUniformLocation(program, "b")
u_c = gl.getUniformLocation(program, "c")
u_d = gl.getUniformLocation(program, "d")
a = -2 // + Math.sin(now / 8000)
b = -2
c = -1.2
d = 2
draw = {
setup;
// gl.uniform1f(u_a, a);
// gl.uniform1f(u_b, b);
// gl.uniform1f(u_c, c);
// gl.uniform1f(u_d, d);
gl.drawArrays(gl.POINTS, 0, n);
}
vertexBuffer = {
const array = new Float32Array(n * 2).map(() => Math.random() * 2 - 1);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
invalidation.then(() => gl.deleteBuffer(buffer));
return buffer;
}
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, `
precision highp float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
}
`);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader);
invalidation.then(() => gl.deleteShader(shader));
return shader;
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(program);
invalidation.then(() => gl.deleteProgram(program));
return program;
}
setup = {
const a_position = gl.getAttribLocation(program, "position");
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_position);
}
n = Math.pow(2, 18)
height = width
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.
