Image Color Analyzer

Build a utility that renders a simple colored rectangle to an offscreen WebGL context and extracts the pixel color data for analysis.

Requirements

Your implementation must:

1. Create a WebGL rendering context with the specified width and height
2. Render a solid color rectangle filling the entire viewport with the specified RGBA color
3. Extract the pixel data from the rendered framebuffer
4. Calculate the average color across all pixels
5. Return an object containing:
   • width: The width of the captured region
   • height: The height of the captured region
   • pixels: The raw pixel data as a Uint8Array buffer
   • averageColor: An object with r, g, b, a properties representing the average color values (0-255 range)

Test Cases

• When rendering and reading a 100x100 blue rectangle with RGBA (0.2, 0.5, 0.8, 1.0), the average color should be approximately {r: 51, g: 127, b: 204, a: 255} @test
• When rendering and reading a 50x50 red rectangle with RGBA (1.0, 0.0, 0.0, 1.0), the width and height should be 50, and the average color should be approximately {r: 255, g: 0, b: 0, a: 255} @test
• When the pixel buffer is read, it should contain exactly width * height * 4 bytes @test

Implementation

@generates

API

/**
 * Creates a WebGL context, renders a colored rectangle, and extracts pixel data
 * @param {number} width - Width of the rendering context
 * @param {number} height - Height of the rendering context
 * @param {number} r - Red component (0.0 to 1.0)
 * @param {number} g - Green component (0.0 to 1.0)
 * @param {number} b - Blue component (0.0 to 1.0)
 * @param {number} a - Alpha component (0.0 to 1.0)
 * @returns {Object} Result object with width, height, pixels, and averageColor
 */
function analyzeColor(width, height, r, g, b, a);

module.exports = { analyzeColor };

Dependencies { .dependencies }

gl { .dependency }

Provides headless WebGL rendering context creation.

@satisfied-by