JAN18

ronikaufman · Jan 18, 2023 · 7ec382e · 7ec382e
1 parent dfc16f6
commit 7ec382e
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 1 deletion.
diff --git a/JAN11-20/JAN18/JAN18_1.gif b/JAN11-20/JAN18/JAN18_1.gif
diff --git a/JAN11-20/JAN18/JAN18_2.gif b/JAN11-20/JAN18/JAN18_2.gif
diff --git a/JAN11-20/JAN18/sketch.js b/JAN11-20/JAN18/sketch.js
@@ -0,0 +1,86 @@
+/*
+Genuary 2023
+JAN.18 "A grid inside a grid inside a grid"
+By Roni Kaufman
+https://ronikaufman.github.io
+*/
+
+const N_FRAMES = 120;
+let s = 24, n = 16, margin = 4;
+let startTiles, endTiles;
+
+function setup() {
+    createCanvas((n+2*margin)*s, (n+2*margin)*s);
+    noStroke();
+    textSize(s*0.8);
+    textAlign(CENTER, CENTER);
+
+    initTiles();
+}
+
+function draw() {
+    background("#fffbe6");
+
+    let t = (frameCount%N_FRAMES)/N_FRAMES;
+    t = easeInOutQuart(t);
+
+    if (t == 0) {
+        [endTiles, startTiles] = [startTiles, endTiles];
+    }
+
+    for (let i = 0; i < sq(n); i++) {
+        let a = startTiles[i];
+        let b = endTiles[i];
+        let x = lerp(a.x, b.x, t);
+        let y = lerp(a.y, b.y, t);
+        let rot = lerp(a.rot, b.rot, t);
+        let c = a.char;
+
+        push();
+        translate(x, y);
+        rotate(rot);
+        text(c, 0, 0);
+        pop();
+    }
+}
+
+function initTiles() {
+    startTiles = [];
+    endTiles = [];
+    for (let i = 0; i < n; i++) {
+        let x = (margin+i+1/2)*s;
+        for (let j = 0; j < n; j++) {
+            let y = (margin+j+1/2)*s;
+            let c = random(["🟦", "🟥", "🟨", "⬜"]);
+            let xOffset = random(-1, 1)*(margin-1/2)*s;
+            let yOffset = random(-1, 1)*(margin-1/2)*s;
+            let rot = random(-PI, PI);
+
+            startTiles.push({
+                x: x - xOffset,
+                y: y - yOffset,
+                rot: -rot,
+                char: c
+            });
+
+            endTiles.push({
+                x: x + xOffset,
+                y: y + yOffset,
+                rot: rot,
+                char: c
+            });
+        }
+    }
+}
+
+// source: https://easings.net
+function easeInOutQuart(x) {
+    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+}
+
+function keyPressed() {
+    if (key === 's') {
+        initTiles();
+        saveGif("JAN18.gif", 2*N_FRAMES, {delay: 0, units: "frames"});
+    }
+}
diff --git a/README.md b/README.md
@@ -98,6 +98,8 @@ Reference: ["Wanderer (rotations)" on the Tilings Encyclopedia](https://tilings.
 ### JAN. 18
 > Definitely not a grid
 
+<img src="./JAN11-20/JAN18/JAN18_1.gif" width="40%"/> <img src="./JAN11-20/JAN18/JAN18_2.gif" width="40%"/>
+
 ### JAN. 19
 > Black and white
 

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <script src="./p5.min.js" type="text/javascript"></script>
-    <script src="JAN11-20/JAN17/sketch.js" type="text/javascript"></script>
+    <script src="JAN11-20/JAN18/sketch.js" type="text/javascript"></script>
   </head>
   <body style = "width: 100%; height: 100%; background-color: 0; margin: 0; display: flex; justify-content: center; align-items: center;">
   </body>