OK it's sort of done

05/genuary05.py

@@ -46,7 +46,12 @@ print("""
 
 <h1>Genuary 2026 - 05</h1>
 
-<p>Write "Genuary". Avoid using a font</p>
+<p>Prompt: Write "Genuary". Avoid using a font</p>
+
+<p>I wrote "Genuary" using the Boxy SVG editor and then played around with it a bit
+in Python and did a simple animation with JavaScript (move your mouse!)</p>
+
+<p><a href="../">Back</a></p>
 
 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 """)
@@ -59,6 +64,8 @@ for i in range(-100, 100, 5):
 print("""
 </svg>
 
+<p><a href="https://git.tilde.town/bombinans/genuary2026/src/branch/main/05/genuary05.py">The Python script</p>
+
 <script src="animate.js">
 </script>
 

05/index.html

@@ -10,7 +10,12 @@
 
 <h1>Genuary 2026 - 05</h1>
 
-<p>Write "Genuary". Avoid using a font</p>
+<p>Prompt: Write "Genuary". Avoid using a font</p>
+
+<p>I wrote "Genuary" using the Boxy SVG editor and then played around with it a bit
+in Python and did a simple animation with JavaScript (move your mouse!)</p>
+
+<p><a href="../">Back</a></p>
 
 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 
@@ -97,6 +102,8 @@
 
 </svg>
 
+<p><a href="https://git.tilde.town/bombinans/genuary2026/src/branch/main/05/genuary05.py">The Python script</p>
+
 <script src="animate.js">
 </script>
 

06/animate.js

@@ -0,0 +1,140 @@
+
+const WIDTH = 800;
+const HEIGHT = 800;
+const NCRITTERS = 10;
+const CLOSE = 20;
+const BOUNCE = 0.02;
+const STUN = 10;
+const MIN_RADIUS = 2;
+const HIDE_SPEED = 10.5;
+
+const pointer = { x: 0, y: 0 };
+
+const critters = [];
+
+let lights = "off";
+
+function dist(c1, c2) {
+    const dx = c1.x - c2.x;
+    const dy = c1.y - c2.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+class Critter {
+    constructor(i) {
+        this.i = i;
+        this.x = Math.random() * WIDTH;
+        this.y = Math.random() * HEIGHT;
+        this.vx = Math.random() * 0.1 - 0.05;
+        this.vy = Math.random() * 0.1 - 0.05;
+        this.status = "go";
+   }
+    init() {
+        const i0 = `c00${this.i}`;
+        this.elt = document.getElementById(i0);
+        console.log(`elt ${i0} ${this.elt}`);
+    }
+    go_v(pos, vel) {
+        if( pos < 10 ) {
+            return vel + 0.01;
+        } else if ( pos > WIDTH - 10 ) {
+            return vel - 0.01;
+        } else {
+            return vel + Math.random() * 0.01 - 0.005;
+        }
+    }
+    update() {
+        if( this.status === "hide" ) {
+            if( this.tick > STUN ) {
+                this.tick--;
+                this.elt.setAttribute("r", this.tick + MIN_RADIUS);
+            } else {
+                this.hide_vec = Math.atan2(this.y - pointer.y, this.x - pointer.x);
+                this.vx = Math.cos(this.hide_vec) * HIDE_SPEED;
+                this.vy = Math.sin(this.hide_vec) * HIDE_SPEED;
+            }
+        }
+        if( this.status === "collide" ) {
+            this.tick--;
+            if( this.tick === 0 ) {
+                this.status = "go";
+                this.elt.setAttribute("fill", "blue");
+            }
+        }
+        if( this.status === "go" ) {
+            const collisions = critters.filter((c) => c.i != this.i && dist(c, this) < CLOSE);
+            if( collisions.length > 0 ) {
+                const hit = collisions[0];
+                this.status = "collide";
+                this.tick = 20;
+                this.elt.setAttribute("fill", "red");
+                this.vx = (this.x - collisions[0].x) * BOUNCE;
+                this.vy = (this.y - collisions[0].y) * BOUNCE;
+                hit.status = "collide";
+                hit.tick = 20;
+                hit.vx = -this.vx;
+                hit.vy = -this.vy;
+            } else {
+                this.vx = this.go_v(this.x, this.vx);
+                this.vy = this.go_v(this.y, this.vy);
+            }
+        }
+        this.x += this.vx;
+        this.y += this.vy;
+        this.elt.setAttribute("cx", this.x);
+        this.elt.setAttribute("cy", this.y);
+    }
+}
+
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    const svg = document.getElementsByTagName("svg")[0];
+    if (svg) { // Check if container exists
+
+        for( let i = 0; i < NCRITTERS; i++ ) {
+            const c = new Critter(i);
+            c.init(i);
+            c.update();
+            critters.push(c);
+        }
+
+        svg.addEventListener("click", () => {
+            const dark = document.getElementById("dark");
+            if( lights === "on" ) {
+                lights = "off";
+                dark.setAttribute("fill-opacity", "0.8");
+                for( const c of critters ) {
+                    c.status = "go";
+                }
+            } else {
+                lights = "on";
+                dark.setAttribute("fill-opacity", "0");
+                for( const c of critters ) {
+                    c.status = "hide";
+                    c.tick = Math.random() * 10 + 15;
+                }
+            }
+        });
+    } else {
+    }
+
+    
+
+});
+
+
+function animate() {
+    requestAnimationFrame(animate);
+/*    const rect = svg.getBoundingClientRect();
+    const x = pointer.x - rect.left;
+    const y = pointer.y - rect.top;
+ */   for( const c of critters ) {
+        c.update();
+    }
+}
+
+animate();
+
+
+

06/index.html

@@ -0,0 +1,43 @@
+
+<html>
+<head>
+	<title>etc.mikelynch.org | Genuary 2026</title>
+    <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+
+<div id="main">
+
+<h1>Genuary 2026 - </h1>
+
+<p>Prompt: Lights on/off. Make something that changes when you switch on or off the “digital” lights.</p>
+
+<p></p>
+
+<div id="container">
+<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
+<rect id="dark" x="0" y="0" width="800" height="800" fill="black" fill-opacity="0.8"></rect>
+<circle id="c000" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c001" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c002" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c003" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c004" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c005" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c006" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c007" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c008" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+<circle id="c009" r="10" cx="100" cy="100" fill="blue" fill-opacity="0.5"></circle>
+</svg>
+
+</div>
+<p><a href="../">Back</a></p>
+
+
+
+
+<script src="animate.js">
+</script>
+
+</body>
+</html>
+

dist/05/index.html

@@ -10,7 +10,12 @@
 
 <h1>Genuary 2026 - 05</h1>
 
-<p>Write "Genuary". Avoid using a font</p>
+<p>Prompt: Write "Genuary". Avoid using a font</p>
+
+<p>I wrote "Genuary" using the Boxy SVG editor and then played around with it a bit
+in Python and did a simple animation with JavaScript (move your mouse!)</p>
+
+<p><a href="../">Back</a></p>
 
 <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 
@@ -97,6 +102,8 @@
 
 </svg>
 
+<p><a href="https://git.tilde.town/bombinans/genuary2026/src/branch/main/05/genuary05.py">The Python script</p>
+
 <script src="animate.js">
 </script>
 

dist/index.html

@@ -17,6 +17,7 @@ on the Fedivers at <a href="https://old.mermaid.town/@fsvo">@fsvo@old.mermaid.to
 	<li><a href="02/">2: twelve principles of animation</a></li>
 	<li><a href="03/">3: Fibonacci forever</a></li>
 	<li><a href="04/">4: Low res</a></li>
+	<li><a href="05/">5: Write "Genuary". Avoid using a font.</a></li>
 </ul>
 
 

template.html

@@ -0,0 +1,28 @@
+
+<html>
+<head>
+	<title>etc.mikelynch.org | Genuary 2026</title>
+    <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+
+<div id="main">
+
+<h1>Genuary 2026 - </h1>
+
+<p>Prompt: </p>
+
+<p></p>
+
+<p><a href="../">Back</a></p>
+
+
+
+<p><a href="https://git.tilde.town/bombinans/genuary2026/src/branch/main/06/genuary05.py">The Python script</p>
+
+<script src="animate.js">
+</script>
+
+</body>
+</html>
+