From f707961dfdf6ff8886e86818c63d4d63b14ab934 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Thu, 6 Apr 2023 08:47:45 -0700
Subject: [PATCH] WIP p5 sketch of procedurally generated transit maps

---
 content/blog/2022/11/transit-maps/index.md  |  7 ++++
 content/blog/2022/11/transit-maps/sketch.js | 40 +++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 content/blog/2022/11/transit-maps/index.md
 create mode 100644 content/blog/2022/11/transit-maps/sketch.js

diff --git a/content/blog/2022/11/transit-maps/index.md b/content/blog/2022/11/transit-maps/index.md
new file mode 100644
index 0000000..718f12d
--- /dev/null
+++ b/content/blog/2022/11/transit-maps/index.md
@@ -0,0 +1,7 @@
+---
+title: "Transit Maps"
+date: 2022-11-16T22:46:40-08:00
+draft: true
+---
+
+{{< figures/p5 id="sketch" >}}
diff --git a/content/blog/2022/11/transit-maps/sketch.js b/content/blog/2022/11/transit-maps/sketch.js
new file mode 100644
index 0000000..b8e32f0
--- /dev/null
+++ b/content/blog/2022/11/transit-maps/sketch.js
@@ -0,0 +1,40 @@
+const sketch = p => {
+    const backgroundColor = p.color(255);
+    const gridColor = p.color(180);
+
+    p.setup = () => {
+        const sketchContainer = document.querySelector('#sketch');
+        const canvasWidth = parseFloat(getComputedStyle(sketchContainer).width);
+        let canvas = p.createCanvas(canvasWidth, canvasWidth);
+        canvas.canvas.removeAttribute('style');
+        sketchContainer.appendChild(canvas.canvas);
+
+        p.pixelDensity(p.displayDensity());
+        p.angleMode(p.DEGREES);
+    };
+
+    p.draw = () => {
+        p.background(backgroundColor);
+        p.strokeWeight(1 / p.displayDensity());
+        p.stroke(gridColor);
+
+        const canvasHeight = p.height;
+        const canvasBase = canvasHeight * p.tan(30);
+        const gridHeight = p.height / 16.0;
+        const skip = 2 * gridHeight * p.tan(30);
+
+        for (let i = gridHeight; i < canvasHeight; i += gridHeight) {
+            p.line(0, i, p.width, i);
+        }
+
+        for (let b = -p.width; b < p.width; b += skip) {
+            p.line(b, 0, b + canvasBase, p.height);
+        }
+
+        for (let b = -p.width; b < p.width; b += skip) {
+            p.line(b, p.height, b + canvasBase, 0);
+        }
+    };
+};
+
+new p5(sketch, 'sketch');