NatureOfCode2/force3.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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
    <head>
        <title>Force 2: Friction Force</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            var mu = 0.1;

            class Mover {
                constructor(x, y, m = 1) {
                    this.pos = createVector(x, y);
                    this.velocity = createVector() /*p5.Vector.random2D().mult(5)*/;
                    this.acceleration = createVector();
                    this.mass = m;
                    this.radius = sqrt(this.mass) * 10;
                }

                edges() {
                    if (this.pos.y >= (height - this.radius)) {
                        this.pos.y = height - this.radius;
                        this.velocity.y *= -1;
                    }

                    if (this.pos.x >= (width - this.radius)) {
                        this.pos.x = width - this.radius;
                        this.velocity.x *= - 1;
                    } else if (this.pos.x <= 0) {
                        this.pos.x = this.radius;
                        this.velocity.x *= -1;
                    }
                }

                applyForce(force) {
                    this.acceleration.add(p5.Vector.div(force, this.mass)); // F = m * a => a = F / m (1) => a = F;
                }

                update() {
                    this.velocity.add(this.acceleration);
                    this.pos.add(this.velocity);
                    this.acceleration.set(0, 0);
                }

                show() {
                    stroke(255);
                    strokeWeight(3);
                    fill(255, 100);
                    ellipse(this.pos.x, this.pos.y, this.radius * 2);
                }

                friction() {
                    let diff = height - (this.pos.y + this.radius);

                    if (diff < 1) {
                        let friction = this.velocity.copy().normalize().mult(-1);
                        let normal = this.mass;
                        friction.setMag(mu * normal);
                        this.applyForce(friction);
                    }
                }
            }

            var movers = [];

            function setup() {
                createCanvas(800, 600);

                for (let i = 0; i < 10; i++) {
                    movers.push(new Mover(random(width), random(height), random(1, 10)));
                }
                // movers.push(new Mover(width/2, height/2, 4));
            }

            function draw() {
                let wind = createVector(0.1, 0);
                let gravity = createVector(0, 0.2);
                background(0);

                for (let index = 0; index < movers.length; index++) {
                    const mover = movers[index];

                    if (mouseIsPressed) {
                        mover.applyForce(wind);
                    }

                    mover.applyForce(p5.Vector.mult(gravity, mover.mass)); // weight = gravity acceleration * mass
                    mover.friction();
                    mover.update();
                    mover.edges();
                    mover.show();
                }
            }
        </script>
    </head>
</html>