diff options
| -rw-r--r-- | help.html | 40 | ||||
| -rw-r--r-- | style.css | 22 |
2 files changed, 61 insertions, 1 deletions
diff --git a/help.html b/help.html new file mode 100644 index 0000000..a977a2c --- /dev/null +++ b/help.html @@ -0,0 +1,40 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Hyperspace Navigator - Help</title> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> + <link href="style.css" rel="stylesheet"> + </head> + <body style="font-family: Jura;"> + <script>0</script> + <div id="root"> + <h1>hyperspace navigator help</h1> + <p class="normal"> + HYPERSPACE NAVIGATOR is a game about designing trajectories using <a href="https://tutorial.math.lamar.edu/Classes/CalcII/ParametricEqn.aspx">parametric curves</a>. These are curves where <strong>y</strong> is not determined by some function of <strong>x</strong> (e.g. <strong>y = f[x]</strong>), but where both <strong>x</strong> and <strong>y</strong> are determined by a third quantity <strong>t</strong>, which we might think of as time. + Parametric curves are capable of producing complex and beautiful shapes from relatively simple definitions, and I encourage you to play with the system to see what you can create! + </p> + <p class="normal"> + While defining your parametric curves, you have access to the following operations: + </p> + <ul class="normal"> + <li>Addition (t+2)</li> + <li>Subtraction (2-t)</li> + <li>Multiplication (2t or 2*t)</li> + <li>Division (t/2)</li> + <li>Exponents (t^2)</li> + <li>Modular arithmetic (t mod 2 or t % 2)</li> + <li>Trigonometric functions (tan, sin, cos, acos, asin, atan, atan2)</li> + <li>Miscellaneous extra functions (abs, exp, log, sqrt, ceil, floor, random, round)</li> + <li>Mathematical constants (pi, e)</li> + </ul> + </div> + <div id="footer"> + <a target="_blank" rel="noopener noreferrer" + href="https://sanine.net/git/hyperspace-navigator/tree/?h=main">⌘ source code</a> + </div> + </body> +</html> @@ -54,7 +54,7 @@ body { padding-top: 8px; } -#footer a { +a { color: orange; } @@ -127,6 +127,26 @@ input[type=button]:active { } +input[type=range] { + accent-color: orange; + margin-bottom: 0; +} + +.alert-box label { + padding-bottom: 16px; +} + + label { text-transform: lowercase; } + + +.normal { + text-transform: none; +} + + +.normal li { + font-size: 24px; +} |