{ // Like the above split function, but with a max recursion depth for the data visualization function split(stride, indices, step) { if (step-- <= 0) return indices; let topLeft = [], topRight = [], bottomLeft = [], bottomRight = []; // Divide indices across four sections in Bayer-order for (let i = 0; i < indices.length; i++) { const idx = indices[i]; switch (i % 4) { case 0: topLeft.push(idx); continue; case 1: bottomRight.push(idx); continue; case 2: topRight.push(idx); continue; case 3: bottomLeft.push(idx); continue; } } // Recursively subdivide indices in each quadrant const stride2 = stride / 2; topLeft = split(stride2, topLeft, step); topRight = split(stride2, topRight, step); bottomLeft = split(stride2, bottomLeft, step); bottomRight = split(stride2, bottomRight, step); // Merge back indices. We merge each quadrant row by row const output = []; // First the top two quadrants for (let y = 0; y < stride2; y++) { const line = y * stride2; for (let x = 0; x < stride2; x++) { output.push(topLeft[x + line]); } for (let x = 0; x < stride2; x++) { output.push(topRight[x + line]); } } // Then the bottom quadrants for (let y = 0; y < stride2; y++) { const line = y * stride2; for (let x = 0; x < stride2; x++) { output.push(bottomLeft[x + line]); } for (let x = 0; x < stride2; x++) { output.push(bottomRight[x + line]); } } return output; } const length = 4 ** 4; const rootIndices = []; for (let i = 0; i < length; i++) rootIndices[i] = i; const finalIndices = split(2 ** 4, rootIndices, maxBayerRecursionSteps); const { ctx, imgData } = getCtx(16, 16, 512); for (let y = 0; y < 16; y++) { for (let x = 0; x < 16; x++) { const idx = x + y * 16; const v = (finalIndices[idx] * 256) / length; imgData.data[idx * 4] = v; imgData.data[idx * 4 + 1] = v; imgData.data[idx * 4 + 2] = v; imgData.data[idx * 4 + 3] = 255; } } ctx.putImageData(imgData, 0, 0); return ctx.canvas; }