Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Nov 25, 2019
2 forks
17 stars
viewof gl = {
const canvas = document.createElement("canvas");
canvas.width = width * devicePixelRatio;
canvas.height = height * devicePixelRatio;
canvas.style = `width: ${width}px; height: auto;`;
canvas.value = canvas.getContext("webgl");
return canvas;
}
init = {
gl.useProgram(program);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(u_translate, viewof gl.width / 2, viewof gl.height / 2);
gl.uniform1f(u_scale, viewof gl.height);
gl.viewport(0, 0, viewof gl.width, viewof gl.height);
gl.bindTexture(gl.TEXTURE_2D, texture);
}
draw = {
init;
gl.uniform2fv(u_rotate, rotate);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
}
rotate = [now * -0.0002 % (2 * Math.PI), Math.sin(now * 0.0001) * 0.5]
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, `
precision highp float;
uniform sampler2D u_image;
uniform vec2 u_translate;
uniform float u_scale;
uniform vec2 u_rotate;
const float c_pi = 3.14159265358979323846264;
const float c_halfPi = c_pi * 0.5;
const float c_twoPi = c_pi * 2.0;
float cosphi0 = cos(u_rotate.y);
float sinphi0 = sin(u_rotate.y);
void main(void) {
float x = (gl_FragCoord.x - u_translate.x) / u_scale;
float y = (u_translate.y - gl_FragCoord.y) / u_scale;
// inverse stereographic projection
float rho = sqrt(x * x + y * y);
float c = 2.0 * atan(rho);
float sinc = sin(c);
float cosc = cos(c);
float lambda = atan(x * sinc, rho * cosc);
float phi = asin(y * sinc / rho);
// inverse rotation
float cosphi = cos(phi);
float x1 = cos(lambda) * cosphi;
float y1 = sin(lambda) * cosphi;
float z1 = sin(phi);
lambda = atan(y1, x1 * cosphi0 + z1 * sinphi0) + u_rotate.x;
phi = asin(z1 * cosphi0 - x1 * sinphi0);
gl_FragColor = texture2D(u_image, vec2((lambda + c_pi) / c_twoPi, (phi + c_halfPi) / c_pi));
}
`);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
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)) throw new Error(gl.getShaderInfoLog(shader));
return 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;
}
image = Object.assign(await FileAttachment("milky-way.jpg").image(), {style: "height: 40px;"})
texture = {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
return texture;
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(program));
return program;
}
a_vertex = gl.getAttribLocation(program, "a_vertex")
u_translate = gl.getUniformLocation(program, "u_translate")
u_scale = gl.getUniformLocation(program, "u_scale")
u_rotate = gl.getUniformLocation(program, "u_rotate")
height = 640
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.
