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>