-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (249 loc) · 11.4 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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/app.css">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/src/mathquill.css">
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/stats.min.js"></script> -->
<script src="scripts/src/jquery-3.3.1.min.js"></script>
<script src="scripts/src/mathquill.min.js"></script>
<script src="scripts/webglutils.js"></script>
<script src="scripts/elements.js"></script>
<script src="scripts/parser.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/tutorials.js" defer="defer"></script>
<title>RayGraph</title>
</head>
<body>
<div id="titleScreen">
<div id="title">
<img src="logo.svg" alt="Logo" width="337.5" height="150">
<p id="phoneWarning">
Warning: you seem to be using this with a small
device. Unfortunately, this application is not fully stable on some
phones. Please use a computer or a wireless mouse for best results.
</p>
<!-- <button id="advancedTutorial">
Advanced Tutorial
</button> -->
<p></p>
<button id="quickStart">
Tutorial
</button>
<button id="skip">
Close
</button>
</div>
</div>
<main>
<canvas id="appScreen">
Your browser does not support canvas.
Please use a recent version of a major
browser, ex: Firefox.
</canvas>
</main>
<div id="tutorials">
<div id="quick">
<div id="qslide1">
<h2>Quick Start</h2>
<p>This quick start will show you the basic features of the program</p>
</div>
<div id="qslide2">
<h3>Functions</h3>
<p>
Each equation in the upper left corner can be edited to any
valid math equation. You can use most normal math symbols,
including polar coordinates and trig.
</p>
<p>
Press the + button beneath the functions to add a new equation.
The colors of the circular badge beside each equation will
adjust to match the shapes on screen.
</p>
</div>
<div id="qslide2">
<h3>Constants</h3>
<p>
Each constant in the top right bar can be changed by
clicking and dragging or scrolling.
</p>
<p>
New constants appear when you use them in an equation. Constants can
be used in multiple functions; they will all hold the same value.
</p>
</div>
<div id="qslide3">
<h3>Settings</h3>
<p>
The settings bar on the bottom controls the way the graph looks, and
each one can be changed just like the constants.
</p>
<p>
Precision changes how accurate the graph is;
the higher it is, the fewer errors, but the more
processing power that is required.
</p>
</p>
</div>
<div id="qslide4">
<h3>One last thing:</h3>
<p>Here are a few tips to get started:</p>
<ul>
<li>If the function disappears, try increasing size or adding in a constant to experiment with</li>
<li>Use division sparingly. Dividing by 0 will result in <span class="math">\infty</span>, leading to rendering errors,
so try multiplying both sides to cancel out division</li>
<li>Enjoy!</li>
</ul>
</p>
</div>
<button class="back">Back</button>
<button class="next">Next</button>
</div>
<div id="advanced">
<div id="aslide1">
<h2>Advanced Tutorial</h2>
<p>This tutorial will show you all the features of the program.</p>
</p>
</div>
<div id="aslide2">
<h3>Controls</h2>
<p>There are only a few main controls, but they aim to be as flexible as possible.</p>
<p>In the top left corner is the function bar. It holds all of the various equations you are
currently graphing. Beneath it is the add function button. In the top right is that constant
bar. This holds all of the constants that you include in your functions. On the bottom is the
settings bar. It holds the global settings that control the look and feel of the grapher.</p>
<p>In the bottom left is the save button. It allows you to save a url link to the functions you are
using or to download a transparent picture of the function. In the bottom right is a help button.
Hovering over it shows a quick help text detailing the things you can put in a function. And speaking of...</p>
</div>
<div id="aslide3">
<h3>Functions</h2>
<p>
Functions each have three parts. A colored badge on the left shows the color that the equation will
display in the 3d viewport. The text input in the middle allows you to type an equation, and the x on
the right will delete the function.
</p>
<p>New functions can be added by clicking the "+" button beneath the function list.</p>
<p>
An equation can include specific variables and mathematic operations, as long as it is valid mathematically.
Special variables include x, y, z, r, rho (<span class="math">\rho</span>), theta (<span class="math">\theta</span>), and phi - the angle (<span class="math">\phi</span>).
Special constants are: pi (<span class="math">\pi</span>), phi_0 - the constant (<span class="math">\phi_0</span>), and e. The rest of the letters will
be represented as constants, which can be changed in the constants bar.
</p>
</div>
<div id="aslide4">
<h3>Functions - Cont...</h3>
<p>
Some special functions are also
available, including trigonometric functions and others such as: ln, round, floor, mod, step, and smoothstep.
(The last few are only included because they work by default. If you are unfamiliar with them, you can check
the GLSL reference pages for each). Inverse trig functions have arc- as a prefix (arccos, arctan); hyperbolic
have -h as a suffix (sinh).
</p>
<p>
Normal math symbols also work, including +, -, *, and /. Exponentiation is ^ (Shift-6), and sqrt <span class="math">\sqrt{x}</span> is avilable,
but <span class="math">x^{0.5}</span> is more stable. Dividing by a special variable will often lead to artifacts in the image; try to
multiply both sides to eliminate it. The variables 'theta' and 'phi' are defined from <span class="math">-2\pi</span> to <span class="math">2\pi</span>. The letter 'r' is <span class="math">\sqrt{x^2 + y^2}</span>, and
'rho' is the radius in 3 dimensions (<span class="math">\sqrt{x^2 + y^2 + z^2}</span>).
</p>
</div>
<div id="aslide5">
<h3>Constants</h3>
<p>
Up in the top right corner is the constants bar. This will hold all the letters which are treated as constants
in the equation. Clicking and dragging (or scrolling) these boxes will change the value of that number across
all functions. New constants will appear as soon as you use them in an equation.
</p>
<p>
Constants are a great way to see how different numbers can affect a function. For example, using the equation
<span class="math">y = mx + b</span> will allow you to visually see how different slopes (m) and y-intercepts (b) affect the shape of the
line. Or, for a more detailed example, try <span class="math">\frac{(x-a)^2}{f^2} + \frac{(y-b)^2}{f^2} = \frac{(z - d)^2}{c^2}</span> to see how each constant affects
the shape of a cone.
</p>
</div>
<div id="aslide6">
<h3>Settings</h3>
<p>
The settings bar at the bottom allows you to manipulate the way that the program functions. The size slider
changes the size of the area that the graph displays. This is limited by default to improve performance and
visibility. The line width slider sets how wide the lines of the coordinate plane are, from 0 width (hidden)
to 1 width (solid planes).
</p>
<p>
The precision slider changes how accurate the graph is. This is low by default to improve performance, and
should only need increasing if strange artifacts appear in the graph's shape. This generally happens when there are
divisions by 0, or functions which have asymptotes. Increasing this slider should fix that, but it will cost
performance on some machines.
</p>
</div>
<div id="aslide7">
<h3>Save</h3>
<p>
The save button in the bottom left will allow you to save the current equations you are looking at.
The "Copy URL" option will copy a shareable URL to the clipboard with the current equations and the
camera position. The "Save Photo" button will open a new tab with a transparent-background PNG image
of what is currently being displayed.
</p>
</div>
<div id="aslide8">
<h3>One last thing:</h3>
<p>Here are a few tips to get started:</p>
<ul>
<li>If the function disappears, try increasing size or adding in a constant to experiment with</li>
<li>Use division sparingly. The computer doesn't like dividing by 0, so try multiplying both sides to cancel out division</li>
<li>Enjoy!</li>
</ul>
</p>
</div>
<div id="aslide8">
<h3>Interesting Functions:</h3>
<span class="math">xxyyzz\ =\ be^{a\rho }-c</span>
<span class="math">\sin \left(\rho r\right)=e^yx^z</span>
</div>
<button class="back">Back</button>
<button class="next">Next</button>
</div>
</div>
</div>
<div class="side-container">
<div id="functionContainer">
</div>
<button id="addFunction"><i class="material-icons">add_box</i></button>
</div>
<div id="controlsContainer">
<div id="mainControls">
</div>
</div>
<div id="variables">
</div>
<div id="help">
<i class="material-icons">help</i>
<!-- TODO: add help message and possibly a tutorial -->
<div>
The function box will accept any input that is a valid equation.
Letters (aside from x,y,z, and r) are constants that can be adjusted
using the boxes on the side. You can use the following special names in an equation:
<ul>
<li>x, y, and z</li>
<li>r (<span class="math">= \sqrt{x^2 + y^2}</span>)</li>
<li>rho (<span class="math">\rho</span>), theta (<span class="math">\theta</span>), and phi - the angle (<span class="math">\phi</span>)</li>
<li>pi (<span class="math">\pi</span>), phi_0 - the constant (<span class="math">\phi_0</span>), and e</li>
</ul>
In addition, most trig functions are available, including sin,
arctan, and cosh (hyperbolic cos). Some other functions, such as
round, floor, and mod are also allowed.<br>
<button id="showTutorial">Tutorial</button>
</div>
</div>
<div id="save">
<i class="material-icons">save</i>
<div>
<button id="download"><i class="material-icons">save_alt</i> Save Photo</button>
<button id="link"><i class="material-icons">link</i>Copy Link</button>
</div>
</div>
</body>
</html>