29:null 2a:["$","title",null,{"children":"CG HW 05: World Airports Delaunay | Bairui Su | Observable"}] 2f:T7a0,{ const toRad = (d) => (d * Math.PI) / 180; const t = (p) => { const [lon, lat] = p; const theta = toRad(lon); const phi = toRad(lat); const x = Math.cos(theta) * Math.cos(phi); const y = Math.sin(theta) * Math.cos(phi); const z = Math.sin(phi); return [x, y, z]; }; const triangles = d3 .geoDelaunay(points) .triangles.map(([i, j, w]) => [t(points[i]), t(points[j]), t(points[w])]); const data = triangles .map(([a, b, c]) => [a, a, [1, 0, 0], b, b, [0, 1, 0], c, c, [0, 0, 1]]) .flat(Infinity); const mesh = { data: new Float32Array(data) }; const vertexShader = `\ #version 300 es uniform mat4 uMF, uMI; in vec3 aPos, aNor, aBary; out vec3 vPos, vNor, vBary; void main() { vec4 pos = uMF * vec4(aPos, 1.); vec4 nor = vec4(aNor, 0.) * uMI; gl_Position = pos * vec4(1.,1.,-1.,1.); vPos = pos.xyz; vNor = nor.xyz; vBary = aBary; }`; const fragmentShader = `\ #version 300 es precision highp float; in vec3 vPos, vNor, vBary; out vec4 fragColor; void main() { vec3 nor = normalize(vNor); float minB = min(min(vBary.x, vBary.y), vBary.z); float maxB = max(max(vBary.x, vBary.y), vBary.z); float c = .4 + max(0., dot(vec3(.5),nor)); vec3 vColor = vec3(0.2706, 0.0235, 0.5765); fragColor = vec4(vec3(c) * vColor, 1.); if (minB < 0.02) fragColor = vec4(0.5490,0.0,1,1.); if (maxB > 0.9) fragColor = vec4(1.0,0.2471,0.4980, 1.); }`; let startTime = Date.now() / 1000; function update(gl) { let time = (Date.now() / 1000 - startTime) / 3; let m = M.mxm( M.perspective(0, 0, -0.5), M.mxm(M.turnX(time), M.mxm(M.turnY(time), M.scale(0.6))) ); setUniform(gl, "Matrix4fv", "uMF", false, m); setUniform(gl, "Matrix4fv", "uMI", false, M.inverse(m)); } return glStart({ width, height: width, vertexShader, fragmentShader, update, mesh, invalidation, style: { padding: 0 } }); }30:Td62,glStart = { let noiseCode = ` vec3 _s(vec3 i) { return cos(5.*(i+5.*cos(5.*(i.yzx+5.*cos(5.*(i.zxy+5.*cos(5.*i))))))); } float _t(vec3 i, vec3 u, vec3 a) { return dot(normalize(_s(i + a)), u - a); } float noise(vec3 p) { vec3 i = floor(p), u = p - i, v = 2.*mix(u*u, u*(2.-u)-.5, step(.5,u)); return mix(mix(mix(_t(i, u, vec3(0.,0.,0.)), _t(i, u, vec3(1.,0.,0.)), v.x), mix(_t(i, u, vec3(0.,1.,0.)), _t(i, u, vec3(1.,1.,0.)), v.x), v.y), mix(mix(_t(i, u, vec3(0.,0.,1.)), _t(i, u, vec3(1.,0.,1.)), v.x), mix(_t(i, u, vec3(0.,1.,1.)), _t(i, u, vec3(1.,1.,1.)), v.x), v.y), v.z); }`; let phongCode = ` vec3 phong(vec3 N, vec3 L, vec3 W, vec3 diffuse, vec4 specular) { vec3 R = 2. * N * dot(N,L) - L; return diffuse * max(0., dot(N, L)) + specular.rgb * pow(max(0.,dot(R,-W)), specular.a); } `; let vertexSize = 9; let drawMesh = (gl, mesh) => { gl.bufferData(gl.ARRAY_BUFFER, mesh.data, gl.STATIC_DRAW); gl.drawArrays( mesh.triangle_strip ? gl.TRIANGLE_STRIP : gl.TRIANGLES, 0, mesh.data.length / vertexSize ); }; return (scene) => { const canvas = scene.canvas ?? document.createElement("canvas"); canvas.width = scene.width ?? 640; canvas.height = scene.height ?? 640; const gl = canvas.getContext("webgl2"); canvas.setShaders = function (vertexShader, fragmentShader) { gl.program = gl.createProgram(); function addshader(type, src) { let shader = gl.createShader(type); gl.shaderSource(shader, src); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) console.log("Cannot compile shader:", gl.getShaderInfoLog(shader)); gl.attachShader(gl.program, shader); } addshader(gl.VERTEX_SHADER, vertexShader); let i = fragmentShader.indexOf("float") + 6; addshader( gl.FRAGMENT_SHADER, fragmentShader.substring(0, i) + noiseCode + phongCode + fragmentShader.substring(i) ); gl.linkProgram(gl.program); if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) console.log("Could not link the shader program!"); gl.useProgram(gl.program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); let vertexAttribute = (name, size, position) => { let attr = gl.getAttribLocation(gl.program, name); gl.enableVertexAttribArray(attr); gl.vertexAttribPointer(attr, size, gl.FLOAT, false, vertexSize * 4, position * 4); // prettier-ignore }; vertexAttribute("aPos", 3, 0); // 3 for the position attribute vertexAttribute("aNor", 3, 3); // 3 for the normal attribute vertexAttribute("aBary", 3, 6); // 2 for bary attribute }; canvas.setShaders(scene.vertexShader.trim(), scene.fragmentShader.trim()); const timer = setInterval(function () { if (scene.update) scene.update(gl, [0, 0, 7]); if (scene.mesh) drawMesh(gl, scene.mesh); }, 30); if (scene.invalidation) scene.invalidation.then(() => clearInterval(timer)); canvas.gl = gl; const style = scene.style ?? {}; style.background ??= "black"; style.padding ??= "30px"; for (const [key, value] of Object.entries(style)) { canvas.style[key] = value; } return canvas; }; }31:T685,M = { const m = {}; let c = (t) => Math.cos(t); let s = (t) => Math.sin(t); m.identity = () => [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; // prettier-ignore m.move = (x,y,z) => [1,0,0,0, 0,1,0,0, 0,0,1,0, x,y,z,1]; // prettier-ignore m.turnX = t => [1,0,0,0, 0,c(t),s(t),0, 0,-s(t),c(t),0, 0,0,0,1]; // prettier-ignore m.turnY = t => [c(t),0,-s(t),0, 0,1,0,0, s(t),0,c(t),0, 0,0,0,1]; // prettier-ignore m.turnZ = t => [c(t),s(t),0,0, -s(t),c(t),0,0, 0,0,1,0, 0,0,0,1]; // prettier-ignore m.scale = (x,y,z) => [x,0,0,0, 0,y??x,0,0, 0,0,z??x,0, 0,0,0,1]; // prettier-ignore m.perspective = (x,y,z) => [1,0,0,x, 0,1,0,y??x, 0,0,1,z??x, 0,0,0,1]; // prettier-ignore // Multiply two matrices. m.mxm = (a, b) => { let m = []; for (let c = 0; c < 16; c += 4) { for (let r = 0 ; r < 4 ; r++) m.push( a[r]*b[c] + a[r+4]*b[c+1] + a[r+8]*b[c+2] + a[r+12]*b[c+3] ); // prettier-ignore } return m; }; // Invert a matrix. m.inverse = (src) => { let dst = [], det = 0, cofactor = (c, r) => { let s = (i, j) => src[((c + i) & 3) | (((r + j) & 3) << 2)]; // prettier-ignore return (c+r & 1 ? -1 : 1) * ( (s(1,1)*(s(2,2)*s(3,3)-s(3,2)*s(2,3))) - (s(2,1)*(s(1,2)*s(3,3)-s(3,2)*s(1,3))) + (s(3,1)*(s(1,2)*s(2,3)-s(2,2)*s(1,3))) ); }; for (let n = 0 ; n < 16 ; n++) dst.push(cofactor(n >> 2, n & 3)); // prettier-ignore for (let n = 0 ; n < 4 ; n++) det += src[n] * dst[n << 2]; // prettier-ignore for (let n = 0 ; n < 16 ; n++) dst[n] /= det; // prettier-ignore return dst; }; return m; } 32:[{"id":"f0bb46e3e5651cdf8bc181678e835e68057d9d34cf3b42cb1288da8aec6ee0ca35bd329feaa29935c37f4ee1af6ecbbb2d02b4fd3adacf4e531f9f9dbecc59b3","href":"https://static.observableusercontent.com/files/f0bb46e3e5651cdf8bc181678e835e68057d9d34cf3b42cb1288da8aec6ee0ca35bd329feaa29935c37f4ee1af6ecbbb2d02b4fd3adacf4e531f9f9dbecc59b3","name":"airports.csv","type":"text/csv","lastModified":1762269043537.536,"size":172073}] 2d:{"id":"5c94de791de77e28","slug":null,"title":"CG HW 05: World Airports Delaunay","thumbnail":"4fae659f653b3cf5808d121e375675da2853d92688989b080076e0a451cb9989","access_level":"public","create_time":"$D2025-11-04T15:10:43.537Z","update_time":"$D2025-11-09T14:41:01.869Z","view_time":null,"first_public_time":"$D2025-11-04T16:17:55.764Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":740,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"},{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"CG HW 05: World Airports Delaunay","cells":[{"id":0,"value":"# CG HW 05: World Airports Delaunay\n\nAlso see [World Flight Paths Voronoi](https://observablehq.com/d/dea043e8d65bf6d0).\n\n- Ref. https://observablehq.com/@d3/world-airports-voronoi\n- Ref. https://colorhunt.co/palette/4506938c00ffff3f7fffc400\n- Ref. https://ourairports.com/data/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":465,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"points = (await FileAttachment(\"airports.csv\").csv({ typed: true })).map(\n ({ longitude, latitude }) => [longitude, latitude]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"d3 = require(\"d3@7\", \"d3-geo-voronoi@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"setUniform = (gl, type, name, a, b, c) =>\n gl[\"uniform\" + type](gl.getUniformLocation(gl.program, name), a, b, c)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"