add bits to picture

amphinomid · Jun 9, 2024 · 3310f0d · 3310f0d
1 parent 7ad36a4
commit 3310f0d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,9 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <canvas id="background"></canvas>
+    <div id="parent">
+      <canvas id="background"></canvas>
+    </div>
 	<script src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -3,6 +3,7 @@
  * - https://stackoverflow.com/questions/15048279/drawimage-not-working
  * - https://stackoverflow.com/questions/21597456/bad-quality-for-100-both-width-and-height-of-canvas
  * - https://stackoverflow.com/questions/27413768/why-is-ctx-drawimage-only-drawing-part-of-the-video-element-to-canvas
+ * - https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
  */
 
 const canvas = document.getElementById("background");
@@ -12,32 +13,49 @@ image.crossOrigin = "anonymous";
 image.src = "https://amphinomid.github.io/love/happy_together.jpg";
 // image.alt = "Two men dance together in a kitchen."; // TODO: find another way
 let pixels = [];
+let texts = [];
 let debug = true;
 
+function xor(a, b) {
+    return (a + b) % 2;
+}
+
+function add_text(bit, x, y) {
+    const new_div = document.createElement("div");
+    const new_text = document.createTextNode(bit);
+    new_div.appendChild(new_text);
+    const parent_div = document.getElementById("parent");
+    parent_div.appendChild(new_div);
+    new_div.style.position = "absolute";
+    new_div.style.left = x + "px";
+    new_div.style.top = y + "px";
+    return new_div;
+}
+
 image.onload = function() {
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 
-    if (debug) console.log("recording pixels");
-
     // Record pixels
+    if (debug) console.log("recording pixels");
     for (let i = 0; i < canvas.width; i++) {
-        pixels_row = []
+        let pixels_row = []
         for (let j = 0; j < canvas.height; j++) {
             pixel_data = ctx.getImageData(i, j, 1, 1, { colorSpace: "srgb" }).data;
-            pixels_row.append(pixel_data[0] ^ pixel_data[1] ^ pixel_data[2]);
+            pixels_row.push(xor(xor(pixel_data[0], pixel_data[1]), pixel_data[2]));
         }
-        pixels.append(pixels_row);
+        pixels.push(pixels_row);
     }
 
-    if (debug) console.log("creating texts");
-
     // Create texts
-    ctx.font = "10px monospace";
-    for (let i = 0; i < canvas.width; i++) {
-        for (let j = 0; j < canvas.height; j++) {
-            ctx.fillText(pixels[i][j], i, j);
+    if (debug) console.log("creating texts");
+    for (let i = 0; i < canvas.width; i += 5) {
+        let texts_row = [];
+        for (let j = 0; j < canvas.height; j += 5) {
+            let new_div = add_text(pixels[i][j], i, j);
+            texts_row.push(new_div);
         }
+        texts.push(texts_row);
     }
 };
diff --git a/style.css b/style.css
@@ -1,3 +1,10 @@
 body {
     margin: 0;
+    font-family: monospace;
+}
+
+#parent {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
 }