NatureOfCode2/auto-agent4.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
    <head>
        <title>Autonomous Agent 4 - Wander Steering Behavior</title>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.5.0/lib/p5.min.js"></script>
        <script>
            class Vehicle {
                constructor(x, y) {
                    this.pos = createVector(x, y);
                    this.velocity = createVector(0 ,0);
                    this.acceleration = createVector();
                    this.mass = 1;
                    this.maxSpeed = 6;
                    this.radius = 16;
                    this.maxForce = 0.4;
                    this.thresholdToSlow = 100;
                }

                wander() {
                    let force = p5.Vector.random2D();
                    this.applyForce(force);
                }

                arrive(target) {
                    let force = p5.Vector.sub(target, this.pos);
                    let distance = force.mag();
                    if (distance < this.thresholdToSlow) {
                        let desiredSpeed = map(distance, 0, this.thresholdToSlow, 0, this.maxSpeed);
                        force.setMag(desiredSpeed);
                    } else {
                        force.setMag(this.maxSpeed);
                    }

                    force.sub(this.velocity);
                    force.limit(this.maxForce);
                    this.applyForce(force);
                }

                seek(target) {
                    // let desiredVelocity = p5.Vector.sub(target, this.pos);
                    // desiredVelocity.setMag(this.maxSpeed); // My strategy is to select a desired velocity equals to max speed (other strategies could have been selected).
                    // let steeringForce = p5.Vector.sub(desiredVelocity, this.velocity);
                    // steeringForce.limit(this.maxForce);
                    // this.applyForce(steeringForce);

                    let force = p5.Vector.sub(target, this.pos);
                    force.setMag(this.maxSpeed);
                    force.sub(this.velocity);
                    force.limit(this.maxForce);
                    this.applyForce(force);
                }

                edges() {
                    if (this.pos.y >= (height - this.radius)) {
                        this.pos.y = height - this.radius;
                        this.velocity.y *= -1;
                    } else if (this.pos.y <= 0) {
                        this.pos.y = 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.velocity.limit(this.maxSpeed);
                    this.pos.add(this.velocity);
                    this.acceleration.set(0, 0);
                }

                show() {
                    stroke(255);
                    strokeWeight(2);
                    fill(255);
                    push();
                    translate(this.pos.x, this.pos.y);
                    rotate(this.velocity.heading());
                    triangle(-this.radius, - this.radius /2 , -this.radius, this.radius/2, this.radius, 0);
                    pop();
                }
            }

            let vehicle;

            function setup() {
                createCanvas(800, 600);
                vehicle = new Vehicle(100, 100);
            }

            function draw() {
                background(0);

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