31:T2055,class Polylines { static makePositions(joinRes) { const pad = joinRes * 2 + 1; const positions = [[0,0], [0,.5], [0,-.5], [1,.5], [1,-.5], [1,0]]; const res = new Float32Array((pad * 2 + 6) * 2); for (let i = 0, l = positions.length; i < l; i++) { res[(pad + i) * 2 + 0] = positions[i][0]; res[(pad + i) * 2 + 1] = positions[i][1]; } for (let i = 0; i < pad; i++) res[(pad + 6 + i) * 2] = 1; return res; } static makePointsData(segs, out = null) { const nPoints = d3.sum(segs, x => x.length) + 2; out = out || new Float32Array(nPoints * 3); v.setS3(out, segs[0][0]); let o = 3; for(let i = 0, m = segs.length; i < m; i++) { for(let j = 0, n = segs[i].length; j < n; j++, o += 3) { v.setS3(out, segs[i][j], o); } } const last = segs[segs.length - 1]; v.setS3(out, last[last.length - 1], o); return out; } static makeTypesData(segs) { const lengths = segs.map(x => x.length); const types = new Float32Array(d3.sum(lengths) - 1); for (let i = 0, c = 0, l = lengths.length; i < l; c += lengths[i], i++) { types[c] = 1; types[c + lengths[i] - 2] = 2; types[c + lengths[i] - 1] = -1; } return types; } constructor(gl, joinRes = 16) { const stride = Float32Array.BYTES_PER_ELEMENT * 3; this.gl = gl; this.data = {}; this.buffers = { points: webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW), types: webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW), }; const positions = Polylines.makePositions(joinRes); this.model = webgl.compileModel(gl, { attribs: { position: { data: positions, size: 2 }, index: { data: new Float32Array(d3.range(positions.length / 2)), size: 1 } }, instances: { attribs: { pA: { buffer: this.buffers.points, offset: stride * 0 }, pB: { buffer: this.buffers.points, offset: stride * 1 }, pC: { buffer: this.buffers.points, offset: stride * 2 }, pD: { buffer: this.buffers.points, offset: stride * 3 }, type: { buffer: this.buffers.types, size: 1 }, }, }, num: positions.length / 2, mode: gl.TRIANGLE_STRIP, uniforms: {}, shader: webgl.defShader(gl, { vs: ` vec2 perp(vec2 v) { return vec2(-v.y, v.x); } vec2 project(vec4 p) { return p.xy / max(p.w,1e-6) * vec2(aspect, 1.0); } vec4 toClip(vec3 p) { return proj * view * model * vec4(p, 1.0); } vec4 addP(vec4 p, vec2 dir) { dir *= max(p.w, 1e-6) / vec2(aspect, 1.0); return p + vec4(dir, 0., 0.); } vec2 rotate(vec2 v, float a) { float s = sin(a), c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } void main(){ if (type == -1.0) return; float joinPad = joinRes * 2.; float nPoints = 6. + (joinPad + 1.) * 2.; bool isSegs = joinPad < index && index < nPoints - joinPad - 1.; vec3 pa = pA, pb = pB, pc = pC; float y = position.y; if (position.x == 1.0) { pa = pD, pb = pC, pc = pB; y *= -1.; } vec4 p0c = toClip(pa), p1c = toClip(pb), p2c = toClip(pc); vec2 p0 = project(p0c), p1 = project(p1c), p2 = project(p2c); v_width = clamp(width / max(p1c.z, 1e-6), .01, .8); v_width *= length(pb); v_p1 = p1, v_p2 = p2; vec2 tangent = normalize(normalize(p2 - p1) + normalize(p1 - p0)); vec2 normal = perp(tangent); vec2 p01 = p1 - p0, p21 = p1 - p2; vec2 xBasis = -p21, yBasis = normalize(perp(xBasis)); float w = v_width * 0.5; float outer = w / dot(normal, normalize(perp(p01))); float sigma = -sign(dot(p01 + p21, normal)); v_isJoint = 0.0; v_isCap = 0.0; vec2 dir = vec2(0.0); bool inner = type == 0.0 || (type == 1.0 && position.x == 1.0) || (type == 2.0 && position.x == 0.0); bool isCap = (type == 1.0 && position.x == 0.0) || (type == 2.0 && position.x == 1.0); if (inner && isSegs && sign(y) == sigma) { float md = min(dot(p01, p01), dot(p21, p21)) + w * w; if (outer * outer <= md) dir = normal * sigma * outer; else dir = yBasis * y * v_width; } else if (inner && !isSegs) { v_isJoint = 1.0; float deg = acos(dot(normalize(p01),normalize(p21))); deg = -(PI - deg) / 2. / joinRes; if (index < joinRes * 2. + 1. && mod(index, 2.) == 0.) { float i = joinRes - floor(index / 2.); if (sigma == -1.0) dir = yBasis * w; else dir = -normal * w; dir = rotate(dir, i * deg); } else if (index >= joinRes * 2. + 1. + 6. && mod(index, 2.) == 1.) { float i = joinRes - floor((nPoints - index) / 2.); if (sigma == -1.0) dir = yBasis * w; else dir = -normal * w; dir = rotate(dir, i * deg); } } else if (isCap) { dir = yBasis * y * v_width; float pad = joinRes * 2. + 1.; if (index < pad + 1. || index >= pad + 6.) v_isCap = 1.0; float deg = PI / (joinRes + 1.); if (index < joinRes * 2. + 1. && mod(index, 2.) == 0.) { float i = floor(index / 2.); dir = rotate(-yBasis * w, i * deg); } else if (index >= joinRes * 2. + 1. + 6. && mod(index, 2.) == 1.) { float i = floor((index - 6. - (joinRes - 1.) * 2.) / 2.); dir = rotate(yBasis * w, i * -deg); } } else { dir = yBasis * y * v_width; } gl_Position = addP(p1c, dir); }`, fs: ` vec2 perp(vec2 v) { return vec2(-v.y, v.x); } float aastep(float threshold, float value) { float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; return smoothstep(threshold-afwidth, threshold+afwidth, value); } float circle(vec2 p, float radius) { return aastep(radius, length(p)); } float sideOf(vec2 p, vec2 line) { return aastep(1e-6, sign(dot(p, perp(line)))); } float distToLine(vec2 p1, vec2 p2, vec2 p) { return abs(dot(normalize(perp(p2 - p1)), p1 - p)); } vec2 ndcCoord() { vec2 p = gl_FragCoord.xy / viewport * 2.0 - 1.0; return p * vec2(aspect, 1.0); } void main() { float t = 0.0; if (border > 0.0) { vec2 p = ndcCoord(); float w = v_width * .5, b = 1. - border; float t1 = aastep(b, distToLine(v_p1, v_p2, p) / w); float t2 = circle(p - v_p1, w * b); t = mix(t1, t2, min(1.0, v_isCap + v_isJoint)); } gl_FragColor = vec4(mix(color, borderColor, t), 1.); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec2", index: "float", pA: "vec3", pB: "vec3", pC: "vec3", pD: "vec3", type: "float" }, varying: { p1: "vec2", p2: "vec2", isJoint: "float", isCap: "float", width: "float" }, state: { depth: true, cull: true, blend: false, blendFn: webgl.BLEND_NORMAL }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", joinRes: ["float", joinRes], viewport: ["vec2", [gl.drawingBufferWidth, gl.drawingBufferHeight]], aspect: ["float", gl.drawingBufferWidth / gl.drawingBufferHeight], width: ["float", .1], border: ["float", .2], color: "vec3", borderColor: "vec3" }, ext: { OES_standard_derivatives: true } }), }); } update(segs) { const n = (d3.sum(segs, x => x.length) + 2) * 3; if (!this.data.points || this.data.points.length != n) { this.data.points = Polylines.makePointsData(segs); this.data.types = Polylines.makeTypesData(segs); this.buffers.types.set(this.data.types); } else { this.data.points = Polylines.makePointsData(segs, this.data.points); } this.buffers.points.set(this.data.points); return this; } draw(camera, { width = 10, color = [.8,.8,.2], border = 0.1, borderColor = [.5,.5,.5] }) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; this.model.uniforms.color = color; this.model.uniforms.width = width * 2 / this.gl.drawingBufferHeight this.model.uniforms.border = border; this.model.uniforms.borderColor = borderColor; this.model.instances.num = this.data.types.length; webgl.draw(this.model); } }32:T1095,class Camera { constructor(opts) { const { viewport, eye, target = v.ZERO3, up = v.Y3, fov = 45, near = 0.01, far = 50, } = opts; this.proj = m.perspective([], fov, viewport[0] / viewport[1], near, far); this.tanFov = Math.tan(fov * math.DEG2RAD / 2); this.viewport = viewport; Object.defineProperties(this, { _radius: { value: Math.min(...viewport), writable: true }, _center: { value: v.mulN([], viewport, 0.5), writable: true }, _eye: { value: eye, writable: true }, _up0: { value: v.copy(up), writable: true }, _target: { value: v.copy(target), writable: true }, _up: { value: [] }, _viewDir: { value: [] }, _down: { value: [] }, _delta: { value: [] }, _side: { value: [] }, _axis: { value: [] }, _vd: { value: [] }, _rot: { value: [] }, _view: { value: m.lookAt([], eye, target, up) }, _grabEye: { value: [] }, _grabTarget: { value: [] }, _dirty: { value: true, writable: true } }); } _spherePos(out, x, y) { v.divN3(null, v.setC3(out, x - this._center[0], y - this._center[1], 0), this._radius); const mag = v.magSq3(out); return mag > 1.0 ? v.normalize(null, out) : (out[2] = Math.sqrt(1.0 - mag), out); } get eye() { return this._eye; } set eye(val) { this._eye = val; this._dirty = true; return this; } get target() { return this._target; } set target(val) { this._target = val; this._dirty = true; return this; } get up() { return this._up0; } set up(val) { this._up0 = val; this._dirty = true; return this; } get view() { if (!this._dirty) return this._view; this._dirty = false; return m.lookAt(this._view, this.eye, this.target, this.up); } orbitStart(x, y) { this._spherePos(this._down, x, y); v.set3(this._up, this.up); v.sub3(this._viewDir, this.eye, this.target); return this; } orbitUpdate(x, y, speed = 5) { const [dx, dy] = v.sub3(null, this._spherePos(this._delta, x, y), this._down); v.cross3(this._side, this._up, this._viewDir); v.normalize(null, this._side, dx); v.mulN3(this._axis, this._up, -dy); v.add3(null, this._axis, this._side); v.normalize(null, v.cross3(null, this._axis, this._viewDir)); m.rotationAroundAxis33(this._rot, this._axis, v.magSq3(this._delta) * speed); m.mulV33(this.up, this._rot, this._up); v.add3(this.eye, this.target, m.mulV33(this._vd, this._rot, this._viewDir)); this._dirty = true; return this; } panStart(x, y) { v.setC2(this._down, x, y); v.set3(this._grabEye, this.eye); v.set3(this._grabTarget, this.target); return this; } panUpdate(x, y) { const [dx, dy] = v.submN2(null, [x, y], this._down, 2 / this._radius); const viewDir = v.sub3(this._vd, this.target, this.eye); const dist = v.mag(viewDir) * this.tanFov; v.normalize(null, viewDir); const side = v.normalize(null, v.cross3(this._side, this.up, viewDir), dist * dx); const up = v.normalize(this._up, this.up, dist * dy); v.add3(null, v.add3(this.eye, this._grabEye, up), side); v.add3(null, v.add3(this.target, this._grabTarget, up), side); this._dirty = true; return this; } zoom(delta, min = 0.1, max = 10.0) { v.sub3(this._vd, this.target, this.eye); const mag = math.clamp(Math.pow(Math.E, delta) * v.mag(this._vd), min, max); v.sub3(this.eye, this.target, v.normalize(null, this._vd, mag)); this._dirty = true; return this; } panZoom(x, y, delta, min, max) { const d = v.submN2(null, [x, y], this._center, -2 * this.tanFov / this._radius); const a0 = v.mag(v.sub3(this._vd, this.target, this.eye)); this.zoom(delta, min, max); const viewDir = v.sub3(this._vd, this.target, this.eye); const [dx, dy] = v.mulN2(null, d, a0 - v.mag(viewDir)); v.normalize(null, viewDir); const side = v.normalize(null, v.cross3(this._side, this.up, viewDir), dx); const up = v.normalize(this._up, this.up, dy); v.add3(null, v.add3(null, this.target, up), side); v.add3(null, v.add3(null, this.eye, up), side); this._dirty = true; return this; } }33:T5a4,catmullRomSpline = { const makeSegment = (p0, p1, p2, p3, alpha = 0.5, tension = 0.0) => { const t0 = 0; const t1 = v.dist3(p1, p0) ** alpha + t0; const t2 = v.dist3(p2, p1) ** alpha + t1; const t3 = v.dist3(p3, p2) ** alpha + t2; const p01 = v.submN3([], p1, p0, 1 / (t1 - t0)); const p02 = v.submN3([], p2, p0, 1 / (t2 - t0)); const p12 = v.submN3([], p2, p1, 1 / (t2 - t1)); const m1 = v.addmN3(null, v.sub3([], p01, p02), p12, (1.0 - tension) * (t2 - t1)); const p13 = v.submN3([], p3, p1, 1 / (t3 - t1)); const p23 = v.submN3([], p3, p2, 1 / (t3 - t2)); const m2 = v.addmN3(null, v.sub3([], p12, p13), p23, (1.0 - tension) * (t2 - t1)); const a = v.add3(null, v.add3(null, v.submN3([], p1, p2, 2), m1), m2); const b = v.sub3(null, v.sub3(null, v.sub3(null, v.submN3([], p1, p2, -3), m1), m1), m2); return [a, b, m1, p1]; }; const mixCubicPoly = (t, p0, p1, p2, p3) => { const t2 = t * t; const a = v.mulN3([], p0, t2 * t); const b = v.mulN3([], p1, t2); const c = v.mulN3([], p2, t); return v.add3(null, v.add3(null, v.add3(null, a, b), c), p3); }; return (pts, n = 40, alpha = 0.5) => { const res = []; for (let i = 0, m = pts.length - 3; i < m; i++) { const seg = makeSegment(pts[i], pts[i+1], pts[i+2], pts[i+3], alpha); linspace(0.05, .95, n).forEach(t => res.push(mixCubicPoly(t, ...seg))); } return res; }; }34:[] 2f:{"title":"Genuary 2022 / 1. Draw 10,000 of something","cells":[{"id":0,"value":"# Genuary 2022 / 1. Draw 10,000 of something","pinned":false,"hidden":false,"mode":"md"},{"id":888,"value":"Probably a little late, but hopefully I can catch up the [Genuray 2022](https://genuary.art/). This is for the first day's \"Draw 10,000 of something\": 10k of fleeing lines. \n\nThe WebGL instanced line drawing technique was inspired by [Rye Terrell](https://wwwtyro.net/2021/10/01/instanced-lines-part-2.html) and [Ricky Reusser](https://observablehq.com/@rreusser/drawing-instanced-lines-with-regl)'s awesome pioneer work. Here I reimplemented with [thi.ng/umbrella](https://github.com/thi-ng/umbrella).","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width / 1.618);\n const gl = canvas.value = canvas.getContext('webgl', {\n antialias: true, alpha: true\n });\n gl.getExtension('OES_texture_float');\n gl.getExtension('WEBGL_draw_buffers');\n gl.getExtension('WEBGL_color_buffer_float');\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"viewof nLines = Inputs.range([1, 10000], {label: \"# of Lines\", value: 10000, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"---\n## Code","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"render = {\n gl.clearColor(0.1, 0.1, 0.1, 1);\n gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n update;\n polylines.draw(camera, { \n width: 6,\n border: .1,\n color: [1,1,1],\n borderColor: [.38,.38,.38]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"update = {\n polylines.update(makeRandomWalkSegments(nLines));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"polylines = new Polylines(gl)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"camera = Generators.observe(next => {\n const cam = new Camera({\n viewport: [gl.drawingBufferWidth, gl.drawingBufferHeight],\n eye: [0, 0, 1.5],\n near: 0.001, far: 50\n })\n next(cam);\n\n const canvas = d3.select(gl.canvas).call(\n d3.drag()\n .on('start', e => next(cam.orbitStart(e.x, e.y)))\n .on('drag', e => next(cam.orbitUpdate(e.x, e.y))))\n .on('wheel', e => (e.preventDefault(), next(cam.zoom(e.deltaY * 1e-3, 0.01, 50 - 1))));\n \n return () => canvas.on('.drag', null).on('wheel', null);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"### WebGL","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"### Utils","pinned":false,"hidden":false,"mode":"md"},{"id":866,"value":"makeRandomWalkSegments = n => {\n const randTheta = d3.randomUniform(Math.PI);\n const randPhi = d3.randomUniform(Math.PI * 2);\n return d3.range(n).map(() => {\n const dir = cartesian3(null, [1, randTheta(), randPhi()]);\n const points = randomWalkTowards(v.ZERO3, dir, 5, .2);\n return catmullRomSpline(points, 10);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"randomWalkTowards = (start, dir, nSteps, stepSize = 1, lambda = 2.2) => {\n const res = [start, v.normalize([], dir, stepSize)];\n const randTheta = d3.randomUniform(Math.PI);\n const randRatio = d3.randomExponential(lambda);\n const randPhi = d3.randomUniform(Math.PI * 2);\n const tmp = []\n for (let i = 0; i < nSteps; i++) {\n const l = res.length;\n const theta = randTheta() * Math.min(randRatio(), 1.0);\n const dir = rotateAround(v.sub3(tmp, res[l - 1], res[l - 2]), theta, randPhi());\n res.push(v.maddN3(null, dir, stepSize, res[l - 1]));\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"rotateAround = (axis, theta, phi) => {\n const q = m.alignmentQuat(v.Z3, axis);\n const dir = cartesian3(null, [1, theta, phi]);\n return m.mulVQ(dir, q, dir);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"cartesian3 = (out, a) => {\n const [r, theta, phi] = a;\n const st = Math.sin(theta);\n const x = r * st * Math.cos(phi);\n const y = r * st * Math.sin(phi);\n const z = r * Math.cos(theta);\n return v.setC3(out || a, x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"linspace = (a, b, n) => d3.range(a, b + 1e-6, (b - a) / (n - 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"math = import(\"https://cdn.skypack.dev/@thi.ng/math@v5.2.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"m = import(\"https://cdn.skypack.dev/@thi.ng/matrices@v2.1.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"v = require(\"https://bundle.run/@thi.ng/vectors@7.4.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"webgl = import(\"https://cdn.skypack.dev/@thi.ng/webgl@v6.1.7\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}