28:null 29:["$","title",null,{"children":"Canvas Gauss Blur | Dmitry Baranovskiy | Observable"}] 2f:T504,/** * Internal helper method * @param pixels - the Canvas pixles * @param kernel - the Gaussian blur kernel * @param ch - the color channel to apply the blur on * @param gray - flag to show RGB or Grayscale image */ gauss_internal = (pixels, kernel, ch, gray) => { const data = pixels.data; const w = pixels.width; const h = pixels.height; const buff = new Uint8Array(w * h); const mk = Math.floor(kernel.length / 2); const kl = kernel.length; // First step process columns for (let j = 0, hw = 0; j < h; j++, hw += w) { for (let i = 0; i < w; i++) { let sum = 0; for (let k = 0; k < kl; k++) { let col = i + (k - mk); col = col < 0 ? 0 : col >= w ? w - 1 : col; sum += data[(hw + col) * 4 + ch] * kernel[k]; } buff[hw + i] = sum; } } // Second step process rows for (let j = 0, offset = 0; j < h; j++, offset += w) { for (let i = 0; i < w; i++) { let sum = 0; for (let k = 0; k < kl; k++) { let row = j + (k - mk); row = row < 0 ? 0 : row >= h ? h - 1 : row; sum += buff[row * w + i] * kernel[k]; } const off = (j * w + i) * 4; !gray ? (data[off + ch] = sum) : (data[off] = data[off + 1] = data[off + 2] = sum); } } }30:[] 2c:{"id":"eaab4713bc191ae1","slug":null,"title":"Canvas Gauss Blur","thumbnail":"baa0c7e18e874a470c7f2ce8d3fce89fd071ed62d1e469f0e900757d0a7d29aa","access_level":"public","create_time":"$D2022-10-26T07:00:20.421Z","update_time":"$D2022-11-01T06:16:44.657Z","view_time":null,"first_public_time":"$D2022-11-01T06:17:16.276Z","fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":3,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024"},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null}],"members":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Canvas Gauss Blur","cells":[{"id":0,"value":"# Canvas Gauss Blur","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"canvas = {\n const context = DOM.context2d(width, height);\n context.fillStyle = \"#fff\";\n context.font = \"150px Helvetica\";\n context.fillRect(0, 0, width, height);\n context.fillStyle = \"#000\";\n context.fillText(\"abc\", 20, 180);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"gauss(canvas, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"makeGaussKernel = (σ, GK = 6) => {\n const dim = parseInt(Math.max(3, GK * σ));\n const sqrtSigmaPi2 = Math.sqrt(Math.PI * 2) * σ;\n const s2 = 2 * σ ** 2;\n let sum = 0;\n\n const kernel = new Float32Array(dim - !(dim & 1));\n const half = parseInt(kernel.length / 2);\n for (let j = 0, i = -half; j < kernel.length; i++, j++) {\n kernel[j] = Math.exp(-(i * i) / s2) / sqrtSigmaPi2;\n sum += kernel[j];\n }\n for (let i = 0; i < dim; i++) {\n kernel[i] /= sum;\n }\n return kernel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"/**\n * Gaussian blur example\n * @param canvas - HTML5 Canvas element\n * @sigma sigma - the standard deviation\n */\ngauss = (canvas, sigma) => {\n const context = canvas.getContext(\"2d\");\n const pixels = context.getImageData(0, 0, canvas.width, canvas.height);\n const kernel = makeGaussKernel(sigma);\n\n // Blur a cahnnel (RGB or Grayscale)\n for (let ch = 0; ch < 3; ch++) {\n gauss_internal(pixels, kernel, ch, false);\n }\n // Apply the modified pixels\n context.putImageData(pixels, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"