Created
October 10, 2025 03:02
-
-
Save lisajamhoury/aa516fe5c3c487eda9bd78af99955d86 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * DepthDecoder - Converts Kinectron 1.0.1 WebP depth data to Uint16Array | |
| * | |
| * Kinectron 1.0.1 sends depth data as a WebP-encoded image where each pixel's | |
| * R and G channels encode a 16-bit depth value (R = low byte, G = high byte). | |
| * This class decodes that image and returns a standard Uint16Array. | |
| * | |
| * Usage: | |
| * <script src="DepthDecoder.js"></script> | |
| * | |
| * let decoder = new DepthDecoder(320, 288); | |
| * | |
| * decoder.decode(kinectronDepthData, (depthArray) => { | |
| * // depthArray is now a Uint16Array of depth values | |
| * console.log(depthArray[0]); // Access depth at index 0 | |
| * }); | |
| * | |
| * // In a function | |
| * function gotDepth(depthData) { | |
| * // Decode the Kinectron WebP depth data to a Uint16Array | |
| * depthDecoder.decode(depthData, (decodedArray) => { | |
| * depthBuffer = decodedArray; | |
| * }); | |
| * } | |
| * | |
| * | |
| * | |
| */ | |
| class DepthDecoder { | |
| constructor(width, height) { | |
| this.width = width; | |
| this.height = height; | |
| this.pg = null; // Graphics buffer for decoding (created on first use) | |
| } | |
| /** | |
| * Decodes Kinectron depth data to Uint16Array | |
| * | |
| * @param {Object} depthData - The depth data object from Kinectron | |
| * @param {Function} callback - Called with the decoded Uint16Array: callback(depthArray) | |
| */ | |
| decode(depthData, callback) { | |
| // Create the graphics buffer on first use (after p5 is initialized) | |
| if (!this.pg) { | |
| this.pg = createGraphics(this.width, this.height); | |
| this.pg.pixelDensity(1); // Ensure 1:1 pixel mapping (important for high-DPI displays) | |
| } | |
| // Get the base64 WebP image data | |
| // Kinectron stores it in either raw.data or src depending on version | |
| const imageData = depthData.raw?.data || depthData.src; | |
| // Load the WebP image | |
| loadImage(imageData, (img) => { | |
| // Draw the decoded image to our graphics buffer | |
| this.pg.clear(); | |
| this.pg.image(img, 0, 0, this.width, this.height); | |
| this.pg.loadPixels(); | |
| // Create array to store depth values | |
| const depthArray = new Uint16Array(this.width * this.height); | |
| // Extract depth values from pixels | |
| // Each pixel has 4 values in the array: [R, G, B, A] | |
| // Depth is encoded in R (low byte) and G (high byte) channels | |
| for (let i = 0; i < this.width * this.height; i++) { | |
| const pixelIndex = i * 4; | |
| const lowByte = this.pg.pixels[pixelIndex]; // R channel (0-255) | |
| const highByte = this.pg.pixels[pixelIndex + 1]; // G channel (0-255) | |
| // Reconstruct 16-bit depth value from two 8-bit values | |
| // Bitwise OR combines: lowByte + (highByte * 256) | |
| depthArray[i] = lowByte | (highByte << 8); | |
| } | |
| // Return the decoded array via callback | |
| callback(depthArray); | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment