Ingen/planets.js at main · dnbk302/Ingen · 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
window.onload = function () {
  const PI = Math.PI;
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    width = (canvas.width = window.innerWidth),
    height = (canvas.height = window.innerHeight),
    sun = particle.create(width / 2, height / 2, 0, 0),
    mercury = particle.create(width / 2 + 100, height / 2, 12, PI / -2),
    earth = particle.create(width / 2 + 200, height / 2, 10, PI / -2),
    jupiter = particle.create(width / 2 + 300, height / 2, 8, PI / -2);
  sun.mass = 20000;

  mercury.addGravitation(sun);
  earth.addGravitation(sun);
  jupiter.addGravitation(sun);

  render();

  function render() {
    context.clearRect(0, 0, width, height);

    // mercury.gravitateTo(sun);
    mercury.update();

    // earth.gravitateTo(sun);
    earth.update();

    // jupiter.gravitateTo(sun);
    jupiter.update();

    context.beginPath();
    context.fillStyle = "#ffff00";
    context.arc(sun.x, sun.y, 20, 0, 2 * PI);
    context.fill();

    context.beginPath();
    context.fillStyle = "#ff0000";
    context.arc(mercury.x, mercury.y, 5, 0, 2 * PI);
    context.fill();

    context.beginPath();
    context.fillStyle = "#0000ff";
    context.arc(earth.x, earth.y, 5, 0, 2 * PI);
    context.fill();

    context.beginPath();
    context.fillStyle = "#00ff00";
    context.arc(
      jupiter.x,
      jupiter.y,
      10,
      0,
      2 * PI
    );
    context.fill();

    //call render method everytime frame gets updated
    requestAnimationFrame(render);
  }
};