From 44ffbdc794146db8a357d41b53d58396569db156 Mon Sep 17 00:00:00 2001
From: Joshua Bell <inexorabletash@gmail.com>
Date: Sat, 27 Oct 2018 18:22:10 -0700
Subject: [PATCH] Convert to hires, allow saving

---
 index.html | 142 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 132 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 16a14e3..3c3bdc0 100644
--- a/index.html
+++ b/index.html
@@ -4,11 +4,9 @@
 video, canvas { border: 2px dotted black; }
 </style>
 
-canvas:<br>
-<canvas id=can width=280 height=192></canvas>
+<canvas id=quant width=140 height=192 style="width: 280px; height: 192px;"></canvas>
 <br>
-quantized:<br>
-<canvas id=quant width=280 height=192></canvas>
+<button id=save>Save</button>
 
 <script>
 const palette = [
@@ -24,25 +22,45 @@ const palette = [
 
 (async function() {
   const $ = document.querySelector.bind(document);
+
+  let hires_buffer = new Uint8Array(8192);
+
+  $('#save').addEventListener('click', e => {
+    const blob = new Blob([hires_buffer], {type: 'application/octet-stream'});
+    const anchor = document.createElement('a');
+    anchor.download = 'image.bin';
+    anchor.href = URL.createObjectURL(blob);
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(anchor.href);
+  });
+
+
   try {
     const mediaStream = await navigator.getDisplayMedia({video:true});
     const vid = document.createElement('video');
     vid.srcObject = mediaStream;
     vid.play();
 
-    const can = $('#can');
-    const ctx = can.getContext('2d');
-
     const quant = $('#quant');
     const qctx = quant.getContext('2d');
+
+    const can = document.createElement('canvas');
+    can.width = quant.width;
+    can.height = quant.height;
+    const ctx = can.getContext('2d');
     ctx.imageSmoothingQuality = 'high';
+
+    const indexes = new Array(can.width * can.height);
+
     setInterval(() => {
       ctx.drawImage(vid, 0, 0, can.width, can.height);
 
       const imagedata = ctx.getImageData(0, 0, can.width, can.height);
-      // TODO: modify data
 
-      quantize(imagedata);
+      quantize(imagedata, indexes);
+      hires(indexes, hires_buffer);
 
       qctx.putImageData(imagedata, 0, 0);
 
@@ -53,6 +71,8 @@ const palette = [
   }
 })();
 
+
+// Distance in 3-space
 function distance(r1,g1,b1,r2,g2,b2) {
   const dr = r1 - r2;
   const dg = g1 - g2;
@@ -60,7 +80,7 @@ function distance(r1,g1,b1,r2,g2,b2) {
   return  Math.sqrt(dr*dr + dg*dg + db*db);
 }
 
-function quantize(imagedata) {
+function quantize(imagedata, indexes) {
   const hash = {};
   for (let i = 0; i < palette.length; ++i) {
     const entry = palette[i];
@@ -119,6 +139,8 @@ function quantize(imagedata) {
       data[i+1] = pi[1];
       data[i+2] = pi[2];
 
+      indexes[i / 4] = index;
+
       // Distribute error
       err(x + 1, y,     err_r * 7/16, err_g * 7/16, err_b * 7/16);
       err(x - 1, y + 1, err_r * 3/16, err_g * 3/16, err_b * 3/16);
@@ -128,4 +150,104 @@ function quantize(imagedata) {
   }
 }
 
+function hires(indexes, buffer) {
+  // Scan line mapping table for Apple II Hi-Res screen.
+  // Index into the array is the y-coordinate. The value
+  // in the array is the offset (in bytes) from the
+  // start of the hi-res screen buffer to the start of the
+  // scan line. The scan line itself is 40 bytes wide.
+  const offsets = [
+    0x0000,0x0400,0x0800,0x0c00,0x1000,0x1400,0x1800,0x1c00,
+    0x0080,0x0480,0x0880,0x0c80,0x1080,0x1480,0x1880,0x1c80,
+    0x0100,0x0500,0x0900,0x0d00,0x1100,0x1500,0x1900,0x1d00,
+    0x0180,0x0580,0x0980,0x0d80,0x1180,0x1580,0x1980,0x1d80,
+    0x0200,0x0600,0x0a00,0x0e00,0x1200,0x1600,0x1a00,0x1e00,
+    0x0280,0x0680,0x0a80,0x0e80,0x1280,0x1680,0x1a80,0x1e80,
+    0x0300,0x0700,0x0b00,0x0f00,0x1300,0x1700,0x1b00,0x1f00,
+    0x0380,0x0780,0x0b80,0x0f80,0x1380,0x1780,0x1b80,0x1f80,
+    0x0028,0x0428,0x0828,0x0c28,0x1028,0x1428,0x1828,0x1c28,
+    0x00a8,0x04a8,0x08a8,0x0ca8,0x10a8,0x14a8,0x18a8,0x1ca8,
+    0x0128,0x0528,0x0928,0x0d28,0x1128,0x1528,0x1928,0x1d28,
+    0x01a8,0x05a8,0x09a8,0x0da8,0x11a8,0x15a8,0x19a8,0x1da8,
+    0x0228,0x0628,0x0a28,0x0e28,0x1228,0x1628,0x1a28,0x1e28,
+    0x02a8,0x06a8,0x0aa8,0x0ea8,0x12a8,0x16a8,0x1aa8,0x1ea8,
+    0x0328,0x0728,0x0b28,0x0f28,0x1328,0x1728,0x1b28,0x1f28,
+    0x03a8,0x07a8,0x0ba8,0x0fa8,0x13a8,0x17a8,0x1ba8,0x1fa8,
+    0x0050,0x0450,0x0850,0x0c50,0x1050,0x1450,0x1850,0x1c50,
+    0x00d0,0x04d0,0x08d0,0x0cd0,0x10d0,0x14d0,0x18d0,0x1cd0,
+    0x0150,0x0550,0x0950,0x0d50,0x1150,0x1550,0x1950,0x1d50,
+    0x01d0,0x05d0,0x09d0,0x0dd0,0x11d0,0x15d0,0x19d0,0x1dd0,
+    0x0250,0x0650,0x0a50,0x0e50,0x1250,0x1650,0x1a50,0x1e50,
+    0x02d0,0x06d0,0x0ad0,0x0ed0,0x12d0,0x16d0,0x1ad0,0x1ed0,
+    0x0350,0x0750,0x0b50,0x0f50,0x1350,0x1750,0x1b50,0x1f50,
+    0x03d0,0x07d0,0x0bd0,0x0fd0,0x13d0,0x17d0,0x1bd0,0x1fd0
+  ];
+
+  const SCREEN_WIDTH = 280;
+  const SCREEN_WIDTH_COLOR = SCREEN_WIDTH/2;
+  const SCREEN_HEIGHT = 192;
+  const PIXEL_BITS_PER_BYTE = 7;
+
+  for (let y = 0; y < SCREEN_HEIGHT; ++y) {
+    let hbas = offsets[y];
+    let hidx = y * SCREEN_WIDTH_COLOR;
+
+    // Process two bytes at a time (20 per scan line) since pixel patterns
+    // repeat every two bytes (7 color pixels).
+    for (let pair = 0; pair < (SCREEN_WIDTH_COLOR / PIXEL_BITS_PER_BYTE); ++pair) {
+      // Count the pixels in each "palette"; the most votes wins the byte
+      let pal1 = 0; // count of "palette 1" (green/violet) pixels
+      let pal2 = 0; // count of "palette 2" (orange/blue) pixels
+
+      // Accumulate the pixel bit-pairs into accum at offset
+      let accum = 0;
+      let offset = 0;
+
+      for (let pixel = 0; pixel < PIXEL_BITS_PER_BYTE; ++pixel) {
+        const index = indexes[hidx++];
+        let bits = 0;
+
+        // Note that pixels are in "reverse" order
+        switch (index) {
+          case 0: bits = 0; break;
+          case 1: bits = 2; ++pal1; break;
+          case 2: bits = 1; ++pal1; break;
+          case 3: bits = 3; break;
+          case 4: bits = 0; break;
+          case 5: bits = 2; ++pal2; break;
+          case 6: bits = 1; ++pal2; break;
+          case 7: bits = 3; break;
+          default:
+            throw new Error(`Invalid palette index: ${index} ${y}`);
+        }
+
+        accum |= ( bits << offset );
+        offset += 2;
+
+        // bits:   01234560123456
+        // pixels: 00112233445566
+
+        // NOTE: This is a poor approximation and doesn't account for white
+        // emerging from any two adjacent lit bits and other NTSC fun.
+
+        if (pixel == 3 || pixel == 6) {
+          // emit byte
+          let b = accum & 0x7f;
+          accum >>= 7;
+          offset = 1;
+
+          if (pal2 > pal1)
+            b |= 0x80;
+
+          buffer[hbas] = b;
+          hbas++;
+
+          pal1 = 0;
+          pal2 = 0;
+        }
+      }
+    }
+  }
+}
+
 </script>