31:T5e0,Introduction = md` ## Introduction Stacklur is a fast blur algorithm by [Mario Klingeman](http://quasimondo.com/) \`AKA\` Quasimondo. It is visually close enough to Gaussian blurring in most circumstances, but much faster. See also these two pages about the algorithm by Klingeman himself: - [*Stack Blur: Fast But Goodlooking*](http://incubator.quasimondo.com/processing/fast_blur_deluxe.php) - [*Research: StackBlur*](http://underdestruction.com/2004/02/25/stackblur-2004/) This notebook adapted the code from [his JavaScript demo](http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html). I slightly modified the API to make it easier to use with Observables. I fixed a sneaky bug¹, updated the code to modern JS, including a change to use a stack based on a \`Uint8Array\` for better performance (the difference is noticable on mobile). Also changed a few variable names to make the code match the names used Klingemann's illustration of the algorithm (previously, the queue was called the stack, and the stack was named sum - this was quite confusing to me). Other than that the core algorithm is unchanged, so [the original doc comment is included as a licence](#Licence) below, without modifications. ¹ The algorithm broke if the radius was greater than 179. Turned out to be due to the sign bit being set and shifted to the right with \`>>\`. Changing that to \`>>>\` and fixing the multiplicaton table made the algorithm work all the way to 255 pixels, as originally intended :) `32:T14b8,HowDoesItWork = md`## How does the algorithm work? Below is an illustration taken Mario Klingemann's own [*Research: StackBlur*](http://underdestruction.com/2004/02/25/stackblur-2004/) page (with permission). It explains the idea better than any textual description alone could: *(for the compsci people: these are not queues or stacks that you might be used to in the data structure sense)* ![](https://blindedcyclops.neocities.org/StackBlur01.png) _illustration by Mario Klingemann_ Let's start with a simpler idea first. Suppose you want to blur an image horizontally by ${tex`w`} pixels. That means that every pixel ${tex`p_{x,y}`} should become the average of all horizontal pixels within a "radius" ${tex`r = \frac{w}{2}`} around it. To use a crude scan from a very crude sketch I made: ![](https://blindedcyclops.neocities.org/row%20blur1.png) (Note: you can see that if we want our blur to be symmetrical, ${tex`w`} must be odd or we have to add half-pixels at the end. We'll stick to using only odd ${tex`w`} here) So to get our blurred pixel, first we sum from ${tex`r`} pixels to the left to ${tex`r`} pixels to the right, then we divide by ${tex`w`}:

${tex`s_{x,y} = \sum_{i=-r}^{r}p_{x+i, y}`}

${tex`blur_{x,y} = \frac{s_n}{w}`}

The simple, naive way to do this would be to do the summing from scratch for each pixel. That would mean that we would have to look up ${tex`w`} pixels for each pixel. In other words: if we have ${tex`n`} pixels (typically ${tex`n = width \times height`}), then the amount of work the computer has to do scales with ${tex`n \times w`}. Computer scientists depict scaling with so-called ["Big O" notation](https://en.wikipedia.org/wiki/Big_O_notation), in this case: ${tex`O(nw)`}. Because these ${tex`n`} and ${tex`w`} are multiplied with each other, this can get really slow really quickly when both values go up at the same time. And it gets worse! We usually don't want to blur lines, but 2D shapes. For example, say we want to do a simple square box blur. Then this number scales with ${tex`O(nw^2)`}. For ${tex`w = 100`}, doing so naively results in 10,000 lookups per pixel! Luckily, it turns out there are a few smart optimisations we can make here: first, instead of doing 2D blurring in one go, do it in two passes: one horizontal, one vertical. This works because the second time we blur, each pixel already has the average of all pixels in the other direction. It adds a *tiny* amount of extra rounding errors, but this rarely matters in practice. That takes it back to ${tex`O(nw)`} (it's actually ${tex`O(2nw)`}, because we do two passes, but computer scientists typically remove constant numbers from these formulas, since the idea is to focus on how the formula scales). We can do even better! Think of two adjacent pixels, and the pixels that have to be looked up to create a horizontal sum. The pixels added for these two sums would be almost identical: the only difference would be one pixel on the left, and one on the right. In other words: once we know the sum for one pixel, we can find the sum of the pixel to its right by subtracting the leftmost pixel, and adding the new rightmost pixel: ![](https://blindedcyclops.neocities.org/row%20blur.png)

${tex`s_n = \sum_{i=-r}^{r}p_{x+i, y}`}

${tex`s_{n+1} = \sum_{i=-r+1}^{r+1}p_{x+i, y} = s_n - p_{(x-r, y)} + p_{(x+r+1, y)}`}

The best part is that we only need one addition and one subtraction no matter how many pixels we are summing over! So it almost doesn't matter what the size of your blur is for performance: once the queue is initizalized on the leftmost pixel, we can just scan right and do a single addition and single subtraction for each pixel. In our example of summing one hundred pixels on a line, this saves 98 pixel lookups per pixel. For the 2D box blur case, instead of doing 10,000 lookups per pixel, we only need two passes of two lookups per time! Well, there is also the initial set-up of the first pixel, which we have to do once per column and row. So in the end we reduced our algorithm to an ${tex`O(n + kw)`} operation, with ${tex`k = width + height`}. Usually ${tex`width + height`} is much smaller than ${tex`width \times height`}. On top of that, with a bit of smart bookkeeping we can blur in-place, removing a lot of memory overhead - but for that I refer to the code. The stack blur algorithm is taking this summing trick and applying it to itself one more time: we create a second sum, but this time it is a moving sum of _pixel sums_. The result is that pixels closer to the central pixel are added more often than those further away, and in the end we get a pyramid-shaped weighing of pixels. This is the "stack" in the illustration above. This is a bit more work: instead of one addition/subtraction there are two, but it still *scales* the same way, so it is still ${tex`O(n + kw)`}. By the way, since blurring means we apply this trick twice (first we scan across the rows, and then across columns), we essentially "square" the pyramid shape with itself. This gives us a kernel that looks a bit pointy (see below). When plotted this way it might make you wonder if it doesn't create noticable artefacts, but in practice it is a good enough approximation of Gaussian blurring in many situations.`33:T673,Licence = md`--- ## Licence \`\`\` StackBlur - a fast almost Gaussian Blur For Canvas Version: 0.5 Author: Mario Klingemann Contact: mario@quasimondo.com Website: http://www.quasimondo.com/StackBlurForCanvas Twitter: @quasimondo In case you find this class useful - especially in commercial projects - I am not totally unhappy for a small donation to my PayPal account mario@quasimondo.de Or support me on flattr: https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript Copyright (c) 2010 Mario Klingemann 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. \`\`\` `34:T3aa0,// Included as a point of reference stackblurOriginal = { /* StackBlur - a fast almost Gaussian Blur For Canvas Version: 0.5 Author: Mario Klingemann Contact: mario@quasimondo.com Website: http://www.quasimondo.com/StackBlurForCanvas Twitter: @quasimondo In case you find this class useful - especially in commercial projects - I am not totally unhappy for a small donation to my PayPal account mario@quasimondo.de Or support me on flattr: https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript Copyright (c) 2010 Mario Klingemann 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. */ // Minor modification by me: using typed arrays for faster lookup - Job const mul_table = Uint16Array.from([ 512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259]); const shg_table = Uint8Array.from([ 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24]); function stackBlurImage(img, context, radius, blurAlphaChannel) { if (isNaN(radius) || radius < 1) return; const w = context.canvas.width; const h = context.canvas.height; context.clearRect(0, 0, w, h); context.drawImage(img, 0, 0, w, h); const imageData = context.getImageData(0, 0, w, h); if (blurAlphaChannel) { stackBlurCanvasRGBA(context, imageData, 0, 0, w, h, radius); } else { stackBlurCanvasRGB(context, imageData, 0, 0, w, h, radius); } } function stackBlurCanvasRGBA(context, imageData, top_x, top_y, width, height, radius) { var pixels = imageData.data; var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, r_out_sum, g_out_sum, b_out_sum, a_out_sum, r_in_sum, g_in_sum, b_in_sum, a_in_sum, pr, pg, pb, pa, rbs; var div = radius + radius + 1; var w4 = width << 2; var widthMinus1 = width - 1; var heightMinus1 = height - 1; var radiusPlus1 = radius + 1; var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; var stackStart = new BlurStack(); var stack = stackStart; for ( i = 1; i < div; i++ ) { stack = stack.next = new BlurStack(); if ( i == radiusPlus1 ) var stackEnd = stack; } stack.next = stackStart; var stackIn = null; var stackOut = null; yw = yi = 0; var mul_sum = mul_table[radius]; var shg_sum = shg_table[radius]; for ( y = 0; y < height; y++ ) { r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0; r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] ); r_sum += sumFactor * pr; g_sum += sumFactor * pg; b_sum += sumFactor * pb; a_sum += sumFactor * pa; stack = stackStart; for( i = 0; i < radiusPlus1; i++ ) { stack.r = pr; stack.g = pg; stack.b = pb; stack.a = pa; stack = stack.next; } for( i = 1; i < radiusPlus1; i++ ) { p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs; r_in_sum += pr; g_in_sum += pg; b_in_sum += pb; a_in_sum += pa; stack = stack.next; } stackIn = stackStart; stackOut = stackEnd; for ( x = 0; x < width; x++ ) { pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum; if ( pa != 0 ) { pa = 255 / pa; pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa; pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa; pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa; } else { pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0; } r_sum -= r_out_sum; g_sum -= g_out_sum; b_sum -= b_out_sum; a_sum -= a_out_sum; r_out_sum -= stackIn.r; g_out_sum -= stackIn.g; b_out_sum -= stackIn.b; a_out_sum -= stackIn.a; p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; r_in_sum += ( stackIn.r = pixels[p]); g_in_sum += ( stackIn.g = pixels[p+1]); b_in_sum += ( stackIn.b = pixels[p+2]); a_in_sum += ( stackIn.a = pixels[p+3]); r_sum += r_in_sum; g_sum += g_in_sum; b_sum += b_in_sum; a_sum += a_in_sum; stackIn = stackIn.next; r_out_sum += ( pr = stackOut.r ); g_out_sum += ( pg = stackOut.g ); b_out_sum += ( pb = stackOut.b ); a_out_sum += ( pa = stackOut.a ); r_in_sum -= pr; g_in_sum -= pg; b_in_sum -= pb; a_in_sum -= pa; stackOut = stackOut.next; yi += 4; } yw += width; } for ( x = 0; x < width; x++ ) { g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0; yi = x << 2; r_out_sum = radiusPlus1 * ( pr = pixels[yi]); g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]); r_sum += sumFactor * pr; g_sum += sumFactor * pg; b_sum += sumFactor * pb; a_sum += sumFactor * pa; stack = stackStart; for( i = 0; i < radiusPlus1; i++ ) { stack.r = pr; stack.g = pg; stack.b = pb; stack.a = pa; stack = stack.next; } yp = width; for( i = 1; i <= radius; i++ ) { yi = ( yp + x ) << 2; r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs; r_in_sum += pr; g_in_sum += pg; b_in_sum += pb; a_in_sum += pa; stack = stack.next; if( i < heightMinus1 ) { yp += width; } } yi = x; stackIn = stackStart; stackOut = stackEnd; for ( y = 0; y < height; y++ ) { p = yi << 2; pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum; if ( pa > 0 ) { pa = 255 / pa; pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa; pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa; pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa; } else { pixels[p] = pixels[p+1] = pixels[p+2] = 0; } r_sum -= r_out_sum; g_sum -= g_out_sum; b_sum -= b_out_sum; a_sum -= a_out_sum; r_out_sum -= stackIn.r; g_out_sum -= stackIn.g; b_out_sum -= stackIn.b; a_out_sum -= stackIn.a; p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3])); stackIn = stackIn.next; r_out_sum += ( pr = stackOut.r ); g_out_sum += ( pg = stackOut.g ); b_out_sum += ( pb = stackOut.b ); a_out_sum += ( pa = stackOut.a ); r_in_sum -= pr; g_in_sum -= pg; b_in_sum -= pb; a_in_sum -= pa; stackOut = stackOut.next; yi += width; } } context.putImageData( imageData, top_x, top_y ); } function stackBlurCanvasRGB(context, imageData, top_x, top_y, width, height, radius) { var pixels = imageData.data; var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, r_out_sum, g_out_sum, b_out_sum, r_in_sum, g_in_sum, b_in_sum, pr, pg, pb, rbs; var div = radius + radius + 1; var w4 = width << 2; var widthMinus1 = width - 1; var heightMinus1 = height - 1; var radiusPlus1 = radius + 1; var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2; var stackStart = new BlurStack(); var stack = stackStart; for ( i = 1; i < div; i++ ) { stack = stack.next = new BlurStack(); if ( i == radiusPlus1 ) var stackEnd = stack; } stack.next = stackStart; var stackIn = null; var stackOut = null; yw = yi = 0; var mul_sum = mul_table[radius]; var shg_sum = shg_table[radius]; for ( y = 0; y < height; y++ ) { r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0; r_out_sum = radiusPlus1 * ( pr = pixels[yi] ); g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] ); b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] ); r_sum += sumFactor * pr; g_sum += sumFactor * pg; b_sum += sumFactor * pb; stack = stackStart; for( i = 0; i < radiusPlus1; i++ ) { stack.r = pr; stack.g = pg; stack.b = pb; stack = stack.next; } for( i = 1; i < radiusPlus1; i++ ) { p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i ); g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs; b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs; r_in_sum += pr; g_in_sum += pg; b_in_sum += pb; stack = stack.next; } stackIn = stackStart; stackOut = stackEnd; for ( x = 0; x < width; x++ ) { pixels[yi] = (r_sum * mul_sum) >> shg_sum; pixels[yi+1] = (g_sum * mul_sum) >> shg_sum; pixels[yi+2] = (b_sum * mul_sum) >> shg_sum; r_sum -= r_out_sum; g_sum -= g_out_sum; b_sum -= b_out_sum; r_out_sum -= stackIn.r; g_out_sum -= stackIn.g; b_out_sum -= stackIn.b; p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2; r_in_sum += ( stackIn.r = pixels[p]); g_in_sum += ( stackIn.g = pixels[p+1]); b_in_sum += ( stackIn.b = pixels[p+2]); r_sum += r_in_sum; g_sum += g_in_sum; b_sum += b_in_sum; stackIn = stackIn.next; r_out_sum += ( pr = stackOut.r ); g_out_sum += ( pg = stackOut.g ); b_out_sum += ( pb = stackOut.b ); r_in_sum -= pr; g_in_sum -= pg; b_in_sum -= pb; stackOut = stackOut.next; yi += 4; } yw += width; } for ( x = 0; x < width; x++ ) { g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0; yi = x << 2; r_out_sum = radiusPlus1 * ( pr = pixels[yi]); g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]); b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]); r_sum += sumFactor * pr; g_sum += sumFactor * pg; b_sum += sumFactor * pb; stack = stackStart; for( i = 0; i < radiusPlus1; i++ ) { stack.r = pr; stack.g = pg; stack.b = pb; stack = stack.next; } yp = width; for( i = 1; i <= radius; i++ ) { yi = ( yp + x ) << 2; r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i ); g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs; b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs; r_in_sum += pr; g_in_sum += pg; b_in_sum += pb; stack = stack.next; if( i < heightMinus1 ) { yp += width; } } yi = x; stackIn = stackStart; stackOut = stackEnd; for ( y = 0; y < height; y++ ) { p = yi << 2; pixels[p] = (r_sum * mul_sum) >> shg_sum; pixels[p+1] = (g_sum * mul_sum) >> shg_sum; pixels[p+2] = (b_sum * mul_sum) >> shg_sum; r_sum -= r_out_sum; g_sum -= g_out_sum; b_sum -= b_out_sum; r_out_sum -= stackIn.r; g_out_sum -= stackIn.g; b_out_sum -= stackIn.b; p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2; r_sum += ( r_in_sum += ( stackIn.r = pixels[p])); g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1])); b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2])); stackIn = stackIn.next; r_out_sum += ( pr = stackOut.r ); g_out_sum += ( pg = stackOut.g ); b_out_sum += ( pb = stackOut.b ); r_in_sum -= pr; g_in_sum -= pg; b_in_sum -= pb; stackOut = stackOut.next; yi += width; } } context.putImageData( imageData, top_x, top_y ); } function BlurStack() { this.r = 0; this.g = 0; this.b = 0; this.a = 0; this.next = null; } return { stackBlurCanvasRGBA, stackBlurCanvasRGB, stackBlurImage }; }35:T1e64,stackBlurRGBA = (() => { let cachedQueue = new Uint8Array(0); return function stackBlurRGBA(pixels, width, height, radius) { "use strict"; if (!(pixels && pixels.length && radius > 0 && width > 0 && height > 0)) return; const widthMinus1 = width - 1 | 0; const heightMinus1 = height - 1 | 0; const radiusPlus1 = radius + 1 | 0; const queueSize = (radiusPlus1 + radius) << 2; const sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) >>> 1; if (queueSize > cachedQueue.length){ cachedQueue = new Uint8Array(queueSize); } const queue = cachedQueue; const queue32 = new Uint32Array(cachedQueue.buffer); let sIdx = 0 | 0; // queue index const queueStart = 0 | 0; const queueEnd = radiusPlus1 << 2; let queueIn = 0 | 0; let queueOut = 0 | 0; const mul = mul24[radius]; for (let y = 0, yi = 0, yw = 0; y < height; y++ ) { let pr = pixels[yi], pg = pixels[yi+1], pb = pixels[yi+2], pa = pixels[yi+3]; let rStack = sumFactor * pr | 0, gStack = sumFactor * pg | 0, bStack = sumFactor * pb | 0, aStack = sumFactor * pa | 0; let rSumIn = 0|0, gSumIn = 0|0, bSumIn = 0|0, aSumIn = 0|0; let rSumOut = radiusPlus1 * pr | 0, gSumOut = radiusPlus1 * pg | 0, bSumOut = radiusPlus1 * pb | 0, aSumOut = radiusPlus1 * pa | 0; queue[0] = pr; queue[1] = pg; queue[2] = pb; queue[3] = pa; queue32.fill(queue32[0], 0, radiusPlus1); sIdx = queueEnd; for(let i = 1; i < radiusPlus1; i++ ) { let p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ) | 0; const rbs = radiusPlus1 - i | 0; queue[sIdx] = pr = pixels[p]; queue[sIdx+1] = pg = pixels[p+1]; queue[sIdx+2] = pb = pixels[p+2];; queue[sIdx+3] = pa = pixels[p+3];; rStack = rStack + pr * rbs | 0; gStack = gStack + pg * rbs | 0; bStack = bStack + pb * rbs | 0; aStack = aStack + pa * rbs | 0; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; aSumIn = aSumIn + pa | 0; sIdx = sIdx + 4 | 0; } queueIn = queueStart; queueOut = queueEnd; for (let x = 0; x < width; x++) { pa = aStack * mul >>> 24; if (pa++ > 0){ pr = (rStack * pa >>> 8) * mul >>> 24; pg = (gStack * pa >>> 8) * mul >>> 24; pb = (bStack * pa >>> 8) * mul >>> 24; } else { pr = 0 | 0; pg = 0 | 0; pb = 0 | 0; } pixels[yi] = pr; pixels[yi+1] = pg; pixels[yi+2] = pb; pixels[yi+3] = pa-1|0; yi = yi + 4 | 0; rStack = rStack - rSumOut | 0; gStack = gStack - gSumOut | 0; bStack = bStack - bSumOut | 0; aStack = aStack - aSumOut | 0; rSumOut = rSumOut - queue[queueIn] | 0; gSumOut = gSumOut - queue[queueIn+1] | 0; bSumOut = bSumOut - queue[queueIn+2] | 0; aSumOut = aSumOut - queue[queueIn+3] | 0; let p = x + radiusPlus1 | 0; if (p > widthMinus1) p = widthMinus1; p = (yw + p) << 2; queue[queueIn] = pr = pixels[p]; queue[queueIn+1] = pg = pixels[p+1]; queue[queueIn+2] = pb = pixels[p+2]; queue[queueIn+3] = pa = pixels[p+3]; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; aSumIn = aSumIn + pa | 0; rStack = rStack + rSumIn | 0; gStack = gStack + gSumIn | 0; bStack = bStack + bSumIn | 0; aStack = aStack + aSumIn | 0; pr = queue[queueOut]; pg = queue[queueOut+1]; pb = queue[queueOut+2]; pa = queue[queueOut+3]; rSumIn = rSumIn - pr | 0; gSumIn = gSumIn - pg | 0; bSumIn = bSumIn - pb | 0; aSumIn = aSumIn - pa | 0; rSumOut = rSumOut + pr | 0; gSumOut = gSumOut + pg | 0; bSumOut = bSumOut + pb | 0; aSumOut = aSumOut + pa | 0; queueIn = (queueIn + 4) % queueSize | 0; queueOut = (queueOut + 4) % queueSize | 0; } yw = yw + width | 0; } for (let x = 0; x < width; x++) { let yi = x << 2; let pr = pixels[yi], pg = pixels[yi+1], pb = pixels[yi+2], pa = pixels[yi+3]; let rStack = sumFactor * pr | 0, gStack = sumFactor * pg | 0, bStack = sumFactor * pb | 0, aStack = sumFactor * pa | 0; let rSumIn = 0|0, gSumIn = 0|0, bSumIn = 0|0, aSumIn = 0|0; let rSumOut = radiusPlus1 * pr | 0, gSumOut = radiusPlus1 * pg | 0, bSumOut = radiusPlus1 * pb | 0, aSumOut = radiusPlus1 * pa | 0; queue[0] = pr; queue[1] = pg; queue[2] = pb; queue[3] = pa; queue32.fill(queue32[0], 0, radiusPlus1); sIdx = queueEnd; let yp = width; for (let i = 1; i <= radius; i++ ) { yi = (yp + x) << 2; queue[sIdx] = pr = pixels[yi]; queue[sIdx+1] = pg = pixels[yi+1]; queue[sIdx+2] = pb = pixels[yi+2]; queue[sIdx+3] = pa = pixels[yi+3]; let rbs = radiusPlus1 - i | 0; rStack = (rStack + pr * rbs) | 0; gStack = gStack + pg * rbs | 0; bStack = bStack + pb * rbs | 0; aStack = aStack + pa * rbs | 0; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; aSumIn = aSumIn + pa | 0; sIdx = (sIdx + 4) % queueSize | 0; if( i < heightMinus1 ) { yp = yp + width | 0; } } yi = x; queueIn = queueStart; queueOut = queueEnd; for (let y = 0; y < height; y++) { let p = yi << 2; pa = aStack * mul >>> 24; if (pa++ > 0){ pr = (rStack * pa >>> 8) * mul >>> 24; pg = (gStack * pa >>> 8) * mul >>> 24; pb = (bStack * pa >>> 8) * mul >>> 24; } else { pr = 0; pg = 0; pb = 0; } pixels[p] = pr; pixels[p+1] = pg; pixels[p+2] = pb; pixels[p+3] = pa-1|0; rStack = rStack - rSumOut | 0; gStack = gStack - gSumOut | 0; bStack = bStack - bSumOut | 0; aStack = aStack - aSumOut | 0; rSumOut = rSumOut - queue[queueIn] | 0; gSumOut = gSumOut - queue[queueIn+1] | 0; bSumOut = bSumOut - queue[queueIn+2] | 0; aSumOut = aSumOut - queue[queueIn+3] | 0; p = y + radiusPlus1 | 0; if (p > heightMinus1) p = heightMinus1; p = (x + p * width) << 2; queue[queueIn] = pr = pixels[p]; queue[queueIn+1] = pg = pixels[p+1]; queue[queueIn+2] = pb = pixels[p+2]; queue[queueIn+3] = pa = pixels[p+3]; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; aSumIn = aSumIn + pa | 0; rStack = rStack + rSumIn | 0; gStack = gStack + gSumIn | 0; bStack = bStack + bSumIn | 0; aStack = aStack + aSumIn | 0; pr = queue[queueOut]; pg = queue[queueOut+1]; pb = queue[queueOut+2]; pa = queue[queueOut+3]; rSumIn = rSumIn - pr | 0; gSumIn = gSumIn - pg | 0; bSumIn = bSumIn - pb | 0; aSumIn = aSumIn - pa | 0; rSumOut = rSumOut + pr | 0; gSumOut = gSumOut + pg | 0; bSumOut = bSumOut + pb | 0; aSumOut = aSumOut + pa | 0; queueIn = (queueIn + 4) % queueSize | 0; queueOut = (queueOut + 4) % queueSize | 0; yi = yi + width | 0; } } } })()36:T17e2,stackBlurRGB = (() => { let cachedQueue = new Uint8Array(0); return function stackBlurRGB(pixels, width, height, radius) { "use strict"; if (!(pixels && pixels.length && radius > 0 && width > 0 && height > 0)) return; const widthMinus1 = width - 1 | 0; const heightMinus1 = height - 1 | 0; const radiusPlus1 = radius + 1 | 0; let queueSize = radiusPlus1 + radius | 0; queueSize = queueSize+queueSize+queueSize | 0; const sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) >>> 1; if (queueSize > cachedQueue.length){ cachedQueue = new Uint8Array(queueSize); } const queue = cachedQueue; let sIdx = 0 | 0; // queue index const queueStart = 0 | 0; const queueEnd = radiusPlus1+radiusPlus1+radiusPlus1 | 0; let queueIn = 0 | 0; let queueOut = 0 | 0; const mul = mul24[radius]; for (let y = 0, yw = 0, yi = 0; y < height; y++ ) { let pr = pixels[yi], pg = pixels[yi+1], pb = pixels[yi+2]; let rStack = sumFactor * pr | 0, gStack = sumFactor * pg | 0, bStack = sumFactor * pb | 0; let rSumIn = 0, gSumIn = 0, bSumIn = 0; let rSumOut = radiusPlus1 * pr | 0, gSumOut = radiusPlus1 * pg | 0, bSumOut = radiusPlus1 * pb | 0; for (sIdx = queueStart; sIdx < queueEnd; sIdx += 3) { queue[sIdx] = pr; queue[sIdx+1] = pg; queue[sIdx+2] = pb } for(let i = 1; i < radiusPlus1; i++ ) { let p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 ); const rbs = radiusPlus1 - i | 0; queue[sIdx] = pr = pixels[p]; queue[sIdx+1] = pg = pixels[p+1]; queue[sIdx+2] = pb = pixels[p+2]; rStack = rStack + pr * rbs | 0; gStack = gStack + pg * rbs | 0; bStack = bStack + pb * rbs | 0; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; sIdx = sIdx + 3 | 0; } queueIn = queueStart; queueOut = queueEnd; for (let x = 0; x < width; x++) { pixels[yi] = rStack * mul >>> 24; pixels[yi+1] = gStack * mul >>> 24; pixels[yi+2] = bStack * mul >>> 24; yi = yi + 4 | 0; rStack = rStack - rSumOut | 0; gStack = gStack - gSumOut | 0; bStack = bStack - bSumOut | 0; rSumOut = rSumOut - queue[queueIn] | 0; gSumOut = gSumOut - queue[queueIn+1] | 0; bSumOut = bSumOut - queue[queueIn+2] | 0; let p = x + radiusPlus1 | 0; if (p > widthMinus1) p = widthMinus1; p = (yw + p) << 2; queue[queueIn] = pr = pixels[p]; queue[queueIn+1] = pg = pixels[p+1]; queue[queueIn+2] = pb = pixels[p+2]; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; rStack = rStack + rSumIn | 0; gStack = gStack + gSumIn | 0; bStack = bStack + bSumIn | 0; pr = queue[queueOut]; pg = queue[queueOut+1]; pb = queue[queueOut+2]; rSumIn = rSumIn - pr | 0; gSumIn = gSumIn - pg | 0; bSumIn = bSumIn - pb | 0; rSumOut = rSumOut + pr | 0; gSumOut = gSumOut + pg | 0; bSumOut = bSumOut + pb | 0; queueIn = (queueIn + 3) % queueSize | 0; queueOut = (queueOut + 3) % queueSize | 0; } yw += width; } for (let x = 0; x < width; x++) { let p = x << 2; let pr = pixels[p], pg = pixels[p+1], pb = pixels[p+2]; let rStack = sumFactor * pr | 0, gStack = sumFactor * pg | 0, bStack = sumFactor * pb | 0; let rSumIn = 0, gSumIn = 0, bSumIn = 0; let rSumOut = radiusPlus1 * pr | 0, gSumOut = radiusPlus1 * pg | 0, bSumOut = radiusPlus1 * pb | 0; for (sIdx = queueStart; sIdx < queueEnd; sIdx += 3) { queue[sIdx] = pr; queue[sIdx+1]= pg; queue[sIdx+2] = pb; } let yp = width; for (let i = 1; i <= radius; i++ ) { let p = ( yp + x ) << 2; queue[sIdx] = pr = pixels[p]; queue[sIdx+1] = pg = pixels[p+1]; queue[sIdx+2] = pb = pixels[p+2]; const rbs = radiusPlus1 - i | 0; rStack = rStack + pr * rbs | 0; gStack = gStack + pg * rbs | 0; bStack = bStack + pb * rbs | 0; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; sIdx = (sIdx + 3) % queueSize | 0; if( i < heightMinus1 ) { yp = yp + width | 0; } } queueIn = queueStart; queueOut = queueEnd; for (let y = 0, yi = x; y < height; y++ ) { let p = yi << 2; pixels[p] = rStack * mul >>> 24; pixels[p+1] = gStack * mul >>> 24; pixels[p+2] = bStack * mul >>> 24; rStack = rStack - rSumOut | 0; gStack = gStack - gSumOut | 0; bStack = bStack - bSumOut | 0; rSumOut = rSumOut - queue[queueIn] | 0; gSumOut = gSumOut - queue[queueIn+1] | 0; bSumOut = bSumOut - queue[queueIn+2] | 0; p = y + radiusPlus1; if (p > heightMinus1) p = heightMinus1; p = (x + p * width) << 2; queue[queueIn] = pr = pixels[p]; queue[queueIn+1] = pg = pixels[p+1]; queue[queueIn+2] = pb = pixels[p+2]; rSumIn = rSumIn + pr | 0; gSumIn = gSumIn + pg | 0; bSumIn = bSumIn + pb | 0; rStack = rStack + rSumIn | 0; gStack = gStack + gSumIn | 0; bStack = bStack + bSumIn | 0; pr = queue[queueOut]; pg = queue[queueOut+1]; pb = queue[queueOut+2]; rSumIn = rSumIn - pr | 0; gSumIn = gSumIn - pg | 0; bSumIn = bSumIn - pb | 0; rSumOut = rSumOut + pr | 0; gSumOut = gSumOut + pg | 0; bSumOut = bSumOut + pb | 0; queueIn = (queueIn + 3) % queueSize | 0; queueOut = (queueOut + 3) % queueSize | 0; yi = yi + width | 0; } } } })()37:T3951,/** * @param {Uint8Array} pixels * @param {number} width * @param {number} height * @param {number} radius */ function quadBlurRGBA (pixels, width, height, radius) { "use strict"; if (!(pixels && pixels.length && radius > 0 && width > 0 && height > 0)) return; if (radius <= 1) { return stackBlurRGBA(pixels, width, height, radius); } // ## Widths // ▂▂▃▃▄▃▃▂▂ // ▃▆█████████████▆▃ // ▄███████████████████▄ // ▗███████████████████████▖ // ▗█████████████████████████▖ // ▗███████████████████████████▖ // ▃▅█████████████████████████████▅▃ // ▁▁▂▃▅▇███████████████████████████████████▇▅▃▂▁▁ // // <────────radius───────>*<───────radius────────> // <──────────────────blurWidth──────────────────> // <──────stackWidth──────> // <─accWidth─> // // blurWidth = radius * 2 + 1 // stackWidth = radius + 1 // accWidth = Math.floor((stackWidth+1) / 2) // // ## Accumulators and range of pixels they cover // // ### Linear Accumulators // // <──────────> stackLeftOut // // <──────────> stackLeftIn // // stackRightOut <──────────> // // stackRightIn <──────────> // // ### Stack accumulators // // <───────stackLeft──────> // // <──────stackRight──────> // // ### Quadratic stack accumulator // // <──────────────────quadStack──────────────────> // // Indices to keep track of and what they are for: // 1 23 45 67 8 // // 1) stackLeftOut leftmost pixel // 2) stackLeftOut rightmost pixel // 3) stackLeftIn leftmost pixel // 4) stackRightOut leftmost pixel // 5) stackLeftIn rightmost pixel, // equals central pixel position. // 6) stackRightOut rightmost pixel // 7) stackRightIn leftmost pixel // 8) stackRightIn rightmost pixel const stackWidth = radius + 1; const accWidth = (stackWidth + 1) / 2 | 0; const stackLeftOut = [0, 0, 0, 0] const stackLeftIn = [0, 0, 0, 0] const stackRightOut = [0, 0, 0, 0] const stackRightIn = [0, 0, 0, 0] const stackLeft = [0, 0, 0, 0] const stackRight = [0, 0, 0, 0] const quadStack = [0, 0, 0, 0] const quadBuffer = new Float64Array(pixels.length); const quadWeight = accWidth * (stackWidth - accWidth) * stackWidth; // blur rows for (let y = 0; y < height; y++) { const yw = y * width * 4; // Initiate on leftmost pixel. stackLeftOut[0] = stackLeftIn[0] = stackRightOut[0] = stackRightIn[0] = pixels[yw+0] * accWidth; stackLeftOut[1] = stackLeftIn[1] = stackRightOut[1] = stackRightIn[1] = pixels[yw+1] * accWidth; stackLeftOut[2] = stackLeftIn[2] = stackRightOut[2] = stackRightIn[2] = pixels[yw+2] * accWidth; stackLeftOut[3] = stackLeftIn[3] = stackRightOut[3] = stackRightIn[3] = pixels[yw+3] * accWidth; // left and right stacks are initually just accumulators times their width stackLeft[0] = stackRight[0] = stackLeftOut[0] * (stackWidth - accWidth); stackLeft[1] = stackRight[1] = stackLeftOut[1] * (stackWidth - accWidth); stackLeft[2] = stackRight[2] = stackLeftOut[2] * (stackWidth - accWidth); stackLeft[3] = stackRight[3] = stackLeftOut[3] * (stackWidth - accWidth); quadStack[0] = stackLeft[0] * stackWidth; quadStack[1] = stackLeft[1] * stackWidth; quadStack[2] = stackLeft[2] * stackWidth; quadStack[3] = stackLeft[3] * stackWidth; const ywMax = yw + width * 4 - 4; for(let x = 1-radius; x < 0; x++) { const idx = x*4 + yw; const idxStackRightOutLP = constrain(idx, yw, ywMax) const idxStackRightOutRP = constrain(idx + accWidth * 4, yw, ywMax); const idxStackRightInLP = constrain(idx + (radius - accWidth) * 4, yw, ywMax); const idxStackRightInRP = constrain(idx + radius * 4, yw, ywMax); stackRightOut[0] += pixels[idxStackRightOutRP+0] - pixels[idxStackRightOutLP+0]; stackRightOut[1] += pixels[idxStackRightOutRP+1] - pixels[idxStackRightOutLP+1]; stackRightOut[2] += pixels[idxStackRightOutRP+2] - pixels[idxStackRightOutLP+2]; stackRightOut[3] += pixels[idxStackRightOutRP+3] - pixels[idxStackRightOutLP+3]; stackRightIn[0] += pixels[idxStackRightInRP+0] - pixels[idxStackRightInLP+0]; stackRightIn[1] += pixels[idxStackRightInRP+1] - pixels[idxStackRightInLP+1]; stackRightIn[2] += pixels[idxStackRightInRP+2] - pixels[idxStackRightInLP+2]; stackRightIn[3] += pixels[idxStackRightInRP+3] - pixels[idxStackRightInLP+3]; stackRight[0] += stackRightIn[0] - stackRightOut[0]; stackRight[1] += stackRightIn[1] - stackRightOut[1]; stackRight[2] += stackRightIn[2] - stackRightOut[2]; stackRight[3] += stackRightIn[3] - stackRightOut[3]; quadStack[0] += stackRight[0] - stackLeft[0]; quadStack[1] += stackRight[1] - stackLeft[1]; quadStack[2] += stackRight[2] - stackLeft[2]; quadStack[3] += stackRight[3] - stackLeft[3]; } for (let x = 0; x < width; x++) { const idx = x*4 + yw; const idxStackLeftOutLP = constrain(idx - radius * 4, yw, ywMax); const idxStackLeftOutRP = constrain(idx - (radius - accWidth) * 4, yw, ywMax); const idxStackLeftInLP = constrain(idx - accWidth * 4, yw, ywMax); const idxStackLeftInRP = constrain(idx, yw, ywMax); const idxStackRightOutLP = constrain(idx, yw, ywMax); const idxStackRightOutRP = constrain(idx + accWidth * 4, yw, ywMax); const idxStackRightInLP = constrain(idx + (radius - accWidth) * 4, yw, ywMax); const idxStackRightInRP = constrain(idx + radius * 4, yw, ywMax); stackLeftOut[0] += pixels[idxStackLeftOutRP + 0] - pixels[idxStackLeftOutLP + 0]; stackLeftOut[1] += pixels[idxStackLeftOutRP + 1] - pixels[idxStackLeftOutLP + 1]; stackLeftOut[2] += pixels[idxStackLeftOutRP + 2] - pixels[idxStackLeftOutLP + 2]; stackLeftOut[3] += pixels[idxStackLeftOutRP + 3] - pixels[idxStackLeftOutLP + 3]; stackLeftIn[0] += pixels[idxStackLeftInRP + 0] - pixels[idxStackLeftInLP + 0]; stackLeftIn[1] += pixels[idxStackLeftInRP + 1] - pixels[idxStackLeftInLP + 1]; stackLeftIn[2] += pixels[idxStackLeftInRP + 2] - pixels[idxStackLeftInLP + 2]; stackLeftIn[3] += pixels[idxStackLeftInRP + 3] - pixels[idxStackLeftInLP + 3]; stackRightOut[0] += pixels[idxStackRightOutRP + 0] - pixels[idxStackRightOutLP + 0]; stackRightOut[1] += pixels[idxStackRightOutRP + 1] - pixels[idxStackRightOutLP + 1]; stackRightOut[2] += pixels[idxStackRightOutRP + 2] - pixels[idxStackRightOutLP + 2]; stackRightOut[3] += pixels[idxStackRightOutRP + 3] - pixels[idxStackRightOutLP + 3]; stackRightIn[0] += pixels[idxStackRightInRP + 0] - pixels[idxStackRightInLP + 0]; stackRightIn[1] += pixels[idxStackRightInRP + 1] - pixels[idxStackRightInLP + 1]; stackRightIn[2] += pixels[idxStackRightInRP + 2] - pixels[idxStackRightInLP + 2]; stackRightIn[3] += pixels[idxStackRightInRP + 3] - pixels[idxStackRightInLP + 3]; stackLeft[0] += stackLeftIn[0] - stackLeftOut[0]; stackLeft[1] += stackLeftIn[1] - stackLeftOut[1]; stackLeft[2] += stackLeftIn[2] - stackLeftOut[2]; stackLeft[3] += stackLeftIn[3] - stackLeftOut[3]; stackRight[0] += stackRightIn[0] - stackRightOut[0]; stackRight[1] += stackRightIn[1] - stackRightOut[1]; stackRight[2] += stackRightIn[2] - stackRightOut[2]; stackRight[3] += stackRightIn[3] - stackRightOut[3]; quadStack[0] += stackRight[0] - stackLeft[0]; quadStack[1] += stackRight[1] - stackLeft[1]; quadStack[2] += stackRight[2] - stackLeft[2]; quadStack[3] += stackRight[3] - stackLeft[3]; quadBuffer[idx + 0] = quadStack[0]; quadBuffer[idx + 1] = quadStack[1]; quadBuffer[idx + 2] = quadStack[2]; quadBuffer[idx + 3] = quadStack[3]; } } // blur columns for (let x = 0; x < width; x++) { const x4 = x * 4; // Initiate on top pixel. stackLeftOut[0] = stackLeftIn[0] = stackRightOut[0] = stackRightIn[0] = quadBuffer[x4] * accWidth; stackLeftOut[1] = stackLeftIn[1] = stackRightOut[1] = stackRightIn[1] = quadBuffer[x4+1] * accWidth; stackLeftOut[2] = stackLeftIn[2] = stackRightOut[2] = stackRightIn[2] = quadBuffer[x4+2] * accWidth; stackLeftOut[3] = stackLeftIn[3] = stackRightOut[3] = stackRightIn[3] = quadBuffer[x4+3] * accWidth; // left and right stacks are initually just accumulators times their width stackLeft[0] = stackRight[0] = stackLeftOut[0] * (stackWidth - accWidth); stackLeft[1] = stackRight[1] = stackLeftOut[1] * (stackWidth - accWidth); stackLeft[2] = stackRight[2] = stackLeftOut[2] * (stackWidth - accWidth); stackLeft[3] = stackRight[3] = stackLeftOut[3] * (stackWidth - accWidth); quadStack[0] = stackLeft[0] * stackWidth; quadStack[1] = stackLeft[1] * stackWidth; quadStack[2] = stackLeft[2] * stackWidth; quadStack[3] = stackLeft[3] * stackWidth; for(let y = 1-radius; y < 0; y++) { const idx = x4 + y*4*width; const idxStackRightOutLP = x4 + constrain(y, 0, height-1)*4*width; const idxStackRightOutRP = x4 + constrain(y + accWidth, 0, height-1)*4*width; const idxStackRightInLP = x4 + constrain(y + radius - accWidth, 0, height-1)*4*width; const idxStackRightInRP = x4 + constrain(y + radius, 0, height-1)*4*width; stackRightOut[0] += quadBuffer[idxStackRightOutRP+0] - quadBuffer[idxStackRightOutLP+0]; stackRightOut[1] += quadBuffer[idxStackRightOutRP+1] - quadBuffer[idxStackRightOutLP+1]; stackRightOut[2] += quadBuffer[idxStackRightOutRP+2] - quadBuffer[idxStackRightOutLP+2]; stackRightOut[3] += quadBuffer[idxStackRightOutRP+3] - quadBuffer[idxStackRightOutLP+3]; stackRightIn[0] += quadBuffer[idxStackRightInRP+0] - quadBuffer[idxStackRightInLP+0]; stackRightIn[1] += quadBuffer[idxStackRightInRP+1] - quadBuffer[idxStackRightInLP+1]; stackRightIn[2] += quadBuffer[idxStackRightInRP+2] - quadBuffer[idxStackRightInLP+2]; stackRightIn[3] += quadBuffer[idxStackRightInRP+3] - quadBuffer[idxStackRightInLP+3]; stackRight[0] += stackRightIn[0] - stackRightOut[0]; stackRight[1] += stackRightIn[1] - stackRightOut[1]; stackRight[2] += stackRightIn[2] - stackRightOut[2]; stackRight[3] += stackRightIn[3] - stackRightOut[3]; quadStack[0] += stackRight[0] - stackLeft[0]; quadStack[1] += stackRight[1] - stackLeft[1]; quadStack[2] += stackRight[2] - stackLeft[2]; quadStack[3] += stackRight[3] - stackLeft[3]; } for (let y = 0; y < height; y++) { const idx = x4 + y*4*width; const idxStackLeftOutLP = x4 + constrain(y - radius, 0, height-1)*4*width; const idxStackLeftOutRP = x4 + constrain(y - radius + accWidth, 0, height-1)*4*width; const idxStackLeftInLP = x4 + constrain(y - accWidth, 0, height-1)*4*width; const idxStackLeftInRP = x4 + constrain(y, 0, height-1)*4*width; const idxStackRightOutLP = x4 + constrain(y, 0, height-1)*4*width; const idxStackRightOutRP = x4 + constrain(y + accWidth, 0, height-1)*4*width; const idxStackRightInLP = x4 + constrain(y + radius - accWidth, 0, height-1)*4*width; const idxStackRightInRP = x4 + constrain(y + radius, 0, height-1)*4*width; stackLeftOut[0] += quadBuffer[idxStackLeftOutRP + 0] - quadBuffer[idxStackLeftOutLP + 0]; stackLeftOut[1] += quadBuffer[idxStackLeftOutRP + 1] - quadBuffer[idxStackLeftOutLP + 1]; stackLeftOut[2] += quadBuffer[idxStackLeftOutRP + 2] - quadBuffer[idxStackLeftOutLP + 2]; stackLeftOut[3] += quadBuffer[idxStackLeftOutRP + 3] - quadBuffer[idxStackLeftOutLP + 3]; stackLeftIn[0] += quadBuffer[idxStackLeftInRP + 0] - quadBuffer[idxStackLeftInLP + 0]; stackLeftIn[1] += quadBuffer[idxStackLeftInRP + 1] - quadBuffer[idxStackLeftInLP + 1]; stackLeftIn[2] += quadBuffer[idxStackLeftInRP + 2] - quadBuffer[idxStackLeftInLP + 2]; stackLeftIn[3] += quadBuffer[idxStackLeftInRP + 3] - quadBuffer[idxStackLeftInLP + 3]; stackRightOut[0] += quadBuffer[idxStackRightOutRP + 0] - quadBuffer[idxStackRightOutLP + 0]; stackRightOut[1] += quadBuffer[idxStackRightOutRP + 1] - quadBuffer[idxStackRightOutLP + 1]; stackRightOut[2] += quadBuffer[idxStackRightOutRP + 2] - quadBuffer[idxStackRightOutLP + 2]; stackRightOut[3] += quadBuffer[idxStackRightOutRP + 3] - quadBuffer[idxStackRightOutLP + 3]; stackRightIn[0] += quadBuffer[idxStackRightInRP + 0] - quadBuffer[idxStackRightInLP + 0]; stackRightIn[1] += quadBuffer[idxStackRightInRP + 1] - quadBuffer[idxStackRightInLP + 1]; stackRightIn[2] += quadBuffer[idxStackRightInRP + 2] - quadBuffer[idxStackRightInLP + 2]; stackRightIn[3] += quadBuffer[idxStackRightInRP + 3] - quadBuffer[idxStackRightInLP + 3]; stackLeft[0] += stackLeftIn[0] - stackLeftOut[0]; stackLeft[1] += stackLeftIn[1] - stackLeftOut[1]; stackLeft[2] += stackLeftIn[2] - stackLeftOut[2]; stackLeft[3] += stackLeftIn[3] - stackLeftOut[3]; stackRight[0] += stackRightIn[0] - stackRightOut[0]; stackRight[1] += stackRightIn[1] - stackRightOut[1]; stackRight[2] += stackRightIn[2] - stackRightOut[2]; stackRight[3] += stackRightIn[3] - stackRightOut[3]; pixels[idx + 0] = (quadStack[0] += stackRight[0] - stackLeft[0]) / (quadWeight * quadWeight) & 0xFF; pixels[idx + 1] = (quadStack[1] += stackRight[1] - stackLeft[1]) / (quadWeight * quadWeight) & 0xFF; pixels[idx + 2] = (quadStack[2] += stackRight[2] - stackLeft[2]) / (quadWeight * quadWeight) & 0xFF; pixels[idx + 3] = (quadStack[3] += stackRight[3] - stackLeft[3]) / (quadWeight * quadWeight) & 0xFF; } } return pixels; }38:[] 2f:{"title":"Stackblur and Quadratic Stackblur","cells":[{"id":0,"value":"Title = md`# Stackblur and Quadratic Stackblur`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"blurCanvas = { \n const context = DOM.context2d(width, height);\n switch(blurType){\n case \"stack\":\n stackBlurImage(imageElement, context, blurRadius, true);\n break;\n case \"quad\":\n quadBlurImage(imageElement, context, blurRadius, true);\n break;\n }\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1574,"value":"viewof blurInputs = inputsGroup([[\n slider({\n title: \"Blur radius\",\n min: 0,\n max: 255,\n step: 1,\n value: 4,\n }),\n radio({\n options: [\n { label: 'Stack Blur', value: 'stack' },\n { label: 'Quadratic Stack Blur (currently buggy for small kernels)', value: 'quad' },\n ],\n value: 'stack'\n }),\n]], [['blurRadius', 'blurType']])","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof imgURL = text({\n placeholder: \"https://blindedcyclops.neocities.org/watercolor2.jpg\",\n description: \"Replace URL with test image of choice\",\n submit: \"Set Image URL\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"TableOfContents = md`\n## Table of Contents\n\n1. [Stackblur and Quadratic Stackblur](#Title)\n2. [Table of Contents](#TableOfContents)\n3. [Introduction](#Introduction)\n4. [Usage](#Usage)\n5. [How does the algorithm work?](#HowDoesItWork)\n6. [\"Quadratic\" Stackblur](#QuadraticStackBlur)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"Usage = md`\n## Usage\n\nTo use in other notebooks, import the relevant functions, which you can then apply to your image or \\`Canvas2DContext\\`:\n\n\\`\\`\\`js\nimport {stackBlurImage, stackBlurRGBA, stackBlurRGB} from \"@jobleonard/mario-klingemanns-stackblur\"\n\\`\\`\\`\n\n\n\\`\\`\\`js\nblurCanvas = {\n const blurContext = DOM.context2d(width, height); \n stackblur.stackBlurImage(imageElement, blurContext, blurRadius, false);\n return blurContext.canvas;\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"pyramidChart2D","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof pyramidRadius2D = slider({\n title: \"Blur radius of 2D demo of stack blur shape\",\n min: 1,\n max: 32,\n step: 1,\n value: 6,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"QuadraticStackBlur = md`## \"Quadratic\" Stack Blur\n\nIn theory, we could apply this idea _another_ time, and make a sum of sum of sums. It turns out that the resulting kernel looks a lot like a bell curve in shape: *(if you know [how the bell curve is constructed](https://beta.observablehq.com/@jobleonard/the-distribution-of-taking-the-average-of-n-values), this should hardly come as a surprise)*\n\n![\"Quadratic\" stack blur](https://blindedcyclops.neocities.org/quadratic stack blur.png)\n_Quick sketch of applying a sum of sums for a radius of five pixels_ \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"quadraticChart2D","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"viewof quadRadius2D = slider({\n title: \"Blur radius of 2D demo of quadratic stack blur\",\n min: 1,\n max: 32,\n step: 1,\n value: 8,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"md`The idea adding stacks of stacks is somewhat comparable to how a [the curvy Bézier... curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is created out of linear interpolations of linear interpolations along straight lines. Similar to how Bézier curves go from linear to quadratic to cubic, I figured that creating a stack of stacks should be called a *quadratic* stack blur. Alternatively, \"bell blur\" seems to be an unused name so far.\n\nWhile not completely free, a quadratic stack blur would still be very cheap to compute: it still just requires moving windows of sums. The implementation below still has a bug in it though, and I haven't managed to figure out what it is. But the principle is sound!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"Code = md`\n---\n\n## Code\n\n---\n\n### Library\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"// mul24 is a multiplication table with constants such that for a given\n// radius r, after multiplying the sum we fill the full 32 bits as much\n// as possible. That is to say: if our sum only contains white pixels, or\n// 0xFF, then the output will be 0xFFFFFFFF. Then we shift by a constant 24\n// bits to the right to scale back to the range [0, 0xFF].\nmul24 = { \n const mul24 = new Uint32Array(256);\n for(let i = 0; i < 256; i++){\n const r = i+1;\n mul24[i] = 0xFFFFFFFF / (0xFF*r*r);\n }\n return mul24;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"function stackBlurImage(img, context, radius, blurAlphaChannel) {\n\t\t\"use strict\";\n const w = context.canvas.width;\n const h = context.canvas.height;\n context.save();\n context.resetTransform();\n context.clearRect(0, 0, w, h);\n context.drawImage(img, 0, 0, w, h);\n context.restore();\n const imageData = context.getImageData(0, 0, w, h);\n if (isNaN(radius) || radius < 1) return;\n if (blurAlphaChannel) {\n stackBlurRGBA(imageData.data, w | 0, h | 0, radius | 0);\n } else {\n stackBlurRGB(imageData.data, w | 0, h | 0, radius | 0);\n }\n context.putImageData(imageData, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"stackblur = {\n return {\n stackBlurImage,\n stackBlurRGBA,\n stackBlurRGB,\n };\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1433,"value":"function constrain(x, a, b) {\n return x > b ? b : x < a ? a : x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1111,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1192,"value":"function quadBlurImage(img, context, radius, blurAlphaChannel) {\n\t\t\"use strict\";\n const w = context.canvas.width;\n const h = context.canvas.height;\n context.save();\n context.resetTransform();\n context.clearRect(0, 0, w, h);\n context.drawImage(img, 0, 0, w, h);\n context.restore();\n const imageData = context.getImageData(0, 0, w, h);\n if (isNaN(radius) || radius < 1) return;\n if (blurAlphaChannel) {\n quadBlurRGBA(imageData.data, w | 0, h | 0, radius | 0);\n // } else {\n // stackBlurRGB(imageData.data, w | 0, h | 0, radius | 0);\n }\n context.putImageData(imageData, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"// Because quadratic stack blur is a sum of sum of sums, we cannot use the\n// multiply/shift approach: this overflows 32 bits at very small radius already. \n// JavaScript does not have native 64 bit integers, so instead we use a\n// Float64Array (which can store integers up to 54 bits - those 24 extra bits\n// provide all the dynamic range needed). Given that we are already using floating\n// point, we might as well just a floating point multiplier such that it effectively\n// \"divides\" our sum to the correct output value, then force that to an integer with |0.\ndivQuad = {\n const divQuad = new Float64Array(256);\n for(let i = 0; i < 256; i++){\n const r = i+1;\n divQuad[i] = 1 / (r*r*r);\n }\n return divQuad;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = Math.round(width * imageElement.height / imageElement.width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"CodeDemoChart = md`---\n### Demo Blur and Charts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import {radio, slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"// inlined from https://observablehq.com/@bumbeishvili/input-groups\nfunction inputsGroup(views,names){\n const form = html`

${\n views.map(row => html`

${\n row.map(input => html`

${input}

`)\n }

`;\n \n form.oninput = () => {\n form.value = views.map(row => row.map(input => input.value))\n if(names){\n names.forEach((row,i)=>row.forEach((c,j)=> form.value[i][j] && (form.value[c]=form.value[i][j])))\n }\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"blurType = blurInputs.blurType","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"blurRadius = blurInputs.blurRadius","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"blurContext = DOM.context2d(imageElement.width, imageElement.height, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"imageElement = await new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n resolve(image);\n };\n image.src = imgURL || \"https://blindedcyclops.neocities.org/watercolor2.jpg\";\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"pyramidData = {\n const p = new Uint32Array(pyramidRadius + pyramidRadius + 1);\n for (let i = 0; i < pyramidRadius+1; i++){\n for (let j = 0; j < pyramidRadius+1; j++) {\n p[i+j]++;\n }\n }\n const pyramid = [];\n for (let i = 0; i < p.length; i++){\n pyramid.push({name: i - pyramidRadius, value: p[i]*p[i]});\n }\n return pyramid\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"pyramidScale = 72/(1+pyramidRadius2D)","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"pyramidData2D = {\n const p = new Uint32Array(pyramidRadius2D + pyramidRadius2D + 1);\n for (let i = 0; i < pyramidRadius2D+1; i++){\n for (let j = 0; j <= pyramidRadius2D; j++) {\n p[i+j]++;\n }\n }\n const pyramid2D = [];\n let max = 0;\n for (let i = 0; i < p.length; i++){\n const c = p[i];\n const p2 = [];\n for (let j = 0; j < p.length; j++){\n const val = p[j]*c;\n if (val > max) max = val;\n p2.push(val);\n }\n pyramid2D.push(p2);\n }\n const norm = 4*(pyramidRadius2D+1)/max;\n for (let i = 0; i < p.length; i++){\n for(let j = 0; j < p.length; j++){\n pyramid2D[i][j] *= norm;\n }\n }\n\n return pyramid2D\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"quadraticData = {\n const p = new Uint32Array(quadRadius+1);\n for (let i = 0; i <= (quadRadius+1)/2; i++){\n for (let j = 0; j <= quadRadius/2; j++) {\n p[i+j]++;\n }\n }\n const q = new Uint32Array(p.length*2 - 1);\n for (let i = 0; i < p.length; i++){\n for (let j = 0; j < p.length; j++) {\n q[i+j] += p[j];\n }\n }\n \n const quadratic = [];\n for (let i = 0; i < q.length; i++){\n quadratic.push({name: i - p.length + 1, value: q[i]*q[i]});\n }\n return quadratic\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":901,"value":"quadraticHeight = 80/(4*(1+quadRadius2D)*(1+quadRadius2D))","pinned":true,"hidden":false,"mode":"ojs"},{"id":896,"value":"quadraticScale = 72/(1+quadRadius2D)","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"quadraticData2D = {\n const p = new Uint32Array(quadRadius2D+1);\n for (let i = 0; i <= (quadRadius2D+1)/2; i++){\n for (let j = 0; j <= quadRadius2D/2; j++) {\n p[i+j]++;\n }\n }\n const q = new Uint32Array(p.length*2 - 1);\n for (let i = 0; i < p.length; i++){\n for (let j = 0; j < p.length; j++) {\n q[i+j] += p[j];\n }\n }\n \n let max = 0;\n const quadratic2D = [];\n for (let i = 0; i < q.length; i++){\n const c = q[i];\n const q2 = [];\n for(let j = 0; j < q.length; j++){\n const val = c * q[j];\n if (val > max) max = val;\n q2.push(val);\n }\n quadratic2D.push(q2);\n }\n const norm = 4*(quadRadius2D+1)/max;\n for (let i = 0; i < q.length; i++){\n for(let j = 0; j < q.length; j++){\n quadratic2D[i][j] *= norm;\n }\n }\n return quadratic2D\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"chartHeight2D = width/4 | 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"chartHeight3D = width*2/3 | 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":1074,"value":"startAngle = Math.PI/10","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"import {chart as pyramidChart} with {pyramidData as data, chartHeight2D as height} from \"@mbostock/d3-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"import {chart as pyramidChart2D} with {pyramidData2D as data, width, startAngle, pyramidScale as scale, chartHeight3D as height, color, showText} from '@jobleonard/importable-3d-bar-chart-port'","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"import {chart as quadraticStack} with {quadraticData as data, chartHeight2D as height} from \"@mbostock/d3-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":889,"value":"import {chart as quadraticChart2D} with {quadraticData2D as data, width, startAngle, quadraticScale as scale, chartHeight3D as height, color, showText} from '@jobleonard/importable-3d-bar-chart-port'","pinned":true,"hidden":false,"mode":"ojs"},{"id":916,"value":"showText = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":886,"value":"color = (v) => '#AEF'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}