Day 9: ASCII

Summary: I wanted to make a snake game, or the classic "read pixels from input and turn them into ASCII chars", but ended up making a tripping version of matrix.
AlbertQM · Jan 15, 2024 · fa39ca6 · fa39ca6
1 parent 983ca6e
commit fa39ca6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/9/index.html b/9/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="../reset.css" type="text/css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="../p5.min.js"></script>
+    <script src="./index.js"></script>
+    <title>Genuary 2024 - Day 9</title>
+  </head>
+  <body></body>
+</html>
diff --git a/9/index.js b/9/index.js
@@ -0,0 +1,40 @@
+const CHARS =
+  " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~";
+const TEXT_SIZE = 15;
+const PERIOD = 0.0000005;
+let hasClicked = false;
+
+function setup() {
+  colorMode(HSB);
+  textAlign(CENTER);
+
+  const canvas = createCanvas(innerWidth, innerHeight);
+  canvas.mouseClicked(() => (hasClicked = !hasClicked));
+
+  fill("white");
+  textSize(TEXT_SIZE);
+}
+
+function draw() {
+  background(0, 0, 0);
+  for (let row = 0; row < innerWidth; row += TEXT_SIZE) {
+    for (let col = 0; col < innerHeight; col += TEXT_SIZE) {
+      if (hasClicked) {
+        stroke(360 * tan(frameCount * col * row * PERIOD), 100, 100);
+      } else {
+        stroke("white");
+      }
+      text(pickChar(sin(frameCount * col * row * PERIOD)), row, col);
+    }
+  }
+}
+
+function windowResized() {
+  resizeCanvas(innerWidth, innerHeight);
+}
+
+function pickChar(continuousValue) {
+  continuousValue = Math.max(-1, Math.min(1, continuousValue));
+
+  return CHARS.charAt(Math.floor((continuousValue + 1) * CHARS.length) / 2);
+}
diff --git a/index.html b/index.html
@@ -61,6 +61,7 @@
         >Day 7: "Progress bar / indicator / loading animation"</a
       >
       <a href="./8/index.html">Day 8: "Chaotic system"</a>
+      <a href="./9/index.html">Day 9: "ASCII"</a>
     </main>
   </head>
   <body></body>