anchored lines

2 years ago · 2113452169
commit 2113452169
1 changed files with 57 additions and 0 deletions
--- a/random-01.html
+++ b/random-01.html
@ -0,0 +1,57 @@
+<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 coords = []
+        let width = 500
+        let mag = width * 1.4
+        let contrast = 20
+        let white = 255
+        const pad = width / 2
+
+        function setup() {
+            createCanvas(width, width, SVG);
+            background(white);
+            fill(150);
+            stroke(contrast);
+
+            while (coords.length < 60) {
+                coords.push(p5.Vector.random2D())
+            }
+        }
+
+        function mouseWheel(event) {
+            mag += event.delta
+            return false;
+        }
+
+        function draw() {
+            // var r = frameCount % 200 * Math.sqrt(2);
+
+            background(white - contrast);
+            coords.forEach(({ x, y }) => {
+                const anchor = {
+                    x: constrain(mouseX, 0 + pad, width - pad),
+                    y: constrain(mouseY, 0 + pad, width - pad)
+                }
+                line(
+                    anchor.x,
+                    anchor.y,
+                    mouseX + x * mag,
+                    mouseY + y * mag
+                )
+            })
+            // ellipse(0, 0, r, r);
+        }
+    </script>
+    <style>
+        body {
+            background-color: beige;
+        }
+    </style>
+</head>
+
+<body>
+    <main></main>
+</body>