30:T44b,md`To apply the convolution operator ${tex`*`}, for each pixel ${tex`a_{i,j}`} in the image ${tex`\mathbf{A}`}, center the ${tex`3 \times 3`} kernel ${tex`\mathbf{K}`} around the pixel, multiply each element of the kernel by its corresponding pixel value, and then sum. The gradient along ${tex`x`} at ${tex`\langle i,j \rangle`} is thus ${tex.block`g_{x(i,j)} = {\begin{bmatrix}-1&0&+1\\-2&0&+2\\-1&0&+1\end{bmatrix}} * {\begin{bmatrix}a_{i-1,j-1}&a_{i,j-1}&a_{i+1,j-1}\\a_{i-1,j}&a_{i,j}&a_{i+1,j}\\a_{i-1,j+1}&a_{i,j+1}&a_{i+1,j+1}\end{bmatrix}},`} and the gradient along ${tex`y`} at ${tex`\langle i,j \rangle`} is ${tex.block`g_{y(i,j)} = {\begin{bmatrix}-1&-2&-1\\0&0&0\\+1&+2&+1\end{bmatrix}} * {\begin{bmatrix}a_{i-1,j-1}&a_{i,j-1}&a_{i+1,j-1}\\a_{i-1,j}&a_{i,j}&a_{i+1,j}\\a_{i-1,j+1}&a_{i,j+1}&a_{i+1,j+1}\end{bmatrix}},`} or in standard form, ${tex.block` \begin{aligned} g_{x(i,j)} &= -a_{i-1,j-1} + a_{i+1,j-1} -2a_{i-1,j} + 2a_{i+1,j} -a_{i-1,j+1} + a_{i+1,j+1},\\ g_{y(i,j)} &= -a_{i-1,j-1} - 2a_{i,j-1} - a_{i+1,j-1} + a_{i-1,j+1} + 2a_{i,j+1} + a_{i+1,j+1}.\\ \end{aligned}`}`31:T42a,function* convolveRgb2(context, Kx, Ky, input = context.getImageData(0, 0, width, height)) { const output = context.createImageData(width, height); yield context.canvas; for (let y = 1, i = (width + 1) * 4; y < height - 1; ++y, i += 8) { for (let x = 1; x < width - 1; ++x, i += 4) { let rx = 0, ry = 0; let gx = 0, gy = 0; let bx = 0, by = 0; for (let yk = y - 1, j = 0; yk <= y + 1; ++yk) { for (let xk = x - 1; xk <= x + 1; ++xk, ++j) { let i = (yk * width + xk) << 2; rx += input.data[i + 0] * Kx[j]; ry += input.data[i + 0] * Ky[j]; gx += input.data[i + 1] * Kx[j]; gy += input.data[i + 1] * Ky[j]; bx += input.data[i + 2] * Kx[j]; by += input.data[i + 2] * Ky[j]; } } output.data[i + 0] = Math.hypot(rx, ry); output.data[i + 1] = Math.hypot(gx, gy); output.data[i + 2] = Math.hypot(bx, by); output.data[i + 3] = 255; } context.putImageData(output, 0, 0, 0, y, width, 1); yield context.canvas; } }32:[{"id":"d26a07d04dfe1512632d29c7c3d04b58f0427f5ba7b56e4a6d73f98fac422cc5a1aba94a62c49b3886b685006224bf110e0c34b8ac243060992de0b047420b18","href":"https://static.observableusercontent.com/files/d26a07d04dfe1512632d29c7c3d04b58f0427f5ba7b56e4a6d73f98fac422cc5a1aba94a62c49b3886b685006224bf110e0c34b8ac243060992de0b047420b18","name":"blue.jpg","type":"image/jpeg","lastModified":1572922863888.435,"size":788900}] 2e:{"title":"Sobel Operator","cells":[{"id":568,"value":"md`# Sobel Operator\n\nThe [Sobel operator](https://en.wikipedia.org/wiki/Sobel_operator) approximates the gradient (the rate and direction of change) of the intensity of an image. In other words, it detects edges.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"viewof replay = html`