herbowicz · herbowicz · Feb 1, 2018 · Mar 15, 2018 · Oct 30, 2024 · Oct 30, 2024
diff --git a/README.md b/README.md
@@ -1,5 +1,69 @@
-# 12 Lines
-12 Lines Font utilizes a 3-column-3-row grid as start and end points for 6 vertical and 6 horizontal segments of lines that are allowed to join these points in the shortest way possible. 
+# 12-Bit
+12-Bit font utilizes a 3-column-3-row grid as start and end points for 6 vertical and 6 horizontal segments of lines that are allowed to join these points in the shortest way possible. 
 With this concept in mind, out of 2^12 = 4096 signs available, only some were carefully chosen to represent all large and small characters of the standard Latin alphabet. Enjoy!
 
 [Demo](https://herbowicz.github.io/12/) (start typing, try w/caps lock too)
+
+## Sample text
+![sample text](image.png)
+
+## Letters and numbers
+![alt text](signs.png)
+
+Different font widths can obscure readability.
+![alt text](font-width.png)
+
+## A Unique Approach to Cryptography and Design
+
+**A novel approach to representing characters using a minimal set of lines.**
+
+This project explores the concept of the 12-Bit font, a unique way to represent characters using a binary code and basic line segments. This approach offers exciting possibilities in cryptography, design, and other security applications.
+
+### How it Works
+
+1. **Character Representation:**
+
+Each character is represented by a 12-bit binary code. Each bit corresponds to a specific line segment within a 3x3 grid.
+
+```
+[1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1] // A
+[1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1] // B
+[1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0] // C
+```
+
+2. **Canvas Rendering:**
+
+The binary code is used to determine which line segments to draw on a canvas. For example, the first bit indicates whether the top horizontal line should be drawn.
+
+```javascript
+ctx.moveTo(s+l,s+d); if (sign[at][0]) { ctx.lineTo(s*2+l,s+d); } 
+ctx.moveTo(s*2+l,s+d); if (sign[at][1]) { ctx.lineTo(s*3+l,s+d); }
+// ...
+```
+
+### Benefits and Applications
+
+1. **Cryptography:**
+
+* **Steganography:** Embed information within images or other media using the minimalist nature of the font.
+* **Security Tokens:** Create unique visual patterns for security tokens or watermarks.
+* **Cryptography:** Utilize the binary representation as input for cryptographic algorithms.
+
+2. **Design:**
+
+* **Unique Typography:** Add a distinctive aesthetic to design projects with the font's style.
+* **Minimalist Design:** Align your project with minimalist design principles using the font's simplicity.
+* **Interactive Art:** Create interactive art installations or digital experiences with the font.
+
+3. **Accessibility:**
+
+* **Simplified Character Recognition:** The reduced number of elements can make character recognition easier for certain applications, such as OCR.
+* **Universal Design:** Adapt the font for various screen sizes and resolutions due to its simplicity.
+
+### Future Directions
+
+* **Dynamic Font Generation:** Explore techniques to generate custom fonts based on specific design constraints or security requirements.
+* **Font Optimization:** Optimize the font for different rendering contexts, such as web, print, and mobile devices.
+* **Security Analysis:** Conduct a thorough security analysis to identify potential vulnerabilities and strengthen the font's security properties.
+
+The 12-Bit font offers a promising approach with potential applications in various fields. By leveraging its unique characteristics, we can unlock new possibilities for creative endeavors and security advancements.
diff --git a/font-width.png b/font-width.png
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -1,196 +1,28 @@
-<!DOCTYPE HTML>
-<html>
-  <head>
-    <style>
-      body {
-        margin: 0 auto;
-        padding: 0;
-        overflow: hidden;
-      }
-      div {
-        color: #ddd; 
-        float: right; 
-      }
-    </style>
-  </head>
-  <body>
-    <div>Width: <span id="width"></span> <button onclick="w++; update();">+</button> <button onclick="w--; update();">-</button> Size: <span id="size"></span> <button onclick="s++; update();">+</button> <button onclick="s--; update();">-</button></div>
-    <canvas id="canvas"></canvas>
-    <script>
-    var canvas = document.getElementById("canvas");
-    var ctx = canvas.getContext("2d");
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-
-sign = [
-[1,1, 1,1, 0,0, 1,0, 0,1, 1,0], //!
-[0,0, 0,0, 0,0, 1,0, 1,0, 0,0], //"
-[1,1, 1,1, 1,1, 1,1, 1,1, 1,1], //#
-[1,1, 1,1, 1,1, 1,0, 1,1, 0,1], //$
-[0,1, 1,1, 1,0, 0,1, 1,1, 1,0], //%
-[1,0, 1,1, 1,1, 1,1, 1,1, 0,0], //&
-[0,0, 0,0, 0,0, 0,0, 1,0, 0,0], //'
-[1,0, 0,0, 1,0, 1,1, 0,0, 0,0], //(
-[0,1, 0,0, 0,1, 0,0, 0,0, 1,1], //)
-[0,0, 1,1, 0,0, 1,1, 1,1, 1,1], //*
-[0,0, 1,1, 0,0, 0,0, 1,1, 0,0], //+
-[0,0, 0,0, 0,0, 0,0, 0,1, 0,0], //,
-[0,0, 1,1, 0,0, 0,0, 0,0, 0,0], //-
-[0,0, 0,0, 1,0, 0,0, 0,0, 0,0], //.
-[0,1, 1,1, 1,0, 0,1, 1,1, 1,0], ///
-[1,1, 0,0, 1,1, 1,1, 1,1, 1,1], //0
-[1,0, 0,0, 1,1, 0,0, 1,1, 0,0], //1
-[1,0, 1,0, 1,1, 0,1, 1,0, 0,0], //2
-[1,1, 0,1, 1,1, 0,0, 0,0, 1,1], //3
-[0,0, 1,1, 0,0, 1,0, 0,0, 1,1], //4
-[0,1, 0,1, 1,1, 0,0, 1,0, 0,1], //5
-[1,1, 1,1, 1,1, 1,1, 0,0, 0,1], //6
-[1,1, 0,0, 0,0, 1,0, 0,0, 1,1], //7
-[1,1, 1,1, 1,1, 1,1, 0,0, 1,1], //8
-[1,1, 1,1, 1,1, 1,0, 0,0, 1,1], //9
-[0,0, 1,0, 1,0, 0,0, 0,0, 0,0], //:
-[1,0, 1,0, 1,0, 1,0, 1,0, 0,0], //;
-[0,1, 1,0, 0,1, 0,0, 1,1, 0,0], //< 
-[0,0, 1,1, 1,1, 0,0, 0,0, 0,0], //=
-[1,0, 0,1, 1,0, 0,0, 1,1, 0,0], //>
-[1,1, 0,1, 0,0, 0,0, 0,1, 1,0], //?
-[1,1, 1,0, 1,1, 0,1, 0,1, 1,1], //@
-[1,1, 1,1, 0,0, 1,1, 0,0, 1,1], //A
-[1,0, 1,1, 1,1, 1,1, 1,0, 0,1], //B
-[1,1, 0,0, 1,1, 1,1, 0,0, 0,0], //C
-[1,0, 0,1, 1,1, 1,1, 1,0, 0,1], //D 
-[1,1, 1,0, 1,1, 1,1, 0,0, 0,0], //E
-[1,1, 1,0, 0,0, 1,1, 0,0, 0,0], //F
-[1,1, 0,1, 1,1, 1,1, 0,0, 0,1], //G
-[0,0, 1,1, 0,0, 1,1, 0,0, 1,1], //H
-[1,1, 0,0, 1,1, 0,0, 1,1, 0,0], //I
-[1,1, 0,0, 1,1, 0,1, 0,0, 1,1], //J
-[0,1, 1,0, 0,1, 1,1, 1,1, 0,0], //K
-[0,0, 0,0, 1,1, 1,1, 0,0, 0,0], //L
-[1,1, 0,0, 0,0, 1,1, 1,0, 1,1], //M
-[1,0, 0,0, 0,1, 1,1, 1,1, 1,1], //N
-[1,1, 0,0, 1,1, 1,1, 0,0, 1,1], //O
-[1,1, 1,1, 0,0, 1,1, 0,0, 1,0], //P
-[1,1, 1,1, 0,1, 1,0, 0,1, 1,0], //Q
-[1,1, 1,1, 0,1, 1,1, 0,1, 1,0], //R
-[1,1, 1,1, 1,1, 1,0, 0,0, 0,1], //S
-[1,1, 0,0, 0,0, 0,0, 1,1, 0,0], //T
-[0,0, 0,0, 1,1, 1,1, 0,0, 1,1], //U
-[0,0, 0,1, 1,0, 1,1, 0,1, 1,0], //V
-[0,0, 0,0, 1,1, 1,1, 0,1, 1,1], //W
-[0,0, 1,1, 0,0, 1,0, 1,1, 0,1], //X
-[0,0, 1,1, 0,0, 1,0, 0,1, 1,0], //Y
-[1,1, 1,1, 1,1, 0,1, 0,0, 1,0], //Z
-[1,0, 0,0, 1,0, 1,1, 0,0, 0,0], //[
-[1,0, 1,1, 0,1, 1,0, 1,1, 0,1], //\
-[0,1, 0,0, 0,1, 0,0, 0,0, 1,1], //]
-[1,0, 0,0, 0,0, 1,0, 0,0, 0,0], //^
-[0,0, 0,0, 1,1, 0,0, 0,0, 0,0], //_
-[1,0, 0,0, 0,0, 0,0, 1,0, 0,0], //`
-[0,0, 1,0, 1,1, 0,1, 0,1, 0,0], //a
-[0,0, 1,1, 1,1, 1,1, 0,0, 0,1], //b
-[0,0, 1,1, 1,1, 0,1, 0,0, 0,0], //c
-[0,0, 1,1, 1,1, 0,1, 0,0, 1,1], //d
-[1,0, 1,0, 1,1, 1,1, 1,0, 0,0], //e
-[0,1, 1,1, 0,0, 0,0, 1,1, 0,0], //f
-[0,1, 0,1, 1,1, 0,0, 1,0, 1,1], //g
-[0,0, 1,1, 0,0, 1,1, 0,0, 0,1], //h
-[0,0, 1,1, 1,1, 0,0, 0,1, 0,0], //i
-[0,0, 0,0, 1,1, 0,0, 0,0, 0,1], //j
-[0,0, 1,1, 0,1, 1,1, 0,1, 0,0], //k
-[0,0, 0,0, 1,1, 0,1, 0,0, 0,0], //l
-[0,0, 1,1, 0,0, 0,1, 0,1, 0,1], //m
-[0,0, 1,1, 0,0, 0,1, 0,0, 0,1], //n
-[0,0, 1,1, 1,1, 0,1, 0,0, 0,1], //o
-[0,1, 0,1, 1,0, 0,0, 1,1, 1,0], //p
-[1,0, 1,0, 0,1, 1,0, 1,1, 0,0], //q
-[0,0, 1,1, 0,0, 0,1, 0,0, 0,0], //r
-[0,0, 0,1, 1,0, 0,0, 0,1, 0,0], //s
-[0,0, 1,1, 0,1, 0,0, 1,1, 0,0], //t
-[0,0, 0,0, 1,1, 0,1, 0,0, 0,1], //u
-[0,0, 1,0, 0,1, 0,0, 0,1, 0,1], //v
-[0,0, 0,0, 1,1, 0,1, 0,1, 0,1], //w
-[0,0, 1,1, 0,0, 0,1, 1,1, 1,0], //x
-[0,0, 0,1, 1,1, 0,0, 1,0, 1,1], //y 
-[0,0, 1,0, 0,1, 0,0, 0,1, 0,0], //z
-[0,1, 1,0, 0,1, 0,0, 1,1, 0,0], //{
-[0,0, 0,0, 0,0, 0,0, 1,1, 0,0], //|
-[1,0, 0,1, 1,0, 0,0, 1,1, 0,0], //}
-[1,0, 0,1, 0,0, 1,0, 1,0, 1,0]  //~
-]
-
-var s = 12; //size
-var l = 0; //left
-var d = 0; //down
-var w = 2; //width
-on = true;
-
-var update = function(){
-document.getElementById('width').innerHTML = w;
-document.getElementById('size').innerHTML = s;
-}
-update();
-
-var clear = function(){
-  ctx.clearRect(s/2+l,s/2+d,s*3,s*3);
-} 
-
-var cursor = function(){
-    if (on) {
-      clear();
-      ctx.beginPath();  
-      ctx.lineWidth=w;
-      ctx.moveTo(s+l,s*3+d); 
-      ctx.lineTo(s*3+l,s*3+d); 
-      ctx.stroke(); 
-      on = false;
-    } else {
-      clear();
-      on = true;
-    }
-}
-setInterval(cursor, 500);
-
-document.onkeydown = function(e) {
-    if (e.keyCode == 8) { clear(); l -= s*3; clear(); 
-      if(l < 0) { l = 0; }
-    }  //backspace
-}
-document.onkeypress = function(evt) {
-    evt = evt || window.event;
-    var charCode = evt.keyCode || evt.which;
-    if (charCode == 13 || l > canvas.width-s*3) { clear(); l = 0; d += s*3; return; }  //enter+EOL
-    if (charCode == 32) { clear(); l += s*3; return; }  //space
-
-    if(charCode > 260) alert('Polish letters coming soon...');
-    var at = charCode - 33;
-
-    clear();
-
-    ctx.beginPath();  ctx.lineWidth=w;
-    //horizontal lines
-    ctx.moveTo(s+l,s+d); if (sign[at][0]) { ctx.lineTo(s*2+l,s+d); } 
-    ctx.moveTo(s*2+l,s+d); if (sign[at][1]) { ctx.lineTo(s*3+l,s+d); }
-
-    ctx.moveTo(s+l,s*2+d); if (sign[at][2]) { ctx.lineTo(s*2+l,s*2+d); } 
-    ctx.moveTo(s*2+l,s*2+d); if (sign[at][3]) { ctx.lineTo(s*3+l,s*2+d); }
-
-    ctx.moveTo(s+l,s*3+d); if (sign[at][4]) { ctx.lineTo(s*2+l,s*3+d); } 
-    ctx.moveTo(s*2+l,s*3+d); if (sign[at][5]) { ctx.lineTo(s*3+l,s*3+d); }
-    //vertical lines
-    ctx.moveTo(s+l,s+d); if (sign[at][6]) { ctx.lineTo(s+l,s*2+d); } 
-    ctx.moveTo(s+l,s*2+d); if (sign[at][7]) { ctx.lineTo(s+l,s*3+d); }
-
-    ctx.moveTo(s*2+l,s+d); if (sign[at][8]) { ctx.lineTo(s*2+l,s*2+d); } 
-    ctx.moveTo(s*2+l,s*2+d); if (sign[at][9]) { ctx.lineTo(s*2+l,s*3+d); }
-
-    ctx.moveTo(s*3+l,s+d); if (sign[at][10]) { ctx.lineTo(s*3+l,s*2+d); } 
-    ctx.moveTo(s*3+l,s*2+d); if (sign[at][11]) { ctx.lineTo(s*3+l,s*3+d); }
-
-    ctx.stroke();
-    l += s*3; 
-}
-
-    </script>
-  </body>
-</html>   
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>12-Bit</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <div id="width">
+    Width:
+    <span></span>
+    <button class="1">+</button>
+    <button class="-1">-</button>
+  </div>
+  <div id="size">
+    Size:
+    <span></span>
+    <button class="1">+</button>
+    <button class="-1">-</button>
+  </div>
+  <canvas id="canvas"></canvas>
+  <script src="script.js"></script>
+</body>
+
+</html>