-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (93 loc) · 5.39 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style>
body {
padding: 0;
margin: 10;
}
</style>
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.dom.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
<script src="libraries/p5.dom.js"></script>
<script src="sketch.js"></script>
<title>Rocket Landing Simulator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- <h1>Rocket Landing Simulator</h1> -->
<section class="header">
<h1 class="title">Space Simulator</h1>
<h2 class="subtitle">by Mike Kuijper</h2>
</section>
<section class="contents">
<h1 class="title">Welcome to the Space Simulator</h1>
<p> This is the Space Simulator, you can enter custom values to customize your simulation. Feeling technical? I've got you covered! Check the "Simulation Log" checkbox for a <b> complete </b> mission log! Now you can get the information of <b>every
frame</b>
that's been rendered in the animation.</p>
<p> I don't recommend to use it together with Realtime Simulation, since the time intervals between rows of information are inconsistent. </p>
<h2> Smartphone App</h2>
<p> Like what you're seeing? Then you might like my Android App, it's called <a href="https://play.google.com/store/apps/details?id=nl.tridius.kuijper.mike.spacecalculator">Space Calculator</a> and is available in the Google Play Store. You can
use it to estimate how high a (model) rocket will go, if the rocket is fired straight up. </p>
<a href='https://play.google.com/store/apps/details?id=nl.tridius.kuijper.mike.spacecalculator&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'
style="border:1px solid white; border-radius:6px; box-sizing:border-box; height:80px;" /></a>
<form id="inputForm">
<h2 style="text-align: center; color: #ffffff; font-size: 2em; font-weight: bolder">Setup Simulation</h2>
<div style="text-align: center">
<a onClick="start()" class="yesButton">Start Simulation</a>
<a onClick="location.reload()" class="noButton">Reset Simulation</a>
</div>
<br>
<div class="row">
<div class="column">
<h2 style="text-align: center; color: #ffffff; font-weight: bolder">Rocket Properties</h2>
<label style="color:#ffffff">Engine thrust at max throttle (N):</label><br>
<input class="numberInput" type="number" id="thrust" value="4000"><br>
<label style="color:#ffffff">Rocket Mass with fuel (kg):</label><br>
<input class="numberInput" type="number" id="wetMass" value="200"><br>
<label style="color:#ffffff">Rocket Mass without fuel (kg):</label><br>
<input class="numberInput" type="number" id="dryMass" value="80"><br>
<label style="color:#ffffff">Fuel flow at full throttle (kg/s):</label><br>
<input class="numberInput" type="number" id="fuelFlow" value="10"><br>
<label style="color:#ffffff">Stationary throttle (0 - 1):</label><br>
<input class="numberInput" type="number" id="stationaryThrottle" value="0.4"><br>
<h2 style="text-align: center; color:#ffffff">Simulation Options</h2>
<label style="color:#ffffff">Simulate in realtime</label>
<input id="realtime" type="checkbox" checked><br>
<label style="color:#ffffff">Simulation Log</label>
<input id="log" type="checkbox"><br>
</div>
<div class="column">
<h2 style="text-align: center; color:#ffffff">Environmental Properties</h2>
<label style="color:#ffffff">Air pressure (hPa):</label><br>
<input class="numberInput" type="number" id="airPressure" value="1013.25"><br>
<label style="color:#ffffff">Temperature (°C):</label><br>
<input class="numberInput" type="number" id="temperature" value="15"><br>
<h2 style="text-align: center; color:#ffffff">Descend Path</h2>
<label style="color:#ffffff">Vertical Velocity (m/s):</label><br>
<input class="numberInput" type="number" id="verticalVelocity" value="0"><br>
<label style="color:#ffffff">Horizontal Velocity (m/s): <b>(Defective)</b></label><br>
<input class="numberInput" type="number" id="horizontalVelocity" value="0" disabled><br>
<label style="color:#ffffff">Starting Altitude (m):</label><br>
<input class="numberInput" type="number" id="yStart" value="200"><br>
<label style="color:#ffffff">Starting Horizontal offset (m):</label><br>
<input class="numberInput" type="number" id="xStart" value="0"><br>
</div>
</div>
<br>
</form>
<br>
<h2> Zoom </h2>
<div id="slider-holder" style="text-align: center"></div>
<br>
<!-- P5.JS SKETCH WILL BE DISPLAYED HERE -->
<div id="sketch-holder" class="container"></div>
<footer class="site-footer">
<h3> Space Simulator was made by <a href="https://mikekuijper.github.io/">Mike Kuijper</a>, in September of 2018 </h3>
</footer>
</section>
</body>
</html>