gravity/index.html at master · shicks/gravity · 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<link rel="stylesheet" href="gravity.css"/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
  <g id="view" transform="translate(0 0) scale(1) rotate(0) translate(0 0)">
    <g id="starfield" transform="translate(0 0) scale(1)"></g>
    <circle id="planet" cx="0" cy="0" r="10"/>
    <ellipse id="target-orbit" transform="rotate(0)"
             vector-effect="non-scaling-stroke"/>
    <ellipse id="current-orbit" transform="rotate(0)"
             vector-effect="non-scaling-stroke"/>
    <line id="planet-line" vector-effect="non-scaling-stroke"/>
    <line id="target-line" vector-effect="non-scaling-stroke"/>
    <circle id="target-circle" transform="translate(0 0) rotate(0)"
            vector-effect="non-scaling-stroke"
            cx="0" cy="0" r="2"/>
    <path id="current-ship" transform="translate(0 0) rotate(0) scale(0.5 0.5)"
          d="M -2 0 L -3 -2 L 3 0 L -3 2 Z"/>
  </g>
</svg>
<div id="stats">
  <div id="stats-ship">
    <h2>Ship</h2>
    <div class="stats-stat">
      <span class="key">Altitude</span><span class="stats-value" data-key="r"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Speed</span><span class="stats-value" data-key="v"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Angular Momentum</span><span class="stats-value" data-key="l"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Eccentricity</span><span class="stats-value" data-key="e"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Argument of Periapsis</span><span
            class="stats-value" data-key="theta0"></span>&deg;
    </div>
    <div class="stats-stat">
      <span class="key">True Anomaly</span><span class="stats-value" data-key="theta"></span>&deg;
    </div>
    <div class="stats-stat">
      <span class="key">Distance to Target</span><span class="stats-value" data-key="d"></span>
    </div>
  </div>
  <div id="stats-target">
    <h2>Target</h2>
    <div class="stats-stat">
      <span class="key">Altitude</span><span class="stats-value" data-key="r"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Speed</span><span class="stats-value" data-key="v"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Angular Momentum</span><span class="stats-value" data-key="l"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Eccentricity</span><span class="stats-value" data-key="e"></span>
    </div>
    <div class="stats-stat">
      <span class="key">Argument of Periapsis</span><span
            class="stats-value" data-key="theta0"></span>&deg;
    </div>
    <div class="stats-stat">
      <span class="key">True Anomaly</span><span class="stats-value" data-key="theta"></span>&deg;
    </div>
  </div>
  <br/>
  Press '?' for help.
</div>
<div id="help">
  <b>GRAVITY</b> - <a href="//github.com/shicks/gravity">GitHub Project</a>
  <br/>
  <a href="//github.com/shicks">Stephen Hicks</a>
  <br/><br/>
  A simple orbital simulator.  The goal is to dock your vessel (green) with the target (red).  Controls are as follows:
  <br/><br/>
  <div class="help-column">
    <div class="help-binding">
      <span class="key">(Shift+)W</span><span class="action">(Small) Thrust Forward</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)S</span><span class="action">(Small) Thrust Backward</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)A</span><span class="action">(Small) Turn Left</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)D</span><span class="action">(Small) Turn Right</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)Q</span><span class="action">(Small) Thrust Left</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)E</span><span class="action">(Small) Thrust Right</span>
    </div>

    <br/>
    <div class="help-binding">
      <span class="key">(Shift+)0</span><span class="action">Random Ship Position</span>
    </div>
    <div class="help-binding">
      <span class="key">(Shift+)9</span><span class="action">Random Target Position</span>
    </div>
    <div class="help-binding">
      <span class="key"></span><span class="action">(Shift = more circular)</span>
    </div>
  </div>

  <div class="help-column">
    <div class="help-binding">
      <span class="key">?</span><span class="action">Display Help</span>
    </div>
    <div class="help-binding">
      <span class="key">X</span><span class="action">Toggle Stats Visibility</span>
    </div>

    <br/>
    <div class="help-binding">
      <span class="key">[<span>/</span>]</span><span class="action">Speed Up/Down Clock</span>
    </div>
    <div class="help-binding">
      <span class="key">=</span><span class="action">Reset Speed</span>
    </div>
    <div class="help-binding">
      <span class="key">Space</span><span class="action">Pause</span>
    </div>

    <br/>
    <div class="help-binding">
      <span class="key">Z</span><span class="action">Toggle Planet/Ship View</span>
    </div>
    <div class="help-binding">
      <span class="key">L</span><span class="action">Toggle Line Visibility</span>
    </div>
    <div class="help-binding">
      <span class="key">+<span>/</span>-</span><span class="action">Zoom In/Out (Ship View only)</span>
    </div>
    <div class="help-binding">
      <span class="key">=</span><span class="action">Reset Zoom</span>
    </div>

  </div>
</div>
<script src="gestures.js"></script>
<script src="gravity.js"></script>