clopen/forall.html at main · atorresen/clopen · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="images/icon.ico">

  <script src="p5/p5.js"></script>

  <title>∀</title>
</head>

<body>

  <div class="graphic" id="forallGraphic"></div>

  <div class="backButton"><a href="index.html">back</a></div>

  <script>
    let citizens = [];
    let radius = 20;

    class Citizen {
      constructor(pos) {
        this.pos = pos;
        this.vel = createVector(0, 0)
        this.speed = 0;
      }

      update() {
        let mouseVector = createVector(mouseX, mouseY)
        if (this.pos.dist(mouseVector) < radius) {
          this.vel = mouseVector.sub(this.pos).normalize().mult(-1);
          this.speed = 6;
        } else {
          this.vel.rotate(random(-0.1, 0.1));
          this.speed = 1;
        }
        this.pos.add(p5.Vector.mult(this.vel, this.speed));
        this.pos.x = constrain(this.pos.x, 0, width)
        this.pos.y = constrain(this.pos.y, 0, height)
        if (this.pos.x == 0 || this.pos.x == width)
          this.vel.x *= -1
        if (this.pos.y == 0 || this.pos.y == height)
          this.vel.y *= -1
      }

      draw() {
        push();
        translate(this.pos.x, this.pos.y);
        if (this.pos.x < width / 2 && this.pos.y < height / 2) {
          fill("blue")
        } else {
          if ((round(this.pos.y) % floor(height / 13)) < 7) {
            fill("red")
          } else {
            fill("white")
          }
        };
        noStroke();
        circle(0, 0, 10);
        pop();
      }
    }

    function setup() {
      createCanvas(0.8 * windowWidth, 0.5 * windowWidth);
      for (let i = 20; i < width; i = i + 20) {
        for (let j = 20; j < height; j = j + 20) {
          citizens.push(new Citizen(createVector(i, j)));
        }
      }
    }

    function draw() {
      background(35);
      for (let citizen of citizens) {
        citizen.update();
        citizen.draw();
      }
    }
  </script>


</body>

</html>