30:T553,html`

👉NOTE: I'm learning Observable! You should pin the version if you use any functions herein: ${md`~~~javascript import { reglCanvas } from '${PINNED}' ~~~`} This notebook is highly subject to changes and regrets. My biggest current regrets are: ${md` - It should use x0, y0, x1, y1 for the viewport. Not margins. Much more portable, except for the fact that you have to carry around the DPI along with it. - ~~It should add a WebGL context to an SVG as a foreign object, if possible. The reason I focused on stacking them is that WebGL contexts are limited and sooner or later you make subplots or layers and regret needing many WebGL contexts in a single plot. I was trying to make heavy use of viewports and scissoring for the sake of efficiency and minimizing contexts, but I could still do that and play the SVG game a bit better.~~ - Update: WebGL *does not* play well with SVG as a foreign object. There are some really obscure rendering bugs that prevent WebGL contexts from obeying last-on-top SVG-style ordering. My conclusion is that it is *not*, in fact, wise to go overboard with fanciness and instead to just layer the elements. `}`31:T51c,function createLayerStack (w, h, dpi, layerConstructors) { w = Math.floor(w); h = Math.floor(h); dpi = dpi === undefined ? devicePixelRatio : dpi; const dpiWidth = Math.floor(w * dpi); const dpiHeight = Math.floor(h * dpi); const container = document.createElement('div'); container.style.position = "relative"; container.style.width = w + 'px'; container.style.height = h + 'px'; function createLayer(ctor, i) { let element; let value = ctor(w, h, dpi); if (value instanceof Element) { element = value; value = element.value || element; } else { element = value.canvas || value; } element.style.position = "absolute"; element.style.top = 0 element.style.left = 0; element.style.width = '100%'; element.style.height = '100%'; element.style.zIndex = i; container.appendChild(element); return value; } let layers; if (Array.isArray(layerConstructors)) { layers = layerConstructors.map(createLayer); } else { let layerNames = Object.keys(layerConstructors); layers = {}; layerNames.forEach((name, i) => { layers[name] = createLayer(layerConstructors[name], i); }) } return { layers, container, dpiWidth, dpiHeight, dpi, width: w, height: h }; }32:T52c,function createReglViewportConfiguration (regl) { const viewport3 = mat3create(); let command = regl({ scissor: { enable: true, box: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.framebufferWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.framebufferHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) } }, viewport: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.framebufferWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.framebufferHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) }, uniforms: { viewportResolution: (ctx, props) => [ctx.viewportWidth, ctx.viewportHeight], framebufferResolution: ctx => [ctx.framebufferWidth, ctx.framebufferHeight], inverseViewportResolution: (ctx, props) => [1 / ctx.viewportWidth, 1 / ctx.viewportHeight], inverseFramebufferResolution: ctx => [1 / ctx.framebufferWidth, 1 / ctx.framebufferHeight], } }); return function (viewport, callback) { command(viewport, callback); } }33:T5be,function viewportAxes (viewport, xScale, yScale, opts) { opts = opts || {}; viewport.margin = viewport.margin === undefined ? {t: 0, r: 0, b: 0, l: 0} : viewport.margin; opts.xLabelSpacing = opts.xLabelSpacing === undefined ? 80 : opts.xLabelSpacing opts.yLabelSpacing = opts.yLabelSpacing === undefined ? 80 : opts.yLabelSpacing let xAxis = opts.xAxis === undefined ? d3.axisBottom : opts.xAxis let yAxis = opts.yAxis === undefined ? d3.axisLeft : opts.yAxis let xRange = xScale.range(); let yRange = xScale.range(); viewport.width = viewport.width === undefined ? (xRange[1] - xRange[0]) : viewport.width; viewport.height = viewport.height === undefined ? (yRange[1] - yRange[0]) : viewport.height; return function (selection) { let xa = selection.select('g.x.axis'); if (xa.empty()) { xa = selection.append("g").attr("class", "x axis") } xa.attr("transform", "translate(0," + (viewport.height - viewport.margin.b) + ")") .call(xAxis(xScale) .ticks(Math.floor((viewport.width - viewport.margin.l - viewport.margin.r) / opts.xLabelSpacing))) let ya = selection.select('g.y.axis'); if (ya.empty()) { ya = selection.append("g").attr("class", "y axis") } ya.attr('transform', 'translate(' + viewport.margin.l + ', 0)') .call(yAxis(yScale) .ticks(Math.floor((viewport.height - viewport.margin.t - viewport.margin.b) / opts.yLabelSpacing))) return selection; }; }34:T68a,function canWriteToFBOOfType(regl, type) { type = type || "float"; if (!regl.hasExtension(`oes_texture_${type.replace(" ", "_")}`)) return false; let floatFBO, uintFBO, draw, transfer; try { floatFBO = regl.framebuffer({ colorType: type, colorFormat: "rgba", radius: 1 }); uintFBO = regl.framebuffer({ colorType: "uint8", colorFormat: "rgba", radius: 1 }); draw = regl({ vert: ` precision highp float; attribute vec2 aXY; void main () { gl_Position = vec4(aXY, 0, 1); gl_PointSize = 1.0; }`, frag: ` precision highp float; void main () { gl_FragColor = vec4(1, 0, 0, 1); }`, primitive: "points", count: 1, attributes: { aXY: [0, 0] }, depth: { enable: false } }); transfer = regl({ vert: ` precision highp float; attribute vec2 aXY; void main () { gl_Position = vec4(aXY, 0, 1); }`, frag: ` precision highp float; void main () { gl_FragColor = vec4(1, 0, 0, 1); }`, attributes: { aXY: [-4, -4, 4, -4, 0, 4] }, count: 3, primitive: "triangles", depth: { enable: false } }); draw(); var data; uintFBO.use(() => { transfer(); data = regl.read(); }); return data[0] !== 0 && data[1] === 0 && data[2] === 0 && data[3] !== 0; } catch (e) { console.error(e); return false; } finally { if (floatFBO) floatFBO.destroy(); if (uintFBO) uintFBO.destroy(); if (draw) draw.destroy(); if (transfer) transfer.destroy(); } }35:T944,{ let regl = stack.layers.regl; let ctx = stack.layers.canvas; let svg = d3.select(stack.layers.svg); let xScale = d3.scaleLinear() .domain([-3, 3]) .range([viewport.margin.l, viewport.width - viewport.margin.r]) .clamp(true); let yScale = constrainLinearScaleAspectRatio( d3.scaleLinear() .domain([-1.5, 1.5]) .range([viewport.height - viewport.margin.b, viewport.margin.t]) .clamp(true), xScale, 1); let update; let points = [[1, -1], [1, 1], [-1, -1], [-1, 1]]; let pointsBuffer = regl.buffer(points); svg.selectAll('g.axes').remove(); let axes = svg.append('g') .attr('class', 'axes') .call(viewportAxes(viewport, xScale, yScale)) let g = svg.selectAll('g.handles').remove(); g = svg.selectAll('g.handles') .data([points]) .enter().append('g') .attr('class', 'handles'); let handles = g.selectAll('circle') .data(d => d).enter().append('circle') .attr('cursor', 'move') .attr('r', 5) .attr('stroke-width', 30) .attr('stroke', 'transparent') .attr('fill', 'blue') .call(d3.drag() .on("drag", (d) => { d[0] = xScale.invert(d3.event.x); d[1] = yScale.invert(d3.event.y); update(); })); update = function update () { handles .attr('cx', data => xScale(data[0])) .attr('cy', data => yScale(data[1])); pointsBuffer.subdata(points) regl.poll(); regl.clear({color: [1, 1, 1, 1]}) configureViewport(viewport, ({viewport3}) => { configureLinearScales(xScale, yScale, ({view3}) => { drawStrip({points: pointsBuffer, count: points.length}); }) }) let ctxTransform = mat3multiply(mat3create(), mat3ViewportFromLinearScales(mat3create(), xScale, yScale), mat3fromLinearScales(mat3create(), xScale, yScale)); ctx.clearRect(0, 0, stack.width, stack.height); ctx.beginPath(); ctx.lineWidth = 4; ctx.strokeStyle = '#3a3'; ctx.moveTo.apply(ctx, vec2transformMat3([], points[1], ctxTransform)); ctx.lineTo.apply(ctx, vec2transformMat3([], points[2], ctxTransform)); ctx.moveTo.apply(ctx, vec2transformMat3([], points[3], ctxTransform)); ctx.lineTo.apply(ctx, vec2transformMat3([], points[0], ctxTransform)); ctx.stroke(); } update(); yield stack.container }36:T43b,LICENSE = "mit" /* Copyright (c) 2019 by Ricky Reusser Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */37:[] 2e:{"title":"regl-tools","cells":[{"id":0,"value":"md`# regl-tools\n\nThis notebook implements a number of helper methods for simple regl, canvas and SVG plots in Observable. The goal is simple: to the extent reasonably possible, creating plots should contain information about the particular plot, not about setup and rendering.\n\nTo this end, it uses \\`d3\\` scales and makes some opinionated choices about how to represent things, though the result is hopefully general enough that it's more useful than constraining.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"import { createReglCamera, createInteractions } from 'd0ffd921b8188ba9'","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`## reglCanvas\n\nCreate a [regl](https:/github.com/regl-project/regl) canvas using syntax which roughly mirrors that of [@observablehq/stdlib's DOM.context2d method](https://github.com/observablehq/stdlib).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"function reglCanvas (width, height, dpi, reglOptions) {\n dpi = dpi === undefined ? devicePixelRatio : dpi;\n reglOptions = reglOptions || {}\n var canvas = document.createElement(\"canvas\");\n canvas.width = dpi * width;\n canvas.height = dpi * height;\n canvas.style.width = width + \"px\";\n const regl = createREGL(Object.assign({}, reglOptions, {pixelRatio: dpi, canvas}));\n canvas.value = regl;\n canvas.__reglConfig = {dpi, reglOptions}\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1623,"value":"md`## reusableReglCanvas`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1618,"value":"function reusableReglCanvas (existingCanvas, config) {\n var dpi = config.dpi === undefined ? devicePixelRatio : config.dpi\n var reglOptions = config.reglOptions || {}\n var newConfig = {dpi, reglOptions}\n var needsNewContext = !existingCanvas || \n JSON.stringify(newConfig) !== JSON.stringify(existingCanvas.__reglConfig)\n \n if (!needsNewContext) {\n existingCanvas.width = Math.floor(config.width * dpi)\n existingCanvas.height = Math.floor(config.height * dpi)\n existingCanvas.style.width = `${width}px`\n return existingCanvas\n }\n \n if (existingCanvas && existingCanvas.value && existingCanvas.value.destroy) {\n existingCanvas.value.destroy()\n delete existingCanvas.value\n }\n \n return reglCanvas(config.width, config.height, dpi, reglOptions)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1510,"value":"md`## reglCanvasWithOptions\n\nA convenience function to reduce boilerplate by currying arguments. To create a function which strictly accepts \\`width\\`, \\`height\\`, and \\`dpi\\`, e.g.\n\n\\`\\`\\`js\nfn = (width, height, dpi) => reglCanvas(width, height, dpi, { ...reglOptions })\n\\`\\`\\`\n\nyou may instead write\n\n\\`\\`\\`js\nfn = reglCanvasWithOptions({ ...reglOptions })\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"value":"function reglCanvasWithOptions (reglOptions) {\n return function (width, height, dpi) {\n return reglCanvas(width, height, dpi, reglOptions);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"function getOrAttachReglFO (svg, width, height, dpi, reglOptions) {\n let fo = svg.selectAll('.regl-canvas')\n .data([null]).join(enter => enter.append('foreignObject'))\n .attr('class', 'regl-canvas')\n .attr('width', width)\n .attr('height', height)\n //.style('position', 'relative')\n //.style('z-index', -1)\n\n fo.selectAll('canvas')\n .data([null]).join(enter => enter.append('xhtml:canvas'))\n .attr('width', width * dpi)\n .attr('height', height * dpi)\n .style('width', width + 'px')\n .style('height', height + 'px')\n\n const reglCanvas = fo.select('canvas').node()\n const regl = reglCanvas.value = reglCanvas.value || createREGL(Object.assign(reglOptions || {}, {\n canvas: reglCanvas,\n pixelRatio: dpi,\n }))\n regl.data = regl.data || {}\n return reglCanvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`## createLayerStack\n\nCreate a stack of layers (first on bottom). Each item receives width, height, and dpi. \\`layerConstructors\\` is either an array or an object of constructors for each layer. If an array, the returned layers are referenced by index. If an object, stable ordering of keys is assumed and layers may be referenced by name.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"md`## createReglViewportConfiguration\n\nConfigure a regl viewport independent of pixel ratio given a layer stack. Returns a \\`regl\\` command which may be invoked with a \\`viewport\\` and a \\`callback\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1524,"value":"md`## createReglLinearScaleConfiguration\n\nCreate a regl command which adds 2d (${tex`3 \\times 3`}) and and 3d (${tex`4 \\times 4`}) homogeneous transformation matrices to \\`regl\\` context and uniforms. Must be invoked with two \\`d3\\` \\`linearScales\\` and a \\`callback\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"function createReglLinearScaleConfiguration(regl) {\n const matrices = {\n view3: mat3create(),\n inverseView3: mat3create(),\n view: mat4create(),\n inverseView: mat4create()\n };\n const command = regl({\n context: {\n view3: regl.prop('view3'),\n inverseView3: regl.prop('inverseView3'),\n view: regl.prop('view'),\n inverseView: regl.prop('inverseView')\n },\n uniforms: {\n view3: regl.prop('view3'),\n inverseView3: regl.prop('inverseView3'),\n view: regl.prop('view'),\n inverseView: regl.prop('inverseView')\n }\n });\n\n return function(xScale, yScale, clbk) {\n mat3fromLinearScales(matrices.view3, xScale, yScale);\n mat3invert(matrices.inverseView3, matrices.view3);\n mat4fromMat3(matrices.view, matrices.view3);\n mat4fromMat3(matrices.inverseView, matrices.inverseView3);\n command(matrices, clbk);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1527,"value":"md`## createReglMap\n\nCreate a \\`regl\\` command to configure a single triangle covering the whole viewport. Accepts options with an optional \\`transform\\` parameter defining the name of a uniform to use as a 3d homogeneous (${tex`4 \\times 4`}) matrix uniform to be applied in the vertex shader.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"createReglMap = function (regl, opts) {\n opts = opts || {};\n let transform = opts.transform === undefined ? 'inverseView' : opts.transform;\n return regl({\n vert: `\n precision highp float;\n ${transform ? `uniform mat4 ${transform};` : ''}\n attribute vec2 aUV;\n varying vec2 xy;\n void main () {\n xy = ${transform ? `(${transform} * vec4(aUV, 0, 1)).xy` : 'aUV'};\n gl_Position = vec4(aUV, 0, 1);\n }`,\n attributes: {aUV: [-4, -4, 4, -4, 0, 4]},\n depth: {enable: false},\n primitive: 'triangles',\n count: 3,\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1417,"value":"function mat3ViewportFromLinearScales (out, xScale, yScale) {\n let xRange = xScale.range();\n let yRange = yScale.range();\n \n let w = xRange[1] - xRange[0];\n let h = yRange[0] - yRange[1];\n out[0] = 0.5 * w;\n out[1] = 0;\n out[2] = 0;\n\n out[3] = 0;\n out[4] = -0.5 * h;\n out[5] = 0;\n\n out[6] = 0.5 * w + xRange[0];\n out[7] = 0.5 * h + yRange[1];\n out[8] = 1;\n \n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1212,"value":"function mat3fromLinearScales (out, xScale, yScale) {\n let xDomain = xScale.domain()\n let yDomain = yScale.domain()\n \n let xs = 2 / (xDomain[1] - xDomain[0])\n let ys = 2 / (yDomain[1] - yDomain[0])\n \n out[0] = xs\n out[1] = 0\n out[2] = 0\n \n out[3] = 0\n out[4] = ys\n out[5] = 0\n \n out[6] = -1 - xs * xDomain[0]\n out[7] = -1 - ys * yDomain[0]\n out[8] = 1\n \n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1537,"value":"md`## createViewport\n\nCreate a simple representation of a viewport`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"function createViewport (opts, margin) {\n return {\n width: opts.width,\n height: opts.height,\n dpi: opts.dpi,\n margin: Object.assign({t: 0, r: 0, b: 0, l: 0}, margin || {}),\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1540,"value":"md`## viewportAxes\n\nRender basic SVG axes given a viewport and two \\`d3\\` scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1462,"value":"function constrainLinearScaleAspectRatio (newScale, refScale, aspectRatio) {\n let newDomain = newScale.domain();\n let refDomain = refScale.domain();\n let newRange = newScale.range();\n let refRange = refScale.range();\n let newDomainLength = newDomain[1] - newDomain[0];\n let newRangeLength = newRange[1] - newRange[0];\n let refDomainLength = refDomain[1] - refDomain[0];\n let refRangeLength = refRange[1] - refRange[0];\n let refRes = refRangeLength / refDomainLength;\n let newRes = newRangeLength / newDomainLength;\n let currentAspect = Math.abs(newRes / refRes);\n let newDomainCenter = 0.5 * (newDomain[0] + newDomain[1]);\n newScale.domain([\n newDomainCenter - newDomainLength * 0.5 * currentAspect / aspectRatio,\n newDomainCenter + newDomainLength * 0.5 * currentAspect / aspectRatio\n ]);\n return newScale;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1613,"value":"function persistentZoom (xScale, yScale, originalXScale, originalYScale, callback) {\n return d3.zoom().on('zoom', function () {\n let range\n let t = d3.event.transform;\n\n range = xScale.range().map(t.invertX, t);\n xScale.domain(originalXScale.domain())\n xScale.domain(range.map(xScale.invert, xScale));\n\n range = yScale.range().map(t.invertY, t);\n yScale.domain(originalYScale.domain())\n yScale.domain(range.map(yScale.invert, yScale));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1644,"value":"function createTextureLookupTable(w, h, stride) {\n stride = stride || 2;\n var n = w * h * stride;\n\n var out = new Float32Array(n);\n\n for (var i = 0, iStride = 0; iStride < n; i++, iStride += stride) {\n out[iStride] = ((i % w) + 0.5) / w;\n out[iStride + 1] = (((i / w) | 0) + 0.5) / h;\n }\n\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1660,"value":"md`The following function shouldn't exist. Instead, use [EXT_color_buffer_float/half-float](https://developer.mozilla.org/en-US/docs/Web/API/EXT_color_buffer_float).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`## Sample Usage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"stack = createLayerStack(width, height, devicePixelRatio, {\n regl: (w, h, dpi) => reglCanvas(w, h, dpi),\n canvas: DOM.context2d,\n svg: DOM.svg\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1203,"value":"viewport = createViewport(stack, {t: 10, r: 15, b: 22, l: 37})","pinned":true,"hidden":false,"mode":"ojs"},{"id":770,"value":"md`The view below shows a ${html`regl WebGL context`}, a ${html`HTML canvas`}, and a ${html`SVG element`} stacked upon each other and living together in harmony.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1242,"value":"configureLinearScales = createReglLinearScaleConfiguration(regl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"regl = stack.layers.regl","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"height = width * 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"configureViewport = createReglViewportConfiguration(regl);","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"drawStrip = regl({\n vert: `\n precision highp float;\n uniform mat4 view;\n attribute vec2 xy;\n void main () {\n gl_Position = view * vec4(xy, 0, 1);\n }`,\n frag: `\n precision highp float;\n void main () {\n gl_FragColor = vec4(1.0, 0.8, 0.8, 1);\n }`,\n attributes: {\n xy: regl.prop('points')\n },\n primitive: 'triangle strip',\n depth: {enable: false},\n count: regl.prop('count')\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"createREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1502,"value":"import {mat4create, mat4fromMat3} from '@rreusser/gl-mat4'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1499,"value":"import {mat3create, mat3invert, mat3multiply} from '@rreusser/gl-mat3'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1505,"value":"import {vec2transformMat3} from '@rreusser/gl-vec2'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1553,"value":"/*\n// unused\ncontext: {\n viewport3: (ctx, props) => {\n let dpi = ctx.pixelRatio;\n let w = ctx.framebufferWidth / dpi - (props.margin.l + props.margin.r);\n let h = ctx.framebufferHeight / dpi - (props.margin.t + props.margin.b);\n viewport3[0] = 0.5 * w;\n viewport3[1] = 0;\n viewport3[2] = 0;\n\n viewport3[3] = 0;\n viewport3[4] = -0.5 * h;\n viewport3[5] = 0;\n\n viewport3[6] = (0.5 * w + props.margin.l);\n viewport3[7] = (0.5 * h + props.margin.t);\n viewport3[8] = 1;\n\n return viewport3;\n }\n}\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":1650,"value":"import {PINNED} from '691ae3b95f02db79@1157'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1641,"value":"md`## License\n\nThe code in this notebook is MIT Licensed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}