diff options
| author | elioat <elioat@tilde.institute> | 2024-06-30 16:54:02 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-06-30 16:54:02 -0400 |
| commit | b89b4715200a404354c8ef8d2ad5b57827b964d4 (patch) | |
| tree | 40587cf98b5c9a6b8c3f094f794b9136aef7780b /js/dither-video | |
| parent | afdf31268d6be9264171dde6a6ebab745ec981fe (diff) | |
| download | tour-b89b4715200a404354c8ef8d2ad5b57827b964d4.tar.gz | |
*
Diffstat (limited to 'js/dither-video')
| -rw-r--r-- | js/dither-video/index.html | 19 | ||||
| -rw-r--r-- | js/dither-video/video.js | 103 |
2 files changed, 0 insertions, 122 deletions
diff --git a/js/dither-video/index.html b/js/dither-video/index.html deleted file mode 100644 index f6918c7..0000000 --- a/js/dither-video/index.html +++ /dev/null @@ -1,19 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Webcam with Dithering</title> - <style> - body { - background-color: beige; - } - </style> -</head> -<body> - <button id="toggleCamera">Turn On Camera</button> - <video id="webcam" autoplay playsinline style="display:none;"></video> - <canvas id="ditheredOutput"></canvas> - <script src="video.js"></script> -</body> -</html> \ No newline at end of file diff --git a/js/dither-video/video.js b/js/dither-video/video.js deleted file mode 100644 index 124fab2..0000000 --- a/js/dither-video/video.js +++ /dev/null @@ -1,103 +0,0 @@ -const toggleCameraButton = document.getElementById('toggleCamera'); -const video = document.getElementById('webcam'); -const canvas = document.getElementById('ditheredOutput'); -const context = canvas.getContext('2d'); - -// IDEA: Turn this into camera, where you can capture frames from the video feed and save them as .png files!? - -let stream = null; -let isCameraOn = false; - -// FIXME: Sort out how to crop the image rather than squish and distort it. -const lowResWidth = 160; // Gameboy camera resolution: 160×144 -const lowResHeight = 120; // If I use the GB camera resolution the image gets distorted - -toggleCameraButton.addEventListener('click', async () => { - if (!isCameraOn) { - try { - stream = await navigator.mediaDevices.getUserMedia({ video: true }); - video.srcObject = stream; - video.style.display = 'block'; - isCameraOn = true; - toggleCameraButton.textContent = 'Turn Camera Off'; - 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'; - } -}); - -function processFrame() { - if (!isCameraOn) return; - - context.drawImage(video, 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; - - // Helpers 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; // Threshold of the pixel value - setPixelValue(x, y, newPixel); - const quantError = oldPixel - newPixel; - - // Spreads 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); - } - }; - - // TODO: This seems like a mad inefficient way to do this, but it does work. Noodle on if it is worth making this more efficient. - // Process all of the pixels - 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)); -} |