44:["$","title",null,{"children":"Morphing Rectangles | Job van der Zwan | Observable"}] 4c:T1e35,imageData = { const width = streamWidth; const height = streamHeight; const frameGrab = DOM.context2d(streamWidth, streamHeight, 1); const drawCtx = DOM.context2d(streamWidth, streamHeight, 1); drawCtx.canvas.style="width:100%;height:100%;"; // horizontal contrast: sum the squares of RGB between horizontally adjacent pixels const sobel = new Float64Array(width * height); const sobelX = new Float64Array(width * height); const sobelY = new Float64Array(width * height); const width4 = width * 4; const totalSplits = spliterations; const totalRects = 4 ** totalSplits // four points times 4 to the power of totalSplits const rectangles = new Float32Array(4 * totalRects); const newRectangles = new Float32Array(4 * totalRects); // three colors times 4 to the power of totalSplits const colors = new Float32Array(3 * totalRects); const newColors = new Float32Array(3 * totalRects); // initiate rectangles as noise for(let i = 0; i < totalRects; i++){ let x = Math.random() * (width - 1); let y = Math.random() * (height - 1); rectangles[i * 4] = x; rectangles[i * 4 + 1] = y; rectangles[i * 4 + 2] = x+1; rectangles[i * 4 + 3] = y+1; colors[i * 3] = Math.random() * 255; colors[i * 3 + 1] = Math.random() * 255; colors[i * 3 + 2] = Math.random() * 255; } const totalFrames = 64; let frames = totalFrames - 1; // it's faster to multiply than to divide let frameDiv = 1 / totalFrames; while(startStream && stream){ // grab a new frame every 64 frames, interpolate otherwise frames++; if (frames >= totalFrames) { frames = 0; frameGrab.drawImage(stream, 0, 0, width, height); const {data: rgba} = frameGrab.getImageData(0, 0, width, height); for(let y = 0, lineRGBA = 0, lineSobel = 0; y < height - 1; y++) { let x4 = 0; let r0 = rgba[x4 + lineRGBA]; let g0 = rgba[x4 + lineRGBA + 1]; let b0 = rgba[x4 + lineRGBA + 2]; for (let x = 0, pdr = 0, pdg = 0, pdb = 0; x < width - 1; x++) { let i = x4 + lineRGBA + 4; let r1 = rgba[i]; let g1 = rgba[i + 1]; let b1 = rgba[i + 2]; let dr = r1 - r0; let dg = g1 - g0; let db = b1 - b0; dr *= dr; dg *= dg; db *= db; sobelX[x + lineSobel] = (dr + pdr + dg + pdg + db + pdb); pdr = dr; pdg = dg; pdb = db; r0 = r1; g0 = g1; b0 = b1; x4 += 4; } lineRGBA += width4; lineSobel += width; } for (let x = 0, x4 = 0; x < width - 1; x++) { let r0 = rgba[x4]; let g0 = rgba[x4 + 1]; let b0 = rgba[x4 + 2]; for(let y = 0, pdr = 0, pdg = 0, pdb = 0, lineRGBA = width4, lineSobel = 0; y < height - 1; y++) { let i = x4 + lineRGBA; let r1 = rgba[i + 3]; let g1 = rgba[i + 4]; let b1 = rgba[i + 5]; let dr = r1 - r0; let dg = g1 - g0; let db = b1 - b0; dr *= dr; dg *= dg; db *= db; sobelY[x + lineSobel] = (dr + pdr + dg + pdg + db + pdb); pdr = dr; pdg = dg; pdb = db; r0 = r1; g0 = g1; b0 = b1; lineRGBA += width4; lineSobel += width; } x4 += 4; } sumXSobel.update(sobelX); sumYSobel.update(sobelY); sumRGBA.update(rgba); // split rectangles repeatedly starting from a rectangle as big as the entire image newRectangles[0] = 0; // x0 newRectangles[1] = 0; // y0 newRectangles[2] = width-1; // x1 newRectangles[3] = height-1; // y1 // Yes, this is a bit nasty. Basically, every iteration we quadruple // the number of rectangles and throw away the old coordinates. // So to avoid pointless GC pressure we save the rectangle // coordinates in one big array that is initialized at the final nr // of coordinates. Then we split from back-to-front to avoid overwriting // the old coordinates before we can throw them away. for(let n = 0; n < totalSplits; n++){ for(let i = (4**n); i > 0; i--) { let j = i * 4; let k = i * 16; const y1 = newRectangles[--j]; const x1 = newRectangles[--j]; const y0 = newRectangles[--j]; const x0 = newRectangles[--j]; let cx = sumXSobel.cx(x0, y0, x1, y1) + 1; if (cx < x0 || cx > x1) cx = 0.5 * (x0 + x1); let cy1 = sumYSobel.cy(x0, y0, cx, y1) + 1; let cy2 = sumYSobel.cy(cx, y0, x1, y1) + 1; if (cy1 < y0 || cy1 > y1) cy1 = 0.5 * (y0 + y1); if (cy2 < y0 || cy2 > y1) cy2 = 0.5 * (y0 + y1); newRectangles[--k] = y1; newRectangles[--k] = x1; newRectangles[--k] = cy2; newRectangles[--k] = cx; newRectangles[--k] = y1; newRectangles[--k] = cx; newRectangles[--k] = cy1; newRectangles[--k] = x0; newRectangles[--k] = cy2; newRectangles[--k] = x1; newRectangles[--k] = y0; newRectangles[--k] = cx; newRectangles[--k] = cy1; newRectangles[--k] = cx; newRectangles[--k] = y0; newRectangles[--k] = x0; } } for(let i = 0; i < totalRects; i++) { const rIdx = i * 4; const cIdx = i * 3; const x0 = newRectangles[rIdx]; const y0 = newRectangles[rIdx+1]; const x1 = newRectangles[rIdx+2]; const y1 = newRectangles[rIdx+3]; const [r, g, b] = sumRGBA.color(x0, y0, x1, y1); newColors[cIdx] = r; newColors[cIdx+1] = g; newColors[cIdx+2] = b; } } const newWeight = 0.0625; const oldWeight = 1 - newWeight; const dx = streamWidth / (2 ** totalSplits); const dy = streamHeight / (2 ** totalSplits); for(let i = 0; i < totalRects; i++) { const rIdx = i * 4; const cIdx = i * 3; const pframes = totalFrames - frames; const x0 = rectangles[rIdx] * oldWeight + newRectangles[rIdx] * newWeight; const y0 = rectangles[rIdx + 1] * oldWeight + newRectangles[rIdx + 1] * newWeight; const x1 = rectangles[rIdx + 2] * oldWeight + newRectangles[rIdx + 2] * newWeight; const y1 = rectangles[rIdx + 3] * oldWeight + newRectangles[rIdx + 3] * newWeight; rectangles[rIdx] = x0; rectangles[rIdx + 1] = y0; rectangles[rIdx + 2] = x1; rectangles[rIdx + 3] = y1; const r = colors[cIdx] * oldWeight + newColors[cIdx] * newWeight; const g = colors[cIdx + 1] * oldWeight + newColors[cIdx + 1] * newWeight; const b = colors[cIdx + 2] * oldWeight + newColors[cIdx + 2] * newWeight; colors[cIdx] = r; colors[cIdx + 1] = g; colors[cIdx + 2] = b; drawCtx.fillStyle = `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)}, 1)`; if (forceToGrid) { // Because of the way in which we split the rectangles, we end up with an arrangement in Z-order // This wasn't planned but it is somewhat convenient I guess (if you know how Z-order works) const x = (i&1) + ((i>>>1)&2) + ((i>>>2)&4) + ((i>>>3)&8) + ((i>>>4)&16) + ((i>>>5)&32) + ((i>>>6)&64) + ((i>>>7)&128) + ((i>>>8)&256) + ((i>>>9)&512) + ((i>>>10)&1024); const y = ((i>>>1)&1) + ((i>>>2)&2) + ((i>>>3)&4) + ((i>>>4)&8) + ((i>>>5)&16) + ((i>>>6)&32) + ((i>>>7)&64) + ((i>>>8)&128) + ((i>>>9)&256) + ((i>>>10)&512) + ((i>>>11)&1024); drawCtx.fillRect(x * dx, y * dy, dx, dy); } else { drawCtx.fillRect(x0, y0, x1-x0, y1 - y0); } } yield drawCtx.canvas; } yield FileAttachment("Screenshot_20191101_174845.png").image(); }4d:Tab8,/** * Generic Summed Area Table */ class SumTable { constructor(data, width, height) { this.width = width; this.height = height; const wp1 = width + 1; this.wp1 = wp1; // because we don't know how big our maximum value will be, we play it // safe and use doubles here. These can store integers up to 54 bits in // size. If you know your summed values are going to be less than 32 bits // or 16 bits, you can try replacing this with a smaller array and see // if it is faster. const _data = new Float64Array(wp1*(height+1)); this.data = _data; for(let y = 0, line = wp1 + 1, pline = 1, lineData = 0; y < height; y++) { let rowsum = 0; for (let x = 0; x < width; x++) { rowsum += data[lineData]; _data[line] = rowsum + _data[pline]; line++; pline++; lineData++; } // advance one extra index to account for padded column line++; pline++; } } update(data) { const {width, height, wp1} = this; const _data = this.data; for(let y = 0, line = wp1 + 1, pline = 1, lineData = 0; y < height; y++) { let rowsum = 0; for (let x = 0; x < width; x++) { rowsum += data[lineData]; _data[line] = rowsum + _data[pline]; line++; pline++; lineData++; } line++; pline++; } } areaSum(x0, y0, x1, y1) { // use a fast path for integer values if (x0 === (x0 | 0) && y0 === (y0 | 0) && x1 === (x1 | 0) && y1 === (y1 | 0)) { return this.areaSumInteger(x0 | 0, y0 | 0, x1 | 0, y1 | 0); } const v00 = this.lerpVal(x0, y0); const v01 = this.lerpVal(x1, y0); const v10 = this.lerpVal(x0, y1); const v11 = this.lerpVal(x1, y1); return v00 - v01 - v10 + v11; } areaSumInteger(x0, y0, x1, y1) { const {data, wp1} = this; const l0 = y0 * wp1 | 0; const l1 = y1 * wp1 | 0; const v00 = data[x0 + l0]; const v01 = data[x0 + l1]; const v10 = data[x1 + l0]; const v11 = data[x1 + l1]; return v00 - v01 - v10 + v11; } // interpolates non-integer values lerpVal(x, y) { const x0 = x | 0; const xfrac = x - x0; const y0 = y | 0; const yfrac = y - y0; const xyTop = x0 + y0 * this.wp1; const xyBottom = xyTop + this.wp1; const {data} = this; // interpolate between x and x+1 for top and bottom pixels // reuse 00 as top interpolated, 01 as bottom interpolated const vTop = data[xyTop] * (1 - xfrac) + data[xyTop + 1] * xfrac; const vBottom = data[xyBottom] * (1 - xfrac) + data[xyBottom + 1] * xfrac; // interpolate between top interpolated and bottom interpolated return vTop * (1 - yfrac) + vBottom * yfrac } }4e:T1784,/** * Generic weighted position Summed Area Table */ class SumXYTable { constructor(data, width, height) { this.sum = new SumTable(data, width, height); this.width = width; this.height = height; const wp1 = width + 1; this.wp1 = wp1; const xData = new Float64Array(wp1*(height+1)); const yData = new Float64Array(wp1*(height+1)); this.xData = xData; this.yData = yData; for(let y = 0, line = wp1 + 1, pline = 1, lineData = 0; y < height; y++) { let rowSumX= 0; let rowSumY= 0; for (let x = 0; x < width; x++) { const val = data[lineData]; rowSumX += (x+1) * val; rowSumY += (y+1) * val; xData[line] = rowSumX + xData[pline]; yData[line] = rowSumY + yData[pline]; line++; pline++; lineData++; } // advance one extra point to account for padded column line++; pline++; } } update(data) { this.sum.update(data); const {width, height, wp1, xData, yData} = this; for(let y = 0, line = wp1 + 1, pline = 1, lineData = 0; y < height; y++) { let rowSumX= 0; let rowSumY= 0; for (let x = 0; x < width; x++) { const val = data[lineData]; rowSumX += (x+1) * val; rowSumY += (y+1) * val; xData[line] = rowSumX + xData[pline]; yData[line] = rowSumY + yData[pline]; line++; pline++; lineData++; } // advance one extra point to account for padded column line++; pline++; } } mass(x0, y0, x1, y1) { return this.sum.areaSum(x0, y0, x1, y1); } cm(x0, y0, x1, y1) { const sum = this.mass(x0, y0, x1, y1); if (sum) { const [xSum, ySum] = this.areaSum(x0, y0, x1, y1); return [xSum / sum - 1, ySum / sum - 1]; } // If no mass, just put center of mass in the midpoint return [0.5*(x1-x0), 0.5*(y1-y0)]; } cx(x0, y0, x1, y1) { const sum = this.mass(x0, y0, x1, y1); if (sum) { const xSum = this.areaSumX(x0, y0, x1, y1); return xSum / sum - 1 ; } return (x1-x0)*0.5; } cy(x0, y0, x1, y1) { const sum = this.mass(x0, y0, x1, y1); if (sum) { const ySum = this.areaSumY(x0, y0, x1, y1); return ySum / sum - 1; } return (y1-y0)*0.5; } areaSum(x0, y0, x1, y1) { // use a fast path for integer values if (x0 === (x0 | 0) && y0 === (y0 | 0) && x1 === (x1 | 0) && y1 === (y1 | 0)) { return this.areaSumInteger(x0 | 0, y0 | 0, x1 | 0, y1 | 0); } const v00 = this.lerpVal(x0, y0); const v01 = this.lerpVal(x1, y0); const v10 = this.lerpVal(x0, y1); const v11 = this.lerpVal(x1, y1); // reuse v00 to reduce GC pressure a tiny bit v00[0] = v00[0] - v01[0] - v10[0] + v11[0]; v00[1] = v00[1] - v01[1] - v10[1] + v11[1]; return v00; } areaSumX(x0, y0, x1, y1) { // use a fast path for integer values if (x0 === (x0 | 0) && y0 === (y0 | 0) && x1 === (x1 | 0) && y1 === (y1 | 0)) { return this.areaSumIntegerX(x0 | 0, y0 | 0, x1 | 0, y1 | 0); } const v00 = this.lerpValX(x0, y0); const v01 = this.lerpValX(x1, y0); const v10 = this.lerpValX(x0, y1); const v11 = this.lerpValX(x1, y1); return v00 - v01 - v10 + v11; } areaSumY(x0, y0, x1, y1) { // use a fast path for integer values if (x0 === (x0 | 0) && y0 === (y0 | 0) && x1 === (x1 | 0) && y1 === (y1 | 0)) { return this.areaSumIntegerY(x0 | 0, y0 | 0, x1 | 0, y1 | 0); } const v00 = this.lerpValY(x0, y0); const v01 = this.lerpValY(x1, y0); const v10 = this.lerpValY(x0, y1); const v11 = this.lerpValY(x1, y1); return v00 - v01 - v10 + v11; } areaSumInteger(x0, y0, x1, y1) { return [ this.areaSumIntegerX(x0, y0, x1, y1) , this.areaSumIntegerY(x0, y0, x1, y1) , ]; } areaSumIntegerX(x0, y0, x1, y1) { const {xData, wp1} = this; const l0 = y0 * wp1 | 0; const l1 = y1 * wp1 | 0; const xy00 = x0 + l0; const xy01 = x0 + l1; const xy10 = x1 + l0; const xy11 = x1 + l1 const vx00 = xData[xy00]; const vx01 = xData[xy01]; const vx10 = xData[xy10]; const vx11 = xData[xy11]; return vx00 - vx01 - vx10 + vx11; } areaSumIntegerY(x0, y0, x1, y1) { const {yData, wp1} = this; const l0 = y0 * wp1 | 0; const l1 = y1 * wp1 | 0; const xy00 = x0 + l0; const xy01 = x0 + l1; const xy10 = x1 + l0; const xy11 = x1 + l1 const vy00 = yData[xy00]; const vy01 = yData[xy01]; const vy10 = yData[xy10]; const vy11 = yData[xy11]; return vy00 - vy01 - vy10 + vy11; } // interpolates non-integer values lerpVal(x, y) { return [ this.lerpValX(x, y), this.lerpValY(x, y) ]; } lerpValX(x, y) { const x0 = x | 0; const xfrac = x - x0; const y0 = y | 0; const yfrac = y - y0; const xyTop = x0 + y0 * this.wp1; const xyBottom = xyTop + this.wp1; const {xData} = this; // interpolate between x and x+1 for top and bottom pixels // reuse 00 as top interpolated, 01 as bottom interpolated const vxTop = xData[xyTop] * (1 - xfrac) + xData[xyTop + 1] * xfrac; const vxBottom = xData[xyBottom] * (1 - xfrac) + xData[xyBottom + 1] * xfrac; // interpolate between top interpolated and bottom interpolated return vxTop * (1 - yfrac) + vxBottom * yfrac; } lerpValY(x, y) { const x0 = x | 0; const xfrac = x - x0; const y0 = y | 0; const yfrac = y - y0; const xyTop = x0 + y0 * this.wp1; const xyBottom = xyTop + this.wp1; const {yData} = this; // interpolate between x and x+1 for top and bottom pixels // reuse 00 as top interpolated, 01 as bottom interpolated const vyTop = yData[xyTop] * (1 - xfrac) + yData[xyTop + 1] * xfrac; const vyBottom = yData[xyBottom] * (1 - xfrac) + yData[xyBottom + 1] * xfrac; // interpolate between top interpolated and bottom interpolated return vyTop * (1 - yfrac) + vyBottom * yfrac; } }4f:T11c9,/** * Summed Area Table optimized for handling rgba pixel Uint8Arrays */ class SumTableRGBA { constructor(rgba, width, height) { this.width = width; this.height = height; const wp1 = (width + 1) * 4; this.wp1 = wp1; const _rgba = new Float64Array(wp1 * (height + 1)); this.rgba = _rgba; this.update(rgba); } update(rgba) { const { width, height, wp1 } = this; const _rgba = this.rgba; for (let y = 0, line = wp1 + 4, pline = 4, lineRGBA = 0; y < height; y++) { let rowsumR = 0; let rowsumG = 0; let rowsumB = 0; let rowsumA = 0; for (let x = 0; x < width; x++) { rowsumR += rgba[lineRGBA]; rowsumG += rgba[lineRGBA + 1]; rowsumB += rgba[lineRGBA + 2]; rowsumA += rgba[lineRGBA + 3]; _rgba[line] = rowsumR + _rgba[pline]; _rgba[line + 1] = rowsumG + _rgba[pline + 1]; _rgba[line + 2] = rowsumB + _rgba[pline + 2]; _rgba[line + 3] = rowsumA + _rgba[pline + 3]; line = (line + 4) | 0; pline = (pline + 4) | 0; lineRGBA = (lineRGBA + 4) | 0; } // advance one extra index to account for padded column line = (line + 4) | 0; pline = (pline + 4) | 0; } } areaSum(x0, y0, x1, y1) { // use a fast path for integer values if ( x0 === (x0 | 0) && y0 === (y0 | 0) && x1 === (x1 | 0) && y1 === (y1 | 0) ) { return this.areaSumInteger(x0 | 0, y0 | 0, x1 | 0, y1 | 0); } const [r00, g00, b00, a00] = this.lerpVal(x0, y0); const [r01, g01, b01, a01] = this.lerpVal(x1, y0); const [r10, g10, b10, a10] = this.lerpVal(x0, y1); const [r11, g11, b11, a11] = this.lerpVal(x1, y1); return [ r00 - r01 - r10 + r11, g00 - g01 - g10 + g11, b00 - b01 - b10 + b11, a00 - a01 - a10 + a11 ]; } areaSumInteger(x0, y0, x1, y1) { const { rgba, wp1 } = this; const l0 = (y0 * wp1) | 0; const l1 = (y1 * wp1) | 0; const xy00 = ((x0 << 2) + l0) | 0; const xy01 = ((x0 << 2) + l1) | 0; const xy10 = ((x1 << 2) + l0) | 0; const xy11 = ((x1 << 2) + l1) | 0; const r00 = rgba[xy00]; const g00 = rgba[xy00 + 1]; const b00 = rgba[xy00 + 2]; const a00 = rgba[xy00 + 3]; const r01 = rgba[xy01]; const g01 = rgba[xy01 + 1]; const b01 = rgba[xy01 + 2]; const a01 = rgba[xy01 + 3]; const r10 = rgba[xy10]; const g10 = rgba[xy10 + 1]; const b10 = rgba[xy10 + 2]; const a10 = rgba[xy10 + 3]; const r11 = rgba[xy11]; const g11 = rgba[xy11 + 1]; const b11 = rgba[xy11 + 2]; const a11 = rgba[xy11 + 3]; return [ r00 - r01 - r10 + r11, g00 - g01 - g10 + g11, b00 - b01 - b10 + b11, a00 - a01 - a10 + a11 ]; } // interpolates non-integer values lerpVal(x, y) { const x0 = x | 0; const xfrac = x - x0; const y0 = y | 0; const yfrac = y - y0; // get all corner-points in cache-friendly order const xyTop = x0 * 4 + y0 * this.wp1; const xyBottom = xyTop + this.wp1; const { rgba } = this; let r00 = rgba[xyTop]; let g00 = rgba[xyTop + 1]; let b00 = rgba[xyTop + 2]; let a00 = rgba[xyTop + 3]; let r01 = rgba[xyTop + 4]; let g01 = rgba[xyTop + 5]; let b01 = rgba[xyTop + 6]; let a01 = rgba[xyTop + 7]; const r10 = rgba[xyBottom]; const g10 = rgba[xyBottom + 1]; const b10 = rgba[xyBottom + 2]; const a10 = rgba[xyBottom + 3]; const r11 = rgba[xyBottom + 4]; const g11 = rgba[xyBottom + 5]; const b11 = rgba[xyBottom + 6]; const a11 = rgba[xyBottom + 7]; // interpolate between x and x+1 for top and bottom pixels // reuse 00 as top interpolated, 01 as bottom interpolated r00 = r00 * (1 - xfrac) + r01 * xfrac; g00 = g00 * (1 - xfrac) + g01 * xfrac; b00 = b00 * (1 - xfrac) + b01 * xfrac; a00 = a00 * (1 - xfrac) + a01 * xfrac; r01 = r10 * (1 - xfrac) + r11 * xfrac; g01 = g10 * (1 - xfrac) + g11 * xfrac; b01 = b10 * (1 - xfrac) + b11 * xfrac; a01 = a10 * (1 - xfrac) + a11 * xfrac; // interpolate between top interpolated and bottom interpolated return [ r00 * (1 - yfrac) + r01 * yfrac, g00 * (1 - yfrac) + g01 * yfrac, b00 * (1 - yfrac) + b01 * yfrac, a00 * (1 - yfrac) + a01 * yfrac ]; } /** * Returns the averaged color value over an area */ color(x0, y0, x1, y1) { const area = (x1 - x0) * (y1 - y0); return this.areaSum(x0, y0, x1, y1).map((v) => (0.5 + v / area) | 0); } }50:[{"id":"21ba57de64596ce920191e6016845f05967774a1afa17ed5c270803add49c84085835e0848443aa8297e969466c3deace07d49744b710f71735b36209e03eb40","href":"https://static.observableusercontent.com/files/21ba57de64596ce920191e6016845f05967774a1afa17ed5c270803add49c84085835e0848443aa8297e969466c3deace07d49744b710f71735b36209e03eb40","name":"Screenshot_20191101_174845.png","type":"image/png","lastModified":1572626950953.794,"size":73643}] 48:{"id":"e59b127cc554facf","slug":"morphing-rectangles","title":"Morphing Rectangles","thumbnail":"bf637aac7256528a7a41f8a6f15a82b2c5f2353774ce2f6782d259369ce04cb0","access_level":"public","create_time":"$D2018-10-19T04:15:24.809Z","update_time":"$D2021-05-21T11:12:26.607Z","view_time":null,"first_public_time":"$D2019-11-01T17:23:55.290Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024","bio":"Tinkering with code and algorithms for fun","followed_by_you":false,"follows_you":false},"version":638,"publish_version":638,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"bio":"Tinkering with code and algorithms for fun","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[{"id":"7832f830b6d826b7","reply_to_id":null,"content":"typo: \"initizalized\"","create_time":"$D2021-05-20T22:35:49.779Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"8811a2dcedcf3663","reply_to_id":null,"content":"is there a reason why you're duplicating the .update() code in the constructor?","create_time":"$D2021-05-20T23:01:27.973Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"16cb15f70caf5d43","reply_to_id":"7832f830b6d826b7","content":"Thanks!","create_time":"$D2021-05-21T11:11:22.314Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"53fd5c3b6870c03c","reply_to_id":"8811a2dcedcf3663","content":"If there is I've forgotten it, fixed","create_time":"$D2021-05-21T11:13:09.164Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Morphing Rectangles","cells":[{"id":144,"value":"md`\n# Morphing Rectangles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"viewof checkBoxes = checkbox([\"Start live webcam demo\", \"Force to grid of equal rectangles\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"// I regret nothing\nviewof spliterations = slider({\n min: 1, \n max: 8, \n step: 1, \n value: 6, \n title: \"Split iterations\", \n description: \"Divide each rectangle on the screen along the center of mass of its contrast for iterations times \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"stream = {\n if (startStream) {\n const constraints = {\n video: {\n width: streamWidth,\n height: streamHeight,\n }\n };\n const video = document.createElement('video');\n video.setAttribute('autoplay', true);\n video.setAttribute('class', 'stream');\n\n await navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {\n /* use the stream */\n video.srcObject = stream;\n }).catch(function(err) {\n /* handle the error */\n console.error('Couldn’t get media', err);\n });\n video.style=\"width:100%;height:100%;\";\n\n return video;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"startStream = checkBoxes.indexOf(\"Start live webcam demo\") !== -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"forceToGrid = checkBoxes.indexOf(\"Force to grid of equal rectangles\") !== -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"streamWidth = 1280","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"streamHeight = 720","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"sumSobel = new SumXYTable(Uint8Array.from({length: streamWidth * streamHeight}), streamWidth, streamHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"sumXSobel = new SumXYTable(Uint8Array.from({length: streamWidth * streamHeight}), streamWidth, streamHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"sumYSobel = new SumXYTable(Uint8Array.from({length: streamWidth * streamHeight}), streamWidth, streamHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"sumRGBA = new SumTableRGBA(Uint8Array.from({length: streamWidth * streamHeight * 4}), streamWidth, streamHeight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"import {slider, checkbox} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`

\n\n## Appendix: Summed Area Tables\n\nSummed area tables are a simple data structure that makes summing large parts of a table really fast, at the small initialization cost of doing one pass over the entire table to sum it. To put it in computer science terms: naively summing would be ${tex`O(width \\times height)`}. Once initialized, summed area table reduces this to ${tex`O(1)`}.\n\nSee [Wikipedia entry](https://en.wikipedia.org/wiki/Summed-area_table) for more details.\n\nExample image:\n\n![](https://upload.wikimedia.org/wikipedia/commons/b/bd/Integral_image_application_example.svg)\n**Description:** _Using a summed-area table (**2.**) of an order-6 magic square (**1.**) to sum of a subrectangle of its values; each coloured spot highlights the sum inside the rectangle of that colour._\n\n*\"Integral image application example\"*, by [Cmglee](https://commons.wikimedia.org/wiki/User:Cmglee), Creative Commons Attribution-Share Alike 4.0 International\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"testRGBA = {\n const w = 100;\n const h = 100\n const rgba = new Uint8Array(w*h*4);\n rgba.fill(128);\n const st = new SumTableRGBA(rgba, w, h);\n const areaSum = st.areaSum(10, 10, 90, 90);\n const color = st.color(10, 10, 90, 90);\n const colorLerp = st.color(5.25, 5.5, 70.75, 10.5);\n const data = new Uint8Array(w*h);\n data.fill(1);\n const sxy = new SumXYTable(data, w, h);\n const xycm = sxy.cm(0, 0, w, h);\n const xcm = sxy.cx(0, 0, w, h);\n const ycm = sxy.cy(0, 0, w, h);\n const xymass = sxy.mass(0, 0, w, h);\n return {sxy, xycm, xcm, ycm, xymass};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null