diff options
author | elioat <elioat@tilde.institute> | 2024-06-30 18:44:30 -0400 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2024-06-30 18:44:30 -0400 |
commit | 94ef47906aa9a3587efe2f88b508ebbe098ef342 (patch) | |
tree | 89e03fa48692ae5eaaf914da972e3b160912a43d /js/pico-cam/pico-cam.js | |
parent | f29758cfe8e233fa9d011f3eb7083123bfd40cd5 (diff) | |
download | tour-94ef47906aa9a3587efe2f88b508ebbe098ef342.tar.gz |
*
Diffstat (limited to 'js/pico-cam/pico-cam.js')
-rw-r--r-- | js/pico-cam/pico-cam.js | 131 |
1 files changed, 131 insertions, 0 deletions
diff --git a/js/pico-cam/pico-cam.js b/js/pico-cam/pico-cam.js new file mode 100644 index 0000000..f51179e --- /dev/null +++ b/js/pico-cam/pico-cam.js @@ -0,0 +1,131 @@ +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)); +} |