wip

2023-06-28 15:52:09 -07:00 · 2023-06-28 15:52:09 -07:00 · eca94231f5
parent 9c6ba61dca
commit eca94231f5
3 changed files with 116 additions and 0 deletions
--- a/generate.sh
+++ b/generate.sh
@ -0,0 +1,8 @@
+ffmpeg \
+  -i llamigos-orig.webm \
+  -vf format=yuv444p,scale=80:150,setsar=1 \
+  -an \
+  -vcodec libvpx-vp9 \
+  -row-mt 1 \
+  -crf 20 \
+  -y llamigos.webm
--- a/index.html
+++ b/index.html
@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Block video encoding test</title>
+        <style type="text/css">
+            .stretchy {
+                width:267px;
+                height: 150px;
+                object-fit: fill;
+                image-rendering: pixelated;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Block video encoding test</h1>
+
+        <h2>Source video</h2>
+        <div>
+            <video id="source" src="llamigos.webm" class="stretchy" muted controls playsinline></video>
+        </div>
+
+        <h2>Work canvas</h2>
+        <div>
+            <canvas id="work" width="80" height="150" class="stretchy"></canvas>
+        </div>
+
+        <script type="text/javascript">
+            let width = 80;
+            let height = 150;
+
+            function fromSRGB(val) {
+                val /= 255;
+                if (val <= 0.04045) {
+                    val /= 12.92;
+                } else {
+                    val = ((val + 0.055) / 1.055) ** 2.4;
+                }
+                val *= 255;
+                return val;
+            }
+
+            function toSRGB(val) {
+                val /= 255;
+                if (val <= 0.0031308) {
+                    val *= 12.92;
+                } else {
+                    val = (val * 1.055) ** (1.0 / 2.4) - 0.055;
+                }
+                val *= 255;
+                return Math.round(val);
+            }
+
+            function luma(r, g, b) {
+                return r * 0.299 + g * 0.586 + b * 0.114;
+            }
+
+            function update() {
+                let ctx = work.getContext('2d');
+                ctx.drawImage(source, 0, 0);
+                let bits = ctx.getImageData(0, 0, width, height);
+                let data = bits.data;
+                for (let y = 0; y < height; y++) {
+                    for (let x = 0; x < width; x++) {
+                        let i = (y * width + x) * 4;
+
+                        let r = fromSRGB(data[i]);
+                        let g = fromSRGB(data[i + 1]);
+                        let b = fromSRGB(data[i + 2]);
+
+                        let gray = luma(r, g, b);
+                        let gray16 = Math.round(gray / 15) * 15;
+
+                        data[i] = toSRGB(gray16);
+                        data[i + 1] = toSRGB(gray16);
+                        data[i + 2] = toSRGB(gray16);
+                    }
+                }
+                ctx.putImageData(bits, 0, 0);
+            }
+
+            let timer = null;
+            source.addEventListener('playing', () => {
+                if (!timer) {
+                    timer = setInterval(update, 1000 / 24);
+                }
+                update();
+            });
+            source.addEventListener('pause', () => {
+                if (timer) {
+                    clearInterval(timer);
+                    timer = null;
+                }
+            });
+        </script>
+    </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,11 @@
+{
+  "name": "blocky6502",
+  "version": "1.0.0",
+  "description": "text-mode-video hack for Atari 800 family",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "brion@pobox.com",
+  "license": "MIT"
+}