Particle-Js/game.js at main · Nikims/Particle-Js · 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
111
112
113
114
115
updates = 0;
mousePositions = [];
clock = "tick";
class Particle {
  x = 0;
  y = 0;
  speedX = 0;
  speedY = 0;
  acellX = 0;
  acellY = 0;
  beenAliveFor = 0;
  applyMomentum(momx, momY) {
    this.speedX += momx;
    this.speedY += momY;
  }
  applyForce(forceX, forceY) {
    this.acellX += forceX;
    this.acellY += forceY;
  }
  update() {
    this.beenAliveFor++;
    this.x += this.speedX;
    this.y += this.speedY;
    this.speedX += this.acellX;
    this.speedY += this.acellY;
    if (this.y > 500) {
      this.speedY = 0;
      this.speedX = 0;
    }
  }
  drawSelf() {
    context.fillRect(this.x, this.y, 5, 5);
  }
  constructor(source) {
    this.x = source.x;
    this.y = source.y;
    this.speedX = Math.random() * 10 - 5;
    this.speedY = Math.random() * 10 - 5;
    this.applyForce(0, 0.3);
    if (mousePositions[0] != undefined && mousePositions[1] != undefined) {
      if (
        Math.sqrt(
          Math.pow(mouseX - mousePositions[0].x, 2) +
            Math.pow(mouseY - mousePositions[0].y, 2)
        ) < 20
      ) {
        this.applyMomentum(
          0.9 * (mouseX - mousePositions[0].x),
          0.9 * (mouseY - mousePositions[0].y)
        );
      } else {
        this.applyMomentum(
          0.3 * (mouseX - mousePositions[0].x),
          0.3 * (mouseY - mousePositions[0].y)
        );
      }
    }
  }
}

class ParticleSystem {
  source;
  particles = [];
  constructor(source) {
    this.source = source;
    for (let i = 0; i < 20 + Math.round(Math.random() * 80); i++) {
      this.particles.push(new Particle(this.source));
    }
  }
  updateParticles() {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].update();

      if (
        this.particles[i].beenAliveFor >
        150 + Math.round(Math.random() * 20)
      ) {
        this.particles.splice(i, 1);
      }
    }
  }
  drawParticles() {
    for (let i = 0; i < this.particles.length; i++) {
      this.particles[i].drawSelf();
    }
  }
}
particleSystems = [];
function update() {
  if (updates % 2 == 0) {
    if (clock == "tick") {
      clock = "tock";
    } else {
      clock = "tick";
    }
  }
  if (clock == "tick") {
    mousePositions[0] = { x: mouseX, y: mouseY };
  } else {
    mousePositions[1] = { x: mouseX, y: mouseY };
  }

  for (i = 0; i < particleSystems.length; i++) {
    particleSystems[i].updateParticles();
  }
  updates++;
  if (updates % 10 == 0) {
    particleSystems.push(new ParticleSystem({ x: mouseX, y: mouseY }));
  }
}
function draw() {
  for (i = 0; i < particleSystems.length; i++) {
    particleSystems[i].drawParticles();
  }
}