JSGravitySimulation/index.html at master · unitedideas/JSGravitySimulation · 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
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gravity Simulation</title>
</head>
<body id="body">

<script>
    let body = document.getElementById('body')
    body.style.backgroundColor = 'black'
    body.style.padding = '0'
    body.style.margin = '0'
    let canvas = document.createElement('canvas')
    canvas.height = window.innerHeight
    canvas.width = window.innerWidth
    canvas.style.border = '1px solid white'
    document.body.appendChild(canvas)

    function rnum(lower, upper) {
        return lower + Math.random() * (upper - lower)
    }

    class Ball {
        constructor() {
            let r = getRandomInt(255)
            let g = getRandomInt(255)
            let b = getRandomInt(255)
            this.radius = Math.random() * 15;
            this.px = rnum(this.radius, canvas.width - this.radius);
            this.py = rnum(this.radius, canvas.height - this.radius);
            this.vx = (Math.random() - .5) * 1;
            this.vy = (Math.random() - .5) * 1;
            this.color = `rgb(${r},${g},${b})`
            this.volume = 4 / 3 * this.radius * 3.14159265359 ** 3 // in cm**3
            this.density = 7.86 // kg/cm**3 (iron)
            this.mass = this.density * this.volume //kg
        }
    }

    let count = 300
    let ball_count = count
    let ball_arr = []
    let gravity = 0.005
    for (let i = 0; i < ball_count; i++) {
        ball_arr.push(new Ball())
    }
    let ctx = canvas.getContext('2d')

    function getRandomInt(max) {
        return Math.floor(Math.random() * Math.floor(max));
    }

    function draw_ball(ball) {
        ctx.beginPath()
        ctx.arc(ball.px, ball.py, ball.radius, 0, 2 * Math.PI, false)
        ctx.fillStyle = ball.color
        ctx.fill()
    }

    function increase_gravity(event) {
        var x = event.x
        var y = event.y
        x -= canvas.offsetLeft
        y -= canvas.offsetTop
        let black_hole = new Ball()
        black_hole.mass = 100000000
        black_hole.px = x
        black_hole.py = y
        black_hole.radius = 5
        black_hole.color = 'white'
        ball_arr.push(black_hole)
    }

    function remove_gravity(event) {
        ball_arr.pop()
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        canvas.addEventListener("mousedown", increase_gravity, false);
        canvas.addEventListener("mouseup", remove_gravity, false);
        for (let i = 0; i < ball_arr.length; i++) {
            let ball = ball_arr[i]
            draw_ball(ball)
            if (ball.px + ball.vx > canvas.width - ball.radius || ball.px + ball.vx < ball.radius) {
                ball.vx *= -.5
            }
            else if (ball.py + ball.vy > canvas.height - ball.radius || ball.py + ball.vy < ball.radius) {
                ball.vy *= -.5
            }
            for (let j = i + 1; j < ball_arr.length; j++) {
                let ball_2 = ball_arr[j]
                let distance_x = ball_2.px - ball.px
                let distance_y = ball_2.py - ball.py
                let r2 = distance_x * distance_x + distance_y * distance_y + 100000 // force
                let force = gravity * (ball.mass * ball_2.mass) / r2
                let r = Math.sqrt(r2)
                distance_x /= r
                distance_y /= r
                let force_x = force * distance_x
                let force_y = force * distance_y
                ball.vx += force_x / ball.mass
                ball.vy += force_y / ball.mass
                ball_2.vx += -force_x / ball_2.mass
                ball_2.vy += -force_y / ball_2.mass
            }
            ball.px += ball.vx
            ball.py += ball.vy
        }
    }

    function main_loop() {
        draw()
        window.requestAnimationFrame(main_loop)
    }

    window.requestAnimationFrame(main_loop)
</script>
</body>
</html>