NatureOfCode2/challenge-160.2.html at master · brlebtag/NatureOfCode2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<html>
    <head>
        <title>Challenge #160.2 - Spring Forces</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            let bob;
            let anchor;
            let restLength = 200;
            const K = 0.01;
            let mass = 1;
            let velocity;
            let gravity;
            const G = 1;

            function setup() {
                createCanvas(800, 600);
                bob = createVector(350, 0);
                anchor = createVector(300, 0);
                velocity = createVector(0, 0);
                gravity = createVector(0, 0.2);
            }

            function draw() {
                background(112, 50, 126);
                strokeWeight(4);
                stroke(255);
                line(anchor.x, anchor.y, bob.x, bob.y);
                fill(45, 197, 244);
                circle(anchor.x, anchor.y, 32);
                circle(bob.x, bob.y, 64);

                if (mouseIsPressed) {
                    bob.x = mouseX;
                    bob.y = mouseY;
                    velocity.set(0,0);
                }

                let force = p5.Vector.sub(bob, anchor);
                let displacement = force.mag() - restLength;

                force.normalize().mult(-1 * K * displacement);
                // force.div(mass);
                velocity.add(force);
                // gravity.mult(mass * G);
                velocity.add(gravity);
                bob.add(velocity);
                velocity.mult(0.99);
            }
        </script>
    </head>
</html>