2DNewtonGravityJS/index.html at master · lubobul/2DNewtonGravityJS · 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css">

    <title>Gravity 2D</title>
</head>

<body>

    <h1 id="header">Welcome to Newton's law of universal gravitation N-body simulation</h1>

    <div class="main-wrapper">

        <div class="simulation-choice-menu">
            <button class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('Sandbox', this)">Sandbox</button>
            <button id="defaultChoice" class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('SolarSystem', this)">Solar System</button>
            <button class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('Particles', this)">Particles</button>
            <button class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('Attraction', this)">Attraction</button>
            <button class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('Repulsion', this)">Repulsion</button>
            <button class="simulation-option menu-options-button" onclick="uiControls.selectSimulationPreset('Explosion', this)">Explosion</button>

            <button class="simulation-option menu-options-button" onclick="uiControls.about()">About</button>
        </div>

        <div class="menu-canvas-wrapper">
            <div class="menu">

                <h3 class="header4">Controls</h3>

                <div style="width:300px;">
                    <h4 class="header4">Speed controls </h4>
                    <button class="simulation-option" onclick="uiControls.slower()">/2</button>
                    <button class="simulation-option" onclick="uiControls.faster()">x2</button>
                </div>

                <div style="width:300px;">
                    <h4 class="header4">Play controls</h4>
                    <button class="simulation-option" id="pause-unpause" onclick="uiControls.pauseUnpause()">Pause</button>
                    <button class="simulation-option" id="pause-unpause" onclick="uiControls.resetSimulation()">Reset</button>
                </div>
                <div style="width:300px;">
                    <h4 class="header4">Static objects</h4>
                    <input id="static-objects" onclick="uiControls.changeStaticObjectsState()" type="checkbox" />
                    <label class="rule2-checkbox-label" id="static-objects-checkbox-label">Disabled</label>
                </div>

                <div style="width:300px;">
                    <h4 class="header4">Clamped object distance</h4>
                    <input id="clamped-distance" onclick="uiControls.changeClampedDistanceState()" type="checkbox" />
                    <label class="rule2-checkbox-label" id="clamped-distance-checkbox-label">Disabled</label>
                </div>

                <div style="width:300px;" id="traces-holder">
                    <h4 class="header4">Traces</h4>
                    <input id="object-traces" onclick="uiControls.changeTracesState()" type="checkbox" />
                    <label class="rule2-checkbox-label" id="object-traces-checkbox-label">Disabled</label>
                </div>

                <div style="width:300px;">
                    <h4 class="header4">Collision</h4>
                    <input id="collision" onclick="uiControls.changeCollisionState()" type="checkbox" />
                    <label class="rule2-checkbox-label" id="object-collision-checkbox-label">Disabled</label>
                </div>

                <div style="width:300px;">
                    <h4 class="header4">Object option</h4>
                    <select style="width:150px" name="objects" id="selected-object" onChange="uiControls.selectObject(this.value)">
                        <option value="moon">Moon</option>
                        <option value="earth">Earth</option>
                        <option value="jupiter">Jupiter</option>
                        <option value="sun">Sun</option>
                    </select>
                </div>
            </div>
            <div class="canvas-holder" oncontextmenu="return false;">

                <div class="stats-wrapper">
                    <div class="simulation-stats-wrapper">
                        <h4 class="stats" id="speed">Speed of time: </h4>
                        <h4 class="stats second-stat" id="days">Days: </h4>
                        <h4 class="stats third-stat" id="fps">FPS: </h4>
                    </div>
                </div>

                <canvas id="canvas" tabindex="0"></canvas>
            </div>
        </div>

    </div>

    <div id="popup" class="my-popup">
        <button class="close-poppup" onclick="uiControls.closeAbout()">Close</button>
        <h2 class="header2">Newtonian Gravity 2D v2.0</h2>
        <h3 class="header4">Git repository </h3>
        <a class="about-info" href="https://github.com/lubobul/2DNewtonGravityJS" target="blank">Get the code here</a>
        <h3 class="header4">About </h3>
        <p class="about-info">
            The big O per frame varies depending on the selected options in the menu. The default FPS cap is 60. The default complexity is O(n*(n-1)) where n = OBJECTS_IN_SIMULATION. Using the experimental features changes big O. For instance turning ON traces changes complexity to O(n * (n-1) * 180) where 180 is a constant determening the size of stored trace coordinates in the trace stack. Enabling colision also adds overhead, however it doesn't change the amount of cycles. P.S. Adding too many objects to the simulation may exeed the capabilities of your browser or PC, thus resulting in lower FPS.
        </p>
        <h3 class="header4">A Bit of History</h3>
        <p class="about-info">This project was started purely as an intent to learn using the HTML5 canvas and applying some calculus in order to draw something interesting. Later on, after achieveing theoretical object attraction and repulsion and mapped static graphs on a canvas, I decided to animate some movement. At this step I introduced a simple object orientated render frame callback using browser's API. First the animated implementation was for 1 static and 1 dynamic objects. Next step was using 2 dynamic objects. A bigger step was introducing interraction between multiple objects. Later I advanced with adding proper time control, which in means brings the tool 1 step closer to simulation. Since it is not a descrete event simulation it seemed necessary to introduce time tracking. Tracing of objects and collision was later introduced as extras.</p>
        <h3 class="header4">Tips</h3>
        <p>For new object - drag across the canvas</p>
        <p>For object stats - right click on object</p>

    </div>
    <div style="display:none;" class="object-stats-wrapper" id="object-stats-holder">
        <h4 style="position:absolute;" class="stats" id="object-speed">Speed: m/s</h4>
        <br>
        <h4 style="position:absolute;" class="stats" id="object-mass">Mass: kg</h4>
    </div>

<!--    <script src="animationEngine.js"></script>-->
<!--    <script src="gravity.js"></script>-->
    <script type="module" src="./index.js"></script>
<!--    <script src="bundle.js.map"></script>-->
</body>
</html>