-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
123 lines (109 loc) · 6.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A complex function grapher that support Re-Im and Mod-Arg 3D plots">
<meta name="keywords" content="complex, function, 3D, website">
<meta name="author" content="hemisemidemipresent, hemidemisemipresent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Function Grapher</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/switch.css">
<link rel="stylesheet" href="css/book.css">
<link rel="stylesheet" href="css/help.css">
<script defer src="https://kit.fontawesome.com/59d09dda3d.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container"></div>
<div id="title">
<p>
grid = input plane of complex numbers (ℂ)<br>
<p id='legend'>height of surface = real part<br>color of surface -
white = bigger Im(f(z)), black = smaller Im(f(z))</p>
</p>
<div id="conv">
<p>f(z) = </p><textarea id="fn" type="text">z^3/100+1+i</textarea>
</div>
<p id="err"></p>
<p>Select plot:</p>
<select name="plot" id="plotChooser">
<option value="Re-Im">Re-Im</option>
<option value="Im-Re">Im-Re</option>
<option value="Mod-Arg">Mod-Arg</option>
</select>
<div id='gpu'>
<label for=" ">How good is your device/How accurate do you want the graph on a scale: <br> from 1
(bad) to 999 (NASA):</label>
<input type="number" id="gpuLevel" name="gpuLevel" min="1" max="999" value="1">
</div>
<div id="txtBtns">
<button onclick="load()" class="btn">Load</button>
<button onclick="toggleRot()" class="btn" id="rotBtn">Rotate On</button>
<button onclick="toggleShiny()" class="btn" id="shineBtn">Shine Off</button>
<button onclick="toggleBW()" class="btn" id="bwBtn">Switch to color</button>
</div>
<br>
<a id="gh" href="https://github.com/hemisemidemipresent/complex3">Star this project on Github</a>
</div>
<div id="sidebar">
<h1>A 3D web-based complex function grapher </h1>
<p>What exactly am I looking at? I still don't understand.<br>There is a section of <a
href="https://youtu.be/NtoIXhUgqSk?t=215">this video</a> that nicely explains it
</p>
<br>
<h2>List of functions</h2>
<p>Supported operations: <code>+ - * / ^</code></p>
<p>Trigonometric: sin,cos,tan,csc,sec,cot</p>
<p>Inverse Trigonometric: asin,acos,atan,acsc,asec,acot</p>
<p>Hyperbolic Trigonometric: sinh,cosh,tanh,csch,sech,coth</p>
<p>Inverse Hyperbolic Trigonometric: asinh,acosh,atanh,acsch,asech,acoth</p>
<p>E: ln,exp(significantly faster than e^z)</p>
<p>Roots: sqrt,cbrt</p>
<p>Misc: conj,inv,Re,Im,mod (or norm),arg</p>
<p>Gamma: lngamma,gamma,digamma,trigamma</p>
<p>Zeta: zeta,zetac(accepts 2 inputs, second input is how precise it is)<br>It is reccomended that you do
something like zeta(3*z) (btw default zeta is at 25)</p>
<br>
<h2>What is Logarithmic height</h2>
<p>It takes the original height h and replaces it with ln(1+h)</p>
<p>for negative h it uses -ln(1-h) instead</p>
</div>
<div id="book">
<button class="icon" onclick="toggleBook() "><i class="fas fa-book fa-2x"></i></button>
<button class="icon" onclick="exportImg()"><i class="fas fa-camera fa-2x"></i></button>
<button class="icon" onclick="helpClicked()"><i class="fas fa-question fa-2x"></i></button>
<button class="icon" onclick="toggleOrth()"><i class="fas fa-border-all fa-2x"></i></button>
<button class="icon" onclick="toggleLog()">
<svg xmlns="http://www.w3.org/2000/svg" width="19.11px" height="15px" viewBox="0 -694 898 705"
xmlns:xlink="http://www.w3.org/1999/xlink" style="color:white">
<defs>
<path id="MJX-9-TEX-I-6C"
d="M117 59Q117 26 142 26Q179 26 205 131Q211 151 215 152Q217 153 225 153H229Q238 153 241 153T246 151T248 144Q247 138 245 128T234 90T214 43T183 6T137 -11Q101 -11 70 11T38 85Q38 97 39 102L104 360Q167 615 167 623Q167 626 166 628T162 632T157 634T149 635T141 636T132 637T122 637Q112 637 109 637T101 638T95 641T94 647Q94 649 96 661Q101 680 107 682T179 688Q194 689 213 690T243 693T254 694Q266 694 266 686Q266 675 193 386T118 83Q118 81 118 75T117 65V59Z">
</path>
<path id="MJX-9-TEX-I-6E"
d="M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z">
</path>
</defs>
<g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
<g data-mml-node="math">
<g data-mml-node="mi">
<use xlink:href="#MJX-9-TEX-I-6C"></use>
</g>
<g data-mml-node="mi" transform="translate(298, 0)">
<use xlink:href="#MJX-9-TEX-I-6E"></use>
</g>
</g>
</g>
</svg></button>
<a href="https://github.com/hemisemidemipresent/complex3"><button class="icon"><i
class="fab fa-github fa-2x"></i></button></a>
</div>
</body>
<script src="js/three/three.min.js"></script>
<script src="js/three/OrbitControls.js"></script>
<script src="js/three/THREE.MeshLine.min.js"></script>
<script type="module" src="./rust/pkg/complex_parser.js"></script>
<script defer src="js/index.js"></script>
<script src="js/GUI.js"></script>
</html>