2a:null 2b:["$","title",null,{"children":"Parametric Surface Plots | Zihou Ng | Observable"}] 30:T457,class Grid { constructor(ticks, size) { this.ticks = ticks; this.size = size; this.lines = new Lines(); Object.defineProperties(this, { _p: { value: [0, 0, 0], writable: true }, _data: { value: new Float32Array(this.ticks.length * 2 * 3 * 2 * 3), writable: true } }); } update(sides) { const ticks = this.ticks, n = ticks.length; const size = -this.size; const p = this._p, data = this._data; for (let d = 0; d < 3; d++) { const a = (d + 1) % 3, b = (d + 2) % 3; for (let i = 0; i < n; i++) { const idx = (d * n + i) * 4; p[d] = size * sides[d]; p[a] = ticks[i]; p[b] = size; v.setS3(data, p, (idx + 0) * 3); p[b] *= -1; v.setS3(data, p, (idx + 1) * 3); p[b] = ticks[i]; p[a] = size; v.setS3(data, p, (idx + 2) * 3); p[a] *= -1; v.setS3(data, p, (idx + 3) * 3); } } this.lines.update(data); } draw(camera) { this.lines.uniforms.color = [.5,.5,.5,.1]; this.lines.uniforms.thickness = 0.005; this.lines.draw(camera); } }31:T920,class Ticks { constructor(steps, { font, size, margin, step }) { this.steps = steps.map(i => i.toFixed(2)); this.size = size; this.margin = margin; this.step = step; const len = this.steps.reduce((a, b) => a + b.length, 0); const buf = font.alloc(len * 3); for (let d = 0, i = 0; d < 3; d++) { for (let j = 0; j < this.steps.length; j++) { font.typeset(buf, this.steps[j], i); i += this.steps[j].length; } } this.offsets = new Float32Array(len * 4 * 3 * 3); this.offsetsBuf = webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW); this.update(v.ONE3); this.model = webgl.compileModel(gl, { attribs: { position: { data: buf.positions, size: 2 }, uv: { data: buf.uvs, size: 2 }, offset: { buffer: this.offsetsBuf, size: 3 } }, indices: { data: buf.indices }, num: buf.indices.length, mode: gl.TRIANGLES, uniforms: { model: m.scale44([], .2) }, shader: webgl.defShader(gl, { ...font.shaderSpec(), vs: ` void main() { v_uv = uv; vec4 pos = view * (model * vec4(vec3(0.0), 1.0) + vec4(offset,.0)); vec2 scale = vec2(length(model[0]), length(model[1])); pos.xy += position.xy * scale * min(-pos.z, 2.5); gl_Position = proj * pos; }`, attribs: { position: 'vec2', uv: "vec2", offset: "vec3" } }), textures: [font.texture] }); } update(sides) { const s = this.size + this.margin; const o = [ v.mul3(null, [0,-s,.65], sides), v.mul3(null, [-s,0,.65], sides), v.mul3(null, [.65,-s,0], sides) ]; for (let d = 0, i = 0; d < 3; d++) { // each dimension for (let j = 0; j < this.steps.length; j++) { // each tick o[d][d] = this.step * j - this.size; for (let k = 0; k < this.steps[j].length; k++) { // each character const idx = (i + k) * 4; for (let h = 0; h < 4; h++) { // each vertex v.setS3(this.offsets, o[d], (idx + h) * 3); } } i += this.steps[j].length; } } this.offsetsBuf.set(this.offsets); } draw(camera) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; webgl.draw(this.model); } }32:T7a4,class Labels { constructor(texts, { font, size, margin }) { this.texts = texts; this.size = size + margin; const len = texts.reduce((a, b) => a + b.length, 0); const buf = font.alloc(len); for (let d = 0, i = 0; d < 3; i += texts[d].length, d++) { font.typeset(buf, texts[d], i); } this.offsets = new Float32Array(len * 4 * 3); this.offsetsBuf = webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW); this.update(v.ONE3); this.model = webgl.compileModel(gl, { attribs: { position: { data: buf.positions, size: 2 }, uv: { data: buf.uvs, size: 2 }, offset: { buffer: this.offsetsBuf, size: 3 } }, indices: { data: buf.indices }, num: buf.indices.length, mode: gl.TRIANGLES, uniforms: { model: m.scale44([], .3) }, shader: webgl.defShader(gl, { ...font.shaderSpec(), vs: ` void main() { v_uv = uv; vec4 pos = view * (model * vec4(vec3(0.0), 1.0) + vec4(offset,.0)); vec2 scale = vec2(length(model[0]), length(model[1])); pos.xy += position.xy * scale * -pos.z; gl_Position = proj * pos; }`, attribs: { position: 'vec2', uv: "vec2", offset: "vec3" }, }), textures: [font.texture] }); } update(sides) { const o = [ v.mul3(null, [0,-this.size,.8], sides), v.mul3(null, [-this.size,0,.8], sides), v.mul3(null, [.8,-this.size,0], sides) ]; for (let d = 0, i = 0; d < 3; i += this.texts[d].length, d++) { for (let j = 0; j < this.texts[d].length; j++) { const idx = (i + j) * 4; for (let k = 0; k < 4; k++) { v.setS3(this.offsets, o[d], (idx + k) * 3); } } } this.offsetsBuf.set(this.offsets); } draw(camera) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; webgl.draw(this.model); } }33:T1f45,class Surface { static get pdf() { return ` float pdf(vec2 p, vec2 mu, vec2 sigma, float rho) { float rho2 = rho * rho; float c = TAU * sigma.x * sigma.y * sqrt(1. - rho2); vec2 z = (p - mu) / sigma; float q = (dot(z,z) - 2. * rho * z.x * z.y) / (1. - rho2); return exp(-0.5 * q) / c; }`;} constructor(cmap) { const textures = [ webgl.defTexture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, format: gl.RGBA, type: gl.FLOAT, image: null }), webgl.defTexture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, filter: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, format: gl.RGBA, type: gl.FLOAT, image: null }) ]; const depth = webgl.defRBO(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight }); this.fbo = webgl.defFBO(gl, { tex: textures, depth }); this.pickFbo = webgl.defFBO(gl, { tex: [webgl.defTexture(gl, { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, format: gl.RGBA, type: gl.FLOAT, premultiply: true, image: null })], depth }); const bufs = makePlane(1, 1, 100, 100); const spec = { attribs: { position: { data: new Float32Array(bufs.positions), size: 3 }, uv: { data: new Float32Array(bufs.uvs), size: 2 }, }, indices: { data: new Uint16Array(bufs.indices) }, num: bufs.indices.length, mode: gl.TRIANGLES, uniforms: { mu: [0, 0], sigma: [0.3, 0.3], rho: 0.8 }, }; this.models = {}; this.models['accum'] = webgl.compileModel(gl, { ...spec, shader: webgl.defShader(gl, { vs: ` ${Surface.pdf} vec2 fit01(vec2 x, vec2 c, vec2 d) { return c + (d - c) * x; } vec3 getPos(vec2 uv) { vec2 p = fit01(uv, vec2(domain.x), vec2(domain.y)); float y = pdf(p, mu, sigma, rho); vec2 xz = fit01(vec2(uv.x, 1.0 - uv.y), vec2(-0.5), vec2(0.5)); return vec3(xz.x, y, xz.y); } vec3 getSurfaceNormal(vec2 uv, vec3 pos) { const vec2 offset = vec2(1e-3, 0.0); vec3 tangent = getPos(uv + offset.xy) - pos; vec3 bitangent = getPos(uv + offset.yx) - pos; return normalize(cross(tangent, bitangent)); } void main() { v_uv = uv; v_pos = getPos(uv); vec3 normal = getSurfaceNormal(uv, v_pos); v_normal = normalize((normalMat * vec4(normal, 0.0)).xyz); gl_Position = proj * view * model * vec4(v_pos + position.x * 1e-6, 1.0); }`, fs: ` float sigmoid11(float v) { return 1. / (1. + exp(- 6. * v)); } float weight(float z, float a) { return clamp(pow(min(1.0, a * 10.0) + 0.01, 3.0) * 1e8 * pow(1.0 - z * .95, 3.0), 1e-2, 3e3); } float norm(float x, float a, float b) { return (x - a) / (b - a); } float fit(float x, float a, float b, float c, float d) { return c + (d - c) * norm(x, a, b); } float contour(float v, float width) { float f = abs(fract(v) - .5); float df = fwidth(v) * width; return smoothstep(0., df, f); } void main() { if (v_pos.y >= .5) discard; float value = fit(v_pos.y, 0., maxVal, 0., 1.); // surface color vec3 col = texture2D(cmap, vec2(value, .5)).rgb; // contour lines float t0 = 1.0 - contour(value * 10.0, 1.0); vec4 color = mix(vec4(col, .8), vec4(vec3(.5), 1.0), t0); vec2 d = fwidth(v_pos.xz) * 1.3; vec2 t1 = (1.0 - smoothstep(picked.xz, picked.xz + d, v_pos.xz)) * smoothstep(picked.xz - d, picked.xz, v_pos.xz); color = mix(color, vec4(1.0), t1.x + t1.y); color.rgb *= color.a; float w = weight(gl_FragCoord.z, color.a); gl_FragData[0] = vec4(color.rgb * w, color.a); gl_FragData[1].r = color.a * w; }`, declPrefixes: { v: "v_" }, attribs: { position: "vec3", uv: "vec2", }, varying: { uv: "vec2", normal: "vec3", pos: "vec3" }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", normalMat: ["mat4", webgl.autoNormalMatrix2()], cmap: ["sampler2D", 0], maxVal: ["float", 1.0], picked: ["vec3", [0,0,0]], domain: ["vec2", [-5.0, 5.0]], mu: ["vec2", [0, 0]], sigma: ["vec2", [0.3, 0.3]], rho: ["float", 0.8] }, state: { depth: false, cull: false }, ext: { WEBGL_draw_buffers: true, OES_standard_derivatives: true } }), textures: [webgl.defTexture(gl, { width: cmap.length, height: 1, filter: gl.NEAREST, wrap: gl.CLAMP, format: gl.RGB, image: new Uint8Array(cmap.flat(1)) })] }); this.models['pick'] = webgl.compileModel(gl, { ...spec, shader: webgl.defShader(gl, { vs: ` ${Surface.pdf} vec2 fit01(vec2 x, vec2 c, vec2 d) { return c + (d - c) * x; } vec3 getPos(vec2 uv) { vec2 p = fit01(uv, vec2(domain.x), vec2(domain.y)); float y = pdf(p, mu, sigma, rho); vec2 xz = fit01(vec2(uv.x, 1.0 - uv.y), vec2(-0.5), vec2(0.5)); return vec3(xz.x, y, xz.y); } void main() { v_pos = getPos(uv);; gl_Position = proj * view * model * vec4(v_pos + position.x * 1e-6, 1.0); }`, fs: ` void main() { if (v_pos.y >= .5) discard; gl_FragColor = vec4(v_pos, 1.0); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec3", uv: "vec2", }, varying: { pos: "vec3" }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", domain: ["vec2", [-5.0, 5.0]], mu: ["vec2", [0, 0]], sigma: ["vec2", [0.3, 0.3]], rho: ["float", 0.8] }, state: { depth: true, cull: false, blend: false } }) }); this.models['draw'] = webgl.compileModel(gl, { ...webgl.defQuadModel(), shader: webgl.defShader(gl, { vs: ` void main() { v_uv = uv; gl_Position = vec4(position, 0.0, 1.0); }`, fs: ` void main() { vec4 accum = texture2D(tex1, v_uv); float a = 1.0 - accum.a; accum.a = texture2D(tex2, v_uv).r; gl_FragColor = vec4(a * accum.rgb / clamp(accum.a, 1e-3, 5e4), a); }`, declPrefixes: { v: "v_" }, attribs: { position: 'vec2', uv: "vec2" }, varying: { uv: "vec2" }, uniforms: { tex1: ["sampler2D", 0], tex2: ["sampler2D", 1], }, state: { blend: true, blendFn: [gl.ONE, gl.ONE_MINUS_SRC_ALPHA] }, }), textures }); Object.defineProperties(this, { _tmp: { value: new Float32Array(4), writable: true }, _pick: { value: [1,1,1], writable: true } }); } prepare(camera, { mu1, mu2, sigma1, sigma2, rho }, picked) { const pick = this.models.pick; pick.uniforms.view = camera.view; pick.uniforms.proj = camera.proj; v.setC2(pick.uniforms.mu, mu1, mu2); v.setC2(pick.uniforms.sigma, sigma1, sigma2); pick.uniforms.rho = rho; this.pickFbo.bind(); gl.clearColor(1, 1, 1, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); webgl.draw(pick); this.pickFbo.unbind(); const accum = this.models.accum; gl.clearColor(0, 0, 0, 1.0); accum.uniforms.view = camera.view; accum.uniforms.proj = camera.proj; v.setC2(accum.uniforms.mu, mu1, mu2); v.setC2(accum.uniforms.sigma, sigma1, sigma2); accum.uniforms.rho = rho; accum.uniforms.maxVal = 1 / (2 * Math.PI * sigma1 * sigma2 * Math.sqrt(1 - rho ** 2)); accum.uniforms.picked = picked || v.ONE3; this.fbo.bind(); gl.clear(gl.COLOR_BUFFER_BIT); gl.enable(gl.BLEND); gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ZERO, gl.ONE_MINUS_SRC_ALPHA) webgl.draw(accum); this.fbo.unbind(); } draw() { webgl.draw(this.models.draw); } pick(x, y) { this.pickFbo.bind(); gl.readPixels(x, y, 1, 1, gl.RGBA, gl.FLOAT, this._tmp); this.pickFbo.unbind(); if (this._tmp[0] == 1 && this._tmp[1] == 1 && this._tmp[2] == 1) return null; return v.set3(this._pick, this._tmp); } }34:Teba,class Font { constructor(spec, image) { this.fontFace = spec.info.face; this.fontSize = spec.info.size; this.lineHeight = spec.common.lineHeight; this.baseLine = spec.common.base; this.pxrange = spec.distanceField.distanceRange; this.size = [spec.common.scaleW, spec.common.scaleH]; this.glyphs = spec.chars.reduce((acc, ch) => { acc[String.fromCharCode(ch.id)] = { pos: [ch.x, ch.y], offset: [ch.xoffset, ch.yoffset], size: [ch.width, ch.height], step: ch.xadvance, }; return acc; }, {}); this.texture = webgl.defTexture(gl, { filter: [gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR], mipmap: true, wrap: gl.CLAMP_TO_EDGE, image }); } alloc(size) { const stride = 4, v2 = 2; const positions = new Float32Array(size * stride * v2); const uvs = new Float32Array(size * stride * v2); const indices = new Uint16Array(size * 6); return { positions, uvs, indices }; } typeset(out, text, idx = 0) { const { positions, uvs, indices } = out; const len = text.length, v2 = 2, stride = 4; const { size, lineHeight, glyphs } = this; const dir = [1, -1]; let xx = -0.5 * d3.sum(text, c => glyphs[c].step); // align center const yy = lineHeight * 0.5; // vertical center for (let i = 0; i < len; i++) { const g = glyphs[text[i]]; const [sx, sy] = v.mul2([], g.size, dir); const [x, y] = v.madd2([], g.offset, dir, [xx, yy]); const is = (idx + i) * stride; v.setS2(positions, v.div2(null, [x, y], size), (is + 0) * v2); v.setS2(positions, v.div2(null, [x + sx, y], size), (is + 1) * v2); v.setS2(positions, v.div2(null, [x + sx, y + sy], size), (is + 2) * v2); v.setS2(positions, v.div2(null, [x, y + sy], size), (is + 3) * v2); const [px, py] = g.pos; v.setS2(uvs, v.div2(null, [px, py], size), (is + 0) * v2); v.setS2(uvs, v.div2(null, [g.pos[0] + g.size[0], g.pos[1]], size), (is + 1) * v2); v.setS2(uvs, v.div2(null, v.add2([], g.pos, g.size), size), (is + 2) * v2); v.setS2(uvs, v.div2(null, [g.pos[0], g.pos[1] + g.size[1]], size), (is + 3) * v2); xx += g.step; const ii = (i + idx) * 6; v.setCS3(indices, is, is + 1, is + 2, ii + 0); v.setCS3(indices, is, is + 2, is + 3, ii + 3); } return out; } shaderSpec() { return { vs: ` void main() { v_uv = uv; gl_Position = proj * view * model * vec4(position, 1.0); }`, fs: ` float median3(vec3 v) { return max(min(v.x, v.y), min(max(v.x, v.y), v.z)); } float norm(float x, float a, float b) { return (x - a) / (b - a); } float fitClamped(float x, float a, float b, float c, float d) { return c + (d - c) * clamp(norm(x, a, b), 0., 1.); } void main() { float sd = median3(texture2D(tex, v_uv).xyz); vec2 duv = fwidth(v_uv); float aa = max(dot(vec2(su), 0.5 / duv), 1.0); float boost = fitClamped(0.4 * su / length(duv), 1.0, 0.5, 0.0, 0.35); float t = clamp((sd - .5) * aa + 0.5, 0.0, 1.0); t = norm(t, 0.0, 1.0 - boost); gl_FragColor = mix(bg, fg, t); }`, declPrefixes: { v: "v_" }, attribs: { position: 'vec2', uv: "vec2", }, varying: { uv: "vec2" }, uniforms: { model: ["mat4", m.identity44([])], proj: "mat4", view: "mat4", tex: ["sampler2D", 0], su: ["float", this.pxrange / this.size[0]], // shape unit fg: ["vec4", [0.9,0.9,0.9,1]], bg: ["vec4", v.ZERO4], }, state: { depth: false, cull: false, blend: true, blendFn: webgl.BLEND_NORMAL }, ext: { OES_standard_derivatives: true } }; } }35:T806,class Lines { static get VS() { return ` vec2 perp(vec2 v) { return vec2(-v.y, v.x); } vec2 project(vec4 p) { return p.xy / p.w * vec2(aspect, 1.0); } void main() { mat4 mvp = proj * view * model; vec4 posA = mvp * vec4(p0, 1.0), posB = mvp * vec4(p1, 1.0); vec2 A = project(posA), B = project(posB); vec2 dir = perp(normalize(B - A)) * thickness * 0.5 * position.y; vec4 p = mix(posA, posB, position.x); dir *= p.w / vec2(aspect, 1.0); p.xy += dir; gl_Position = p; } `;} static get FS() { return `void main() { gl_FragColor = color; }`; } constructor() { this.buffer = webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW); this.model = webgl.compileModel(gl, { attribs: { position: { data: new Float32Array([0,1, 0,-1, 1,1, 1,-1]), size: 2 }, }, instances: { attribs: { p0: { buffer: this.buffer, offset: 0, stride: 24 }, p1: { buffer: this.buffer, offset: 12, stride: 24 }, }, }, num: 4, mode: gl.TRIANGLE_STRIP, uniforms: {}, shader: webgl.defShader(gl, { vs: Lines.VS, fs: Lines.FS, attribs: { position: "vec2", p0: "vec3", p1: "vec3" }, state: { depth: true, cull: false, blend: true, blendFn: webgl.BLEND_NORMAL }, uniforms: { model: ["mat4", m.identity44([])], proj: "mat4", view: "mat4", aspect: ["float", gl.drawingBufferWidth / gl.drawingBufferHeight], color: ["vec4", [0.9,0.9,0.9,1]], thickness: ["float", 0.007], }, state: { depth: true, blend: true, } }) }); } get uniforms() { return this.model.uniforms; } update(points) { this.buffer.set(points); this.model.instances.num = points.length / 6; } draw(camera) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; webgl.draw(this.model); } }36:T98d,class Camera { constructor(opts) { const { viewport, pos, target = v.ZERO3, up = v.Y3, fov = 45, near = 0.1, far = 50, } = opts; this.pos = pos; this.target = v.copy(target); this.up = v.copy(up); Object.defineProperties(this, { _viewport: { value: viewport, writable: true }, _radius: { value: Math.min(...viewport), writable: true }, _center: { value: v.mulN([], viewport, 0.5), writable: true }, // drag start _camUp: { value: [], writable: true }, _viewDir: { value: [], writable: true }, _down: { value: [], writable: true }, // drag _delta: { value: [], writable: true }, _side: { value: [], writable: true }, _axis: { value: [], writable: true }, _vd: { value: [], writable: true }, _rot: { value: [], writable: true }, }); this.view = m.lookAt([], this.pos, this.target, this.up); this.proj = m.perspective([], fov, viewport[0] / viewport[1], near, far); } _spherePos(out, x, y) { v.divN(null, v.setC3(out, x - this._center[0], -(y - this._center[1]), 0), this._radius); const mag = v.magSq(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } _updateView() { m.lookAt(this.view, this.pos, this.target, this.up); return this; } start(x, y) { this._spherePos(this._down, x, y); v.set(this._camUp, this.up); v.sub(this._viewDir, this.pos, this.target); return this; } drag(x, y) { v.sub(null, this._spherePos(this._delta, x, y), this._down); v.cross3(this._side, this._camUp, this._viewDir) v.mulN(null, v.normalize(null, this._side), this._delta[0]); v.mulN(this._axis, this._camUp, this._delta[1]); v.add(null, this._axis, this._side); v.cross3(null, this._axis, this._viewDir) v.normalize(null, this._axis); m.rotationAroundAxis33(this._rot, this._axis, v.magSq(this._delta) * 5); m.mulV(this.up, this._rot, this._camUp); v.add(this.pos, this.target, m.mulV(this._vd, this._rot, this._viewDir)); return this._updateView();; } zoom(delta, min = 0.1, max = 10.0) { v.sub(this._vd, this.target, this.pos); const mag = Math.max(min, Math.min(max, Math.pow(Math.E, delta) * v.mag(this._vd))); v.mulN(null, v.sub(this.pos, this.target, v.normalize(null, this._vd)), mag); return this._updateView();; } }37:T756,viridis = { // https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/viridis.js const specifier = "44015444025645045745055946075a46085c460a5d460b5e470d60470e6147106347116447136548146748166848176948186a481a6c481b6d481c6e481d6f481f70482071482173482374482475482576482677482878482979472a7a472c7a472d7b472e7c472f7d46307e46327e46337f463480453581453781453882443983443a83443b84433d84433e85423f854240864241864142874144874045884046883f47883f48893e49893e4a893e4c8a3d4d8a3d4e8a3c4f8a3c508b3b518b3b528b3a538b3a548c39558c39568c38588c38598c375a8c375b8d365c8d365d8d355e8d355f8d34608d34618d33628d33638d32648e32658e31668e31678e31688e30698e306a8e2f6b8e2f6c8e2e6d8e2e6e8e2e6f8e2d708e2d718e2c718e2c728e2c738e2b748e2b758e2a768e2a778e2a788e29798e297a8e297b8e287c8e287d8e277e8e277f8e27808e26818e26828e26828e25838e25848e25858e24868e24878e23888e23898e238a8d228b8d228c8d228d8d218e8d218f8d21908d21918c20928c20928c20938c1f948c1f958b1f968b1f978b1f988b1f998a1f9a8a1e9b8a1e9c891e9d891f9e891f9f881fa0881fa1881fa1871fa28720a38620a48621a58521a68522a78522a88423a98324aa8325ab8225ac8226ad8127ad8128ae8029af7f2ab07f2cb17e2db27d2eb37c2fb47c31b57b32b67a34b67935b77937b87838b9773aba763bbb753dbc743fbc7340bd7242be7144bf7046c06f48c16e4ac16d4cc26c4ec36b50c46a52c56954c56856c66758c7655ac8645cc8635ec96260ca6063cb5f65cb5e67cc5c69cd5b6ccd5a6ece5870cf5773d05675d05477d1537ad1517cd2507fd34e81d34d84d44b86d54989d5488bd6468ed64590d74393d74195d84098d83e9bd93c9dd93ba0da39a2da37a5db36a8db34aadc32addc30b0dd2fb2dd2db5de2bb8de29bade28bddf26c0df25c2df23c5e021c8e020cae11fcde11dd0e11cd2e21bd5e21ad8e219dae319dde318dfe318e2e418e5e419e7e419eae51aece51befe51cf1e51df4e61ef6e620f8e621fbe723fde725"; const n = specifier.length / 6 | 0; const arr = new Array(n); for (let i = 0; i < n; i++) { const { r, g, b } = d3.rgb("#" + specifier.slice(i * 6, (i + 1) * 6)); arr[i] = [r, g, b]; } return arr; }38:T6be,class View { static create(initialize) { return new Promise(resolve => { const view = new View(); let resolved = false; const dispose = initialize(x => { view.value = x; if (!resolved) { resolved = true; resolve(Generators.disposable(view, () => { dispose && dispose(); view.dispose(); })); }; }) }); } static subs(unsubs) { return () => unsubs.forEach(unsub => unsub()); } constructor(value) { Object.defineProperties(this, { _value: { value, writable: true }, _list: { value: {}, writable: true }, _subs: { value: [], writable: true }, }); const dispatch = e => this._subs.forEach(sub => sub(e.value)); this.addEventListener('input', dispatch); this.dispose = () => this.removeEventListener("input", dispatch); }; get value() { return this._value; } set value(val) { this._value = val; this.notify(); } observe(sub) { this._subs.push(sub); sub(this.value); // give out the current value on subscription return () => this._subs = this._subs.filter(l => l !== sub); } notify() { this.dispatchEvent({ type: "input", value: this.value }); } addEventListener(type, listener) { if (!this._list[type]) this._list[type] = []; if (this._list[type].includes(listener)) return; this._list[type] = [listener].concat(this._list[type]); } removeEventListener(type, listener) { this._list[type] = this._list[type].filter(l => l !== listener); } dispatchEvent(event) { if (!this._list[event.type]) return; const p = Promise.resolve(event); this._list[event.type].forEach(l => p.then(l)); } }39:[{"id":"012e209ac22c3adc6a0834b92e5777fb31accbd7d1e31d8f85b8baa12abe9783d297ac3b05e24b1ed64c7b4b2cc65d4ba97799813a39cde4bfb5b91781ebee80","href":"https://static.observableusercontent.com/files/012e209ac22c3adc6a0834b92e5777fb31accbd7d1e31d8f85b8baa12abe9783d297ac3b05e24b1ed64c7b4b2cc65d4ba97799813a39cde4bfb5b91781ebee80","name":"OpenSans-Regular-msdf.json","type":"application/json","lastModified":1600079982287.81,"size":12903},{"id":"483406375cbaf03487fc2bf423c1493c5fe8305412055369296d68403171d0367ded16757e273c2f04fd6b23fba8b2deed8a5bbee7e6ae8ea4de83e62b8f0edc","href":"https://static.observableusercontent.com/files/483406375cbaf03487fc2bf423c1493c5fe8305412055369296d68403171d0367ded16757e273c2f04fd6b23fba8b2deed8a5bbee7e6ae8ea4de83e62b8f0edc","name":"OpenSans-Regular.png","type":"image/png","lastModified":1600079982650.376,"size":91841}] 2e:{"id":"76e599f71964ba94","slug":"parametric-surface-plots","title":"Parametric Surface Plots","thumbnail":"dbedad4edf7661e9c457f989f61f59a08eb72a98e68e5ca597216c70a344608f","access_level":"public","create_time":"$D2020-08-14T06:23:38.489Z","update_time":"$D2020-09-21T13:23:10.438Z","view_time":null,"first_public_time":"$D2020-09-20T04:42:04.323Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":"starter_2024"},"version":4204,"publish_version":4204,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null}],"members":[{"type":"individual","id":"dbb85afd665c9e5e","login":"stwind","name":"Zihou Ng","avatar_url":"https://avatars-next.observableusercontent.com/ff8a8f73ad220dcaec180c1e813951d692777837355004f062692b49042d2458","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"9bd8b2489631aa82","slug":"webgl","title":"WebGL","owner":{"id":"7fad80bf128915e9","login":"stwind","name":"Zihou Ng"}},"type":"notebook","body":{"title":"Parametric Surface Plots","cells":[{"id":0,"value":"md`# Parametric Surface Plots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1784,"value":"md`Experimenting ideas of plotting dynamic parametric surfaces. Heavily influenced by the pioneer works by [gl-vis](https://github.com/gl-vis).\n\n* Camera adaptive axes facing.\n* MSDF tick lable texts.\n* Parametric surfaces in GLSL.\n* Color maps (currently *viridi*).\n* Surface transparency.\n* Surface picking.\n* Contour lines.\n* Anti-aliased grid lines.\n* Performance (60fps).\n* No framework. From scratch with only [D3](https://d3js.org/) and [@thi.ng/webgl](https://thi.ng/webgl).\n\nAt this iteration, I am plotting the [Bivariate Normal Distribution](https://www.probabilitycourse.com/chapter5/5_3_2_bivariate_normal_dist.php):\n\n${tex.block`f(x_1,x_2;\\mu_1,\\mu_2,\\sigma_1,\\sigma_2,\\rho)=\\frac{1}{2 \\pi\\sigma_1\\sigma_2\\sqrt{1-\\rho^2}} \\cdot e^{-\\frac{1}{2} \\cdot \\frac{1}{1-\\rho^2}\\left[\\big(\\frac{x-\\mu_1}{\\sigma_1}\\big)^2 + \\big(\\frac{x_2-\\mu_2}{\\sigma_2}\\big)^2 - 2\\rho\\frac{(x_1-\\mu_1)(x_2-\\mu_2)}{\\sigma_1\\sigma_2} \\right]}`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width * 0.6);\n const gl = canvas.value = canvas.getContext('webgl');\n gl.getExtension(\"OES_texture_float\");\n gl.getExtension(\"WEBGL_draw_buffers\");\n \n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"viewof mu1 = slider({\n min: -5, \n max: 5, \n step: 0.01, \n value: 0, \n title: tex`\\mu_1`, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"viewof mu2 = slider({\n min: -5, \n max: 5, \n step: 0.01, \n value: 0, \n title: tex`\\mu_2`, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"viewof sigma1 = slider({\n min: 0.1, \n max: 2, \n step: 0.01, \n value: 0.78, \n title: tex`\\sigma_1`, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"viewof sigma2 = slider({\n min: 0.1, \n max: 2, \n step: 0.01, \n value: 0.81, \n title: tex`\\sigma_2`, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":317,"value":"viewof rho = slider({\n min: -1 + 1e-2, \n max: 1 - 1e-2, \n step: 0.01, \n value: 0, \n title: tex`\\rho`, \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4150,"value":"md`---\n## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"draw = {\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n\n surface.prepare(camera, { mu1, mu2, sigma1, sigma2, rho }, picked);\n \n gl.clearColor(.08, .08, .08, 1);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n \n grid.draw(camera);\n labels.draw(camera);\n ticks.draw(camera);\n \n if (picked) {\n indicators.update(picked, sides);\n indicators.draw(camera);\n }\n \n surface.draw();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3327,"value":"update = {\n grid.update(sides);\n labels.update(sides);\n ticks.update(sides);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2412,"value":"md`### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2432,"value":"picked = Generators.observe(next => {\n next(null);\n \n let res = null;\n\n function pick(x, y) {\n const tmp = surface.pick(x, y);\n if (tmp || res) {\n next(res = tmp);\n }\n };\n \n const canvas = d3.select(gl.canvas);\n canvas.on('mousemove', e => pick(e.offsetX, gl.drawingBufferHeight - e.offsetY));\n\n return () => canvas.on('mousemove', null);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4088,"value":"surface = new Surface(viridis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3957,"value":"ticks = new Ticks(steps, params)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3789,"value":"labels = new Labels([\"x\",\"y\",\"z\"], params)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2967,"value":"indicators = new Indicators(params.size + params.margin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3181,"value":"grid = new Grid(steps, params.size + params.margin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3240,"value":"sides = Generators.observe(next => {\n const cam = viewof camera;\n const res = [], tmp = [];\n next(v.sign(res, cam.value.pos));\n \n return cam.observe(c => {\n if (!v.equals3(res, v.sign(tmp, c.pos))) \n next(v.set3(res, tmp));\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3688,"value":"viewof camera = View.create(next => {\n const cam = new Camera({\n viewport: [gl.drawingBufferWidth, gl.drawingBufferHeight],\n pos: [1.7769157954388173, 0.7731717282365794, 1.7331421312210562],\n up: [-0.13293239418738673, 0.9486841440053574, -0.28692747078039094]\n });\n next(cam);\n \n const canvas = d3.select(gl.canvas);\n canvas.call(d3.drag().on('start', e => {\n cam.start(e.x, e.y);\n e.on('drag', e => next(cam.drag(e.x, e.y)));\n }));\n canvas.on('wheel', e => {\n e.preventDefault();\n next(cam.zoom(e.deltaY * 1e-3, 0.01, 50));\n });\n \n return () => canvas.on('.drag', null).on('wheel', null);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2154,"value":"steps = d3.range(-.5, .6, .1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2578,"value":"params = ({\n margin: 0.05,\n size: 0.5,\n step: 0.1,\n font: new Font(\n await FileAttachment(\"OpenSans-Regular-msdf.json\").json(),\n await FileAttachment(\"OpenSans-Regular.png\").image())\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2415,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3350,"value":"class Indicators {\n constructor(size) {\n this.size = size;\n this.lines = new Lines();\n \n Object.defineProperties(this, {\n _p: { value: [0, 0, 0], writable: true },\n _data: { value: new Float32Array(6 * 2 * 3), writable: true }\n });\n }\n \n update(picked, sides) {\n const size = -this.size;\n const p = this._p, data = this._data;\n\n for (let d = 0; d < 3; d++) {\n const a = (d + 1) % 3, b = (d + 2) % 3;\n const idx = d * 4;\n p[d] = size * sides[d];\n \n p[a] = picked[a]; p[b] = size;\n v.setS3(data, p, (idx + 0) * 3);\n p[b] *= -1;\n v.setS3(data, p, (idx + 1) * 3);\n \n p[b] = picked[b]; p[a] = size;\n v.setS3(data, p, (idx + 2) * 3);\n p[a] *= -1;\n v.setS3(data, p, (idx + 3) * 3);\n }\n this.lines.update(data);\n }\n \n get uniforms() {\n return this.lines.uniforms;\n }\n \n draw(camera) {\n this.lines.uniforms.color = [.9,.9,.9,1];\n this.lines.uniforms.thickness = 0.007;\n this.lines.draw(camera);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3171,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3942,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3054,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4057,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3562,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2952,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1515,"value":"md`### Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"makePlane = (width, height, nx, ny) => {\n const positions = [], uvs = [], normals = [], indices = [];\n const w = nx + 1;\n \n for (let iy = 0; iy <= ny; iy++) {\n for (let ix = 0; ix <= nx; ix++) {\n const a = ix / nx, b = iy / ny;\n const x = width * (a - 0.5);\n const z = height * (b - 0.5);\n \n positions.push(x, 0, z);\n normals.push(0, 1, 0);\n uvs.push(a, 1 - b);\n \n if (ix < nx && iy < ny) {\n indices.push(iy * w + ix, (iy + 1) * w + ix, (iy + 1) * w + ix + 1);\n indices.push(iy * w + ix, (iy + 1) * w + ix + 1, iy * w + ix + 1);\n }\n }\n }\n \n return { positions, uvs, normals, indices };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2936,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3206,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2532,"value":"fps = {\n let t = performance.now(), delta = 0;\n const last = [t];\n return cell => {\n last.length >= 10 && last.shift();\n t = performance.now();\n delta = (t - last[0]) / last.length;\n last.push(t);\n return Math.round(1000 / delta);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"md`### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"webgl = require('https://bundle.run/@thi.ng/webgl@3.0.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"m = require('https://bundle.run/@thi.ng/matrices@0.6.27')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"md`---\n## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"md`\n* [Bivariate Normal Distribution | Jointly Normal](https://www.probabilitycourse.com/chapter5/5_3_2_bivariate_normal_dist.php)\n* [errcw/gaussian: A JavaScript model of the normal distribution](https://github.com/errcw/gaussian)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2f:"$2e:body"