multiple flowers

2 years ago · 52e0c3acd0
parent 2113452169
commit 52e0c3acd0
1 changed files with 85 additions and 0 deletions
--- a/random-03.html
+++ 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>