WIP p5 sketch of procedurally generated transit maps

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" >}}

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');