29:null 2a:["$","title",null,{"children":"CG HW 02: DLA | Bairui Su | Observable"}] 2f:T111c,{ const NS = 30; const NL = 3; const START_TIME = Date.now() / 1000; const vertexShader = `\ #version 300 es in vec3 aPos; out vec3 vPos; void main() { gl_Position = vec4(aPos, 1.); vPos = aPos; }`; const fragmentShader = `\ #version 300 es precision highp float; uniform float uTime; uniform int uDL; uniform vec4 uS[${NS}]; uniform vec3 uC[${NS}],uL[${NL}],uLC[${NL}]; in vec3 vPos; out vec4 fragColor; vec2 raySphere(vec3 V, vec3 W, vec4 S) { V -= S.xyz; float b = dot(V, W); float d = b * b - dot(V, V) + S.w * S.w; if (d < 0.) return vec2(1001., 1000.); return vec2(-b - sqrt(d), -b + sqrt(d)); } bool inShadow(vec3 P, vec3 L) { for (int i = 0; i < ${NS} && i <= uDL; i++) { vec2 tt = raySphere(P, L, uS[i]); if (tt.x < tt.y && tt.x > 0.) return true; } return false; } vec3 shadeSphere(vec4 S, vec3 P, vec3 C) { vec3 N = (P - S.xyz) / S.w; vec3 shade = vec3(.1); for (int l = 0; l < ${NL}; l++) if (!inShadow(P, uL[l])) shade += uLC[l] * max(0., dot(N, uL[l])); return C * shade; } void main() { vec4 F = vec4(0.); vec3 V = vec3(0., 0., 7.); vec3 W = normalize(vPos - V); float t = 100.; for (int i = 0; i < ${NS} && i <= uDL; i++) { vec2 tt = raySphere(V, W, uS[i]); if (tt.x < tt.y && tt.x > 0. && tt.x < t) { t = tt.x; vec3 P = V + t * W; F = vec4(shadeSphere(uS[i], P, uC[i]), 1.); } } fragColor = vec4(sqrt(F.rgb), F.a); }`; const rand = (lo, hi) => Math.random() * (hi - lo) + lo; const norm = ([x, y, z]) => { const s = Math.hypot(x, y, z); return [x / s, y / s, z / s]; }; const dist2 = (a, b) => (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2; const dist = (a, b) => Math.sqrt(dist2(a, b)); const overlaps = (a, b) => dist(a, b) < a[3] + b[3]; const findClosest = (spheres, target) => spheres.reduce( (best, s, i) => { const d = dist2(s, target); return d < best.d ? { d, s, i } : best; }, { d: Infinity, s: null, i: -1 } ); const depthColor = (depth) => { const { r, g, b } = d3 .color(d3.interpolateRainbow((depth / NS) * 2.5)) .rgb(); return [r / 255, g / 255, b / 255]; }; function generateSpheres(n) { const out = []; while (out.length < n) { const R = rand(0.05, 0.15); const s = [rand(-1 + R, 1 - R), rand(-1 + R, 1 - R), rand(-0.2, 0.2), R]; if (!out.some((o) => overlaps(s, o))) out.push(s); } return out.sort((a, b) => a[3] - b[3]); } const scene = { spheres: generateSpheres(NS), depths: new Array(NS).fill(0), dl: 0, added: true }; function stepScene({ spheres, depths }) { if (scene.dl >= NS) return; if (scene.added) { scene.dl++; scene.added = false; const placed = spheres.slice(0, scene.dl); let cur = spheres[scene.dl]; while (cur && overlaps(cur, findClosest(placed, cur).s)) { const R = cur[3]; cur = [rand(-1 + R, 1 - R), rand(-1 + R, 1 - R), rand(-0.2, 0.2), R]; spheres[scene.dl] = cur; } } else { const cur = spheres[scene.dl]; const { s: near, i: ni } = findClosest(spheres.slice(0, scene.dl), cur); depths[scene.dl] = depths[ni] + 1; if (overlaps(cur, near)) { scene.added = true; } else { const d = dist(cur, near); const spd = d / 20; cur[0] += ((near[0] - cur[0]) / d) * spd; cur[1] += ((near[1] - cur[1]) / d) * spd; cur[2] += ((near[2] - cur[2]) / d) * spd; } } } const LIGHTS = { dirs: [norm([1, 1, 1]), norm([0, -1, 0])].flat(), colors: [0.5, 0.7, 1, 0.2, 0.15, 0.1, 0.5, 0, 0] }; function setUniforms(gl) { const { spheres, depths, dl } = scene; setUniform(gl, "1f", "uTime", Date.now() / 1000 - START_TIME); setUniform(gl, "1i", "uDL", dl); setUniform(gl, "4fv", "uS", spheres.flat()); setUniform( gl, "3fv", "uC", Array.from({ length: NS }, (_, i) => depthColor(depths[i])).flat() ); setUniform(gl, "3fv", "uL", LIGHTS.dirs); setUniform(gl, "3fv", "uLC", LIGHTS.colors); } function update(gl) { stepScene(scene); setUniforms(gl); } return glStart({ update, vertexShader, fragmentShader, invalidation, style: { padding: 0 } }); }30:T719,function glStart(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); addshader(gl.FRAGMENT_SHADER, fragmentShader); 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.bufferData( gl.ARRAY_BUFFER, new Float32Array([ -1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0, -1, -1, 0, 1, 1, 0 ]), gl.STATIC_DRAW ); let aPos = gl.getAttribLocation(gl.program, "aPos"); gl.enableVertexAttribArray(aPos); gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0); }; canvas.setShaders(scene.vertexShader.trim(), scene.fragmentShader.trim()); const timer = setInterval(function () { if (scene.update) scene.update(gl); gl.drawArrays(gl.TRIANGLES, 0, 6); }, 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:[] 2d:{"id":"0e50c1f07129c9d7","slug":null,"title":"CG HW 02: DLA","thumbnail":"abf2d027ffc3144bc4647ab1ed33761d87112b39cd27d4529840ea9e223110a6","access_level":"public","create_time":"$D2025-11-01T15:53:34.367Z","update_time":"$D2026-05-31T00:43:50.736Z","view_time":null,"first_public_time":"$D2025-11-01T16:04:59.138Z","fork":{"id":"94ac6e8018b5b3a1","slug":null,"title":"CG HW 01: Beesandbombs","owner":{"id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":41,"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":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null,"role":"editor"},{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CG HW 02: DLA","cells":[{"id":0,"value":"# CG HW 02: DLA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$2f","pinned":true,"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"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"