From 52e0c3acd07487478f8bedd4ca70e424ddfa8a6c Mon Sep 17 00:00:00 2001
From: Jonathan Dahan <git@jonathan.is>
Date: Sat, 12 Aug 2023 16:22:06 -0400
Subject: [PATCH] multiple flowers

---
 random-03.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 random-03.html
diff --git a/random-03.html b/random-03.html
new file mode 100644
index 0000000..308f144
--- /dev/null
+++ b/random-03.html
@@ -0,0 +1,85 @@
+<head>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
+    <script src="https://unpkg.com/p5.js-svg@1.5.1"></script>
+
+    <script>
+        let scaling = 2
+        let width = 432 * scaling
+        let height = 297 * scaling
+        let magnitude = Math.sqrt(width * width + height * height) / 7
+        let contrast = 20
+        let white = 255
+        const pad = width / 2
+        let start = {x: width/2, y: height/2}
+        let coords = []
+        let flowers = []
+        let flower = []
+
+        function setup() {
+            createCanvas(width, height, SVG);
+            background(white);
+            fill(150);
+            stroke(contrast);
+            coords = randomCoords()
+        }
+
+        function randomCoords(points = 60) {
+            return (new Array(points))
+              .fill(0)
+              .map(() => p5.Vector.random2D())
+        }
+
+        function mouseWheel(event) {
+            magnitude += event.delta
+            return false;
+        }
+
+        function mousePressed() {
+            flowers.push(flower)
+        }
+
+        function makeFlower(mouseX, mouseY) {
+            coords = randomCoords()
+
+            return coords.map(({ x, y }) => {
+                const anchor = {
+                    x: constrain(mouseX, 0 + pad, width - pad),
+                    y: constrain(mouseY, 0 + pad, width - pad)
+                }
+                return [
+                    anchor.x,
+                    anchor.y,
+                    mouseX + x * magnitude,
+                    mouseY + y * magnitude
+                ]
+            })
+        }
+
+        function drawFlower(flower) {
+            flower.forEach(([x, y, a, b]) => line(x, y, a, b))
+        }
+
+        function draw() {
+            // var r = frameCount % 200 * Math.sqrt(2);
+            // ellipse(0, 0, r, r);
+
+            background(white - contrast);
+            flower = makeFlower(mouseX, mouseY)
+            drawFlower(flower)
+
+            flowers
+              .slice(0, flowers.length)
+              .forEach(flower => drawFlower(flower))
+        }
+    </script>
+    <style>
+        body {
+            background-color: beige;
+        }
+        main { display: flex; justify-content: center; }
+    </style>
+</head>
+
+<body>
+    <main></main>
+</body>
\ No newline at end of file
