-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (107 loc) · 5.83 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- p5js cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
<!-- Vue.js cdn -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- other files -->
<script src="sketch.js"></script>
<script src="CelestialBody.js"></script>
<script src="Gravity.js"></script>
<script src="Forces.js"></script>
<!-- Vue files & components -->
<script src="index.js" defer></script>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Google Fonts CDN -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Nunito">
<title>Solar System</title>
</head>
<body>
<div id="app">
<div id="left-container">
<div id="container">
<cb-data
v-for="(celestialBody, i) in celestialBodies"
:celestialbody="celestialBody"
:num="i"
:key="i"
ref="controls"
>
</cb-data>
<div style="display: inline-block; min-height: 10vh;">
<button id="new-button" @click="newCelestialBody()">
+ New Body
</button>
</div>
</div>
<div id="button-panel">
<button @click="setSim(true)">Start</button>
<button @click="setSim(false)">Stop</button>
<button @click="reset()">Reset</button>
</div>
</div>
<div id="right-container">
<div id="canvas-container"></div>
</div>
<a href="https://github.com/J404/Solar-System"
target="_blank">Source code</a>
<div id="backdrop"
v-if="showPopup"></div>
<div id="popup"
v-if="showPopup">
<div>
<h4>Attention:</h4>
<p>This site simulates gravitational attraction between various celestial bodies in space (planets, moons, stars, etc.)</p>
<p>It does this by using the values of mass, position, etc. inputted and calculating the gravitational attraction between those bodies.</p>
<h4>For a brief explanation of the physics that this site shows:</h4>
<p>
Newton's Law of Universal Gravitation states that <i>all</i> objects in the universe attract each other with the force of gravity. It is not exclusive
to planets, stars, etc. Even the chair is slightly attracted to you due to gravity. Because neither of your masses are very large, the effect is almost
nothing, and almost always ignored.
</p>
<p>
However, planets, moons, and stars have masses so large that gravity has a very noticable effect on their movements. The force of gravity between two celestial bodies
is affected by <b>mass</b> (how much stuff is in an object) and <b>distance</b> (how far away two objects are). As the mass of either object increases, so does the gravitational
attraction. As distance between the objects increases, gravitational attraction rapidly decreases. In fact, increasing the distance between the two objects causes a much larger decrease in
gravity than the increase of increasing the mass of one object.
</p>
<p>
In this simulation, each celestial body has an effect on each other body. The force of gravity between each is calculated and the applied to each body. Therefore, adding, removing, or changing
a body will <b>affect all</b> of the other bodies in the simulation in some way.
</p>
<p>
Planets orbit the sun because they had an initial velocity (or speed) in a straight line. Einstein theorized in his Theory of General Relativity that each planet actually moves in straight line.
He believed that large masses like the sun actually cause space-time itself to bend, like if you stood on a trampoline. The planets were forced into this bend, causing the orbit around the sun
that we see. This means that, if the sun would randomly disappear, the planets would actually move in straight lines, not their current orbits! This is why the planets in the simulation orbit the sun
even though we only give them an initial downward (straight) velocity.
</p>
<p>
This topic is complicated. Additional video resources can be pursued <a href="https://youtu.be/R7V3koyL7Mc?t=77">here</a> for an explanation of General Relativity
and <a href="https://youtu.be/uRijc-AN-F0">here</a> for a more accessible demonstration of it. You are not expected to be an expert on this topic!
</p>
<h4>For this simulation:</h4>
<p>
You have free reign to change the number of bodies, the masses, sizes, disances, and more of every body in the simulation.
</p>
<p>
The blue path drawn is a simulated path that body will take. To actually see the simulation, click the Start button. To stop or pause the simulation, press the Stop button.
To reset the simulation, press the Reset button.
</p>
<p>
Remember, each planet needs to have a large mass and an initial velocity to actually orbit. Your best bet would be to set a large mass and an initial Y velocity, as shown in the example
planets first generated.
</p>
</div>
<button
@click="showPopup = false">Close</button>
</div>
</div>
</body>
</html>