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;
}
}