29:null 2a:["$","title",null,{"children":"Buttons | Aleksander | Observable"}] 2f:T481,function gaussianBlur(context, radius) { const input = context.getImageData(0, 0, width, height); const output = context.createImageData(width, height); //if (!(radius > 0)) return source.slice(); //let target = new Uint8ClampedArray(source.length); const kernel2 = bellcurvish2D(radius); const {min, max} = Math; for(let y = 0; y < height; y++) { const line = y * width * 4; for (let x = 0; x < width; x++) { let r = 0; let g = 0; let b = 0; for (let dy = -radius; dy <= radius; dy++) { const line_dy = min(max(0, y + dy), height-1) * width; for (let dx = -radius; dx <= radius; dx++) { const idx = (min(max(0, x + dx), width-1) + line_dy) * 4; const weight = kernel2[radius + dx][radius + dy]; r += input.data[idx] * weight; g += input.data[idx + 1] * weight; b += input.data[idx + 2] * weight; } } const cIdx = x*4 + line; output.data[cIdx] = r; output.data[cIdx+1] = g; output.data[cIdx+2] = b; output.data[cIdx+3] = 255; } context.putImageData(output, 0, 0, 0, y, width, 1); } }30:[{"id":"2d747586c41e42c49f2d57b9d87da83a409e9cbf1a68be3e4f9be39a54ada1f982d68b0c8bc21413e852d706fe7a9cb3ea9ef9edcf364b3cde7a1a4e03c30143","href":"https://static.observableusercontent.com/files/2d747586c41e42c49f2d57b9d87da83a409e9cbf1a68be3e4f9be39a54ada1f982d68b0c8bc21413e852d706fe7a9cb3ea9ef9edcf364b3cde7a1a4e03c30143","name":"Meisje_met_de_parel.jpg","type":"image/jpeg","lastModified":1676926830851.366,"size":114245}] 2d:{"id":"960d9d08940249eb","slug":null,"title":"Buttons","thumbnail":"8b154fc284bc84ec15352310c6363d1c6da3457b6a0501497d71e1113424ad37","access_level":"public","create_time":"$D2023-02-20T20:59:10.378Z","update_time":"$D2023-02-20T21:51:49.274Z","view_time":null,"first_public_time":"$D2023-02-20T20:59:10.378Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f8bd23fb65b0c2a8","login":"fallenartist","name":"Aleksander","avatar_url":"https://avatars-next.observableusercontent.com/bfafc2ba125265418f3da4af2d2aed36cdd227f1b2db87e9da76a4a3add844d6","tier":"starter_2024"},"version":51,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b54e3c43bd8e2da","login":"fallenartist","name":"Aleksander","avatar_url":"https://avatars-next.observableusercontent.com/bfafc2ba125265418f3da4af2d2aed36cdd227f1b2db87e9da76a4a3add844d6","tier":null}],"members":[{"type":"individual","id":"9b54e3c43bd8e2da","login":"fallenartist","name":"Aleksander","avatar_url":"https://avatars-next.observableusercontent.com/bfafc2ba125265418f3da4af2d2aed36cdd227f1b2db87e9da76a4a3add844d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Buttons","cells":[{"id":0,"value":"# Buttons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"{\n const context = DOM.context2d(width, height, 1);\n context.canvas.style = \"max-width: 100%;\";\n context.drawImage(image, 0, 0, width, height);\n convolveY2(context, Kx, Ky);\n gaussianBlur(context, 10);\n yield context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"image = Object.assign(await FileAttachment(\"Meisje_met_de_parel.jpg\").image(), {style: \"max-width: 100%; display: block;\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"Kx = [-1, 0, +1, -2, 0, +2, -1, 0, +1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Ky = [-1, -2, -1, 0, 0, 0, +1, +2, +1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"function convolveY2(context, Kx, Ky) {\n const input = context.getImageData(0, 0, width, height);\n const output = context.createImageData(width, height);\n //yield context.canvas;\n for (let y = 1, i = (width + 1) * 4; y < height - 1; ++y, i += 8) {\n for (let x = 1; x < width - 1; ++x, i += 4) {\n let cx = 0, cy = 0;\n for (let yk = y - 1, j = 0; yk <= y + 1; ++yk) {\n for (let xk = x - 1; xk <= x + 1; ++xk, ++j) {\n let i = (yk * width + xk) << 2;\n cx += input.data[i] * Kx[j];\n cy += input.data[i] * Ky[j];\n }\n }\n output.data[i + 0] = \n output.data[i + 1] = \n output.data[i + 2] = Math.hypot(cx, cy);\n output.data[i + 3] = 255;\n }\n context.putImageData(output, 0, 0, 0, y, width, 1);\n //yield context.canvas;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"import {bellcurvish2D} from \"@jobleonard/symmetric-nearest-neighbour-all-the-things\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"width = image.naturalWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"height = image.naturalHeight","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"