NatureOfCode2/force1.1.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
<html>
    <head>
        <title>Force 1: Force, Gravity and Wind</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            class Mover {
                constructor(x, y) {
                    this.pos = createVector(x, y);
                    this.velocity = createVector() /*p5.Vector.random2D().mult(5)*/;
                    this.acceleration = createVector();
                    this.mass = 1;
                    this.radius = 16;
                }

                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(force); // 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);
                }
            }

            var mover;

            function setup() {
                createCanvas(800, 600);
                mover = new Mover(width/2, height/2);
            }

            function draw() {
                background(0);

                if (mouseIsPressed) {
                    let wind = createVector(0.1, 0);
                    mover.applyForce(wind);
                }

                let gravity = createVector(0, 0.2);
                mover.applyForce(gravity);

                mover.update();
                mover.edges();
                mover.show();
            }
        </script>
    </head>
</html>