const toggleCameraButton = document.getElementById('toggleCamera'); const captureFrameButton = document.getElementById('captureFrame'); const video = document.getElementById('webcam'); const canvas = document.getElementById('ditheredOutput'); const context = canvas.getContext('2d'); let stream = null; let isCameraOn = false; const lowResWidth = 160; // Gameboy camera resolution: 160×144 const lowResHeight = 144; video.style.width = lowResWidth + 'px'; video.style.height = lowResHeight + 'px'; toggleCameraButton.addEventListener('click', async () => { if (!isCameraOn) { try { let constraints = { video: true }; if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { constraints = { video: { facingMode: 'environment' } }; } stream = await navigator.mediaDevices.getUserMedia(constraints); video.srcObject = stream; video.style.display = 'block'; isCameraOn = true; toggleCameraButton.textContent = 'Turn Camera Off'; captureFrameButton.disabled = false; captureFrameButton.classList.add('active'); video.addEventListener('loadeddata', () => { canvas.width = lowResWidth; canvas.height = lowResHeight; requestAnimationFrame(processFrame); }); } catch (err) { console.error('Failed to access the camera: ', err); } } else { stream.getTracks().forEach(track => track.stop()); video.style.display = 'none'; isCameraOn = false; toggleCameraButton.textContent = 'Turn Camera On'; captureFrameButton.disabled = true; captureFrameButton.classList.remove('active'); } }); captureFrameButton.addEventListener('click', () => { const link = document.createElement('a'); link.href = canvas.toDataURL('image/png'); link.download = 'frame.png'; link.click(); }); function processFrame() { if (!isCameraOn) return; // 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; if (videoAspect > canvasAspect) { sw = video.videoHeight * canvasAspect; sh = video.videoHeight; sx = (video.videoWidth - sw) / 2; sy = 0; } else { sw = video.videoWidth; sh = video.videoWidth / canvasAspect; sx = 0; sy = (video.videoHeight - sh) / 2; } context.drawImage(video, sx, sy, sw, sh, 0, 0, lowResWidth, lowResHeight); const frame = context.getImageData(0, 0, lowResWidth, lowResHeight); applyFloydSteinbergDithering(frame); context.putImageData(frame, 0, 0); requestAnimationFrame(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) => { const index = getPixelIndex(x, y); data[index] = value; data[index + 1] = value; 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; // 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); } if (x - 1 >= 0 && y + 1 < height) { const idx = getPixelIndex(x - 1, y + 1); data[idx] = clamp(data[idx] + quantError * 3 / 16); } if (y + 1 < height) { const idx = getPixelIndex(x, y + 1); data[idx] = clamp(data[idx] + quantError * 5 / 16); } if (x + 1 < width && y + 1 < height) { const idx = getPixelIndex(x + 1, y + 1); data[idx] = clamp(data[idx] + quantError * 1 / 16); } }; // 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); } } } function clamp(value) { return Math.max(0, Math.min(255, value)); }