diff options
| -rw-r--r-- | js/pico-cam/video.js | 12 |
1 files changed, 9 insertions, 3 deletions
diff --git a/js/pico-cam/video.js b/js/pico-cam/video.js index 33d08df..b2f68a5 100644 --- a/js/pico-cam/video.js +++ b/js/pico-cam/video.js @@ -7,7 +7,7 @@ const context = canvas.getContext('2d'); let stream = null; let isCameraOn = false; const lowResWidth = 160; // Gameboy camera resolution: 160×144 -const lowResHeight = 120; // If I use the GB camera resolution the image gets distorted +const lowResHeight = 144; toggleCameraButton.addEventListener('click', async () => { if (!isCameraOn) { @@ -49,7 +49,7 @@ captureFrameButton.addEventListener('click', () => { function processFrame() { if (!isCameraOn) return; - // Crop and draw the central part of the video frame + // Crop and draw the middle part of the video frame const videoAspect = video.videoWidth / video.videoHeight; const canvasAspect = lowResWidth / lowResHeight; let sx, sy, sw, sh; @@ -74,6 +74,7 @@ function processFrame() { function applyFloydSteinbergDithering(imageData) { const { data, width, height } = imageData; + // Helper to access and set pixel values const getPixelIndex = (x, y) => (y * width + x) * 4; const getPixelValue = (x, y) => data[getPixelIndex(x, y)]; const setPixelValue = (x, y, value) => { @@ -83,14 +84,17 @@ function applyFloydSteinbergDithering(imageData) { data[index + 2] = value; }; + // Helper that clamps a value between 0 and 255 const clamp = (value) => Math.max(0, Math.min(255, value)); + // Process a single pixel const processPixel = (x, y) => { const oldPixel = getPixelValue(x, y); - const newPixel = oldPixel < 128 ? 0 : 255; // 1-bit black and white + const newPixel = oldPixel < 128 ? 0 : 255; // Make it 1-bit black and white setPixelValue(x, y, newPixel); const quantError = oldPixel - newPixel; + // Spread the error to neighboring pixels if (x + 1 < width) { const idx = getPixelIndex(x + 1, y); data[idx] = clamp(data[idx] + quantError * 7 / 16); @@ -109,6 +113,8 @@ function applyFloydSteinbergDithering(imageData) { } }; + // Process each pixel in the image one by one + // FIXME: There has to be a better way to do this, right? for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { processPixel(x, y); |