-
Notifications
You must be signed in to change notification settings - Fork 0
/
quaternion.html
executable file
·110 lines (108 loc) · 5.32 KB
/
quaternion.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
<!doctype html>
<head>
<link rel="stylesheet" href="thingy.css">
<link rel='icon' href='favicon.png' sizes='32x32'>
<title>Set Generator</title>
</head>
<body>
<h1>Mandelbrot Set Generator</h1>
<header class='navbar'>
<p style='text-align:center;'>
<a href='index.html'>Mandelbrot Generator</a>|
<a href='doublebrot.html'>Mandelbrot Generator^3</a>|
<a href='triplebrot.html'>Mandelbrot Generator^4</a>|
<a href="quaternion.html">Quaternion</a>|
<a href='instructions.html' target='_blank_'>How To Use</a>|
<a href='explanation.html' target='_blank_'>What Is It?</a>
</p>
</header>
<table class="generator" id='division'>
<tr>
<td colspan=2>
<div class='tab' onclick="show(-1);"><h3>Mandelbrot</h3></div><div class='tab' onclick="show(-2);"><h3>Julia</h3></div>
</td>
</tr>
<tr>
<td>
<canvas id="screen" width='640' height='640' onclick="changeCoords(event)">Error</canvas>
<canvas id="jscreen" width='640' height='640' onclick="changeCoords(event)" style="display: none;">Error</canvas>
</td>
<td>
<div class='group' id='group'>
<div class='trigger' onclick="show(0)"><h3>Size</h3></div>
<div class='options'>
<p>Canvas Width(px): <input type='number' id='width' value=640 max=1200></p>
<p>Canvas Height(px): <input type='number' id='height' value=640 max=1200></p>
<button onclick='changeSize()'>Change Size</button>
</div>
<div class='trigger' onclick="show(1)"><h3>Color</h3></div>
<div class='options'>
<p>Relative Colouring: <input type='checkbox' id='relCol' onchange='colorState.changeVisuals()' checked></p>
<p>Exponent Mod: <input type='range' id='exponent' min=-200 max=200 onchange='colorState.changeVisuals()'></p>
<p>Colour Difference: <input type='number' id='colorStep' value=10 onchange='colorState.changeVisuals()'></p>
<p>Colour Begin: <input type='number' id='colorBegin' value=0 onchange='colorState.changeVisuals()'></p>
<p>In Set Color: <input type='color' id='inSetColor' value='#000000' onchange='colorState.changeVisuals()'></p>
<p>
Interpolation: <select id='gradType' onchange='updateGrad("none")'>
<option value='linear'>Linear</option>
<option value='cubic'>Cubic</option>
</select>
Presets: <select id='presets' onchange='updateGrad("presets")'>
<option value='none'>None</option>
<option value='greyscale'>Greyscale</option>
<option value='rainbow'>Rainbow</option>
<option value='rgb'>RGB</option>
<option value='pride'>Pride</option>
<option value='wrb'>White Red Black</option>
<option value='ocean'>Ocean</option>
<option value='larch'>Larch</option>
</select>
</p>
<p>
Point: <input type='number' id='pointNum' value=0 style="width: 30px;" onchange="updateGrad('change')">
Position: <input type='number' id='pointPos' width='50' style="width: 50px;" onchange='updateGrad("changeSlider")'>
Color:<input type='color' id='pointColor' style="width: 30px;" onchange='updateGrad("changeCol")'>
<button onclick="updateGrad('delete')" style="width: auto;">Delete</button>
</p>
<p>
<canvas width=300 height='14' id='gradView' style="border-width:1px;" onclick="updateGrad('click',event)" onmousemove="displayNum(event)"></canvas>
<input type='number' id='gradSize' value=600 style="width: 50px;" onchange="updateGrad('resize')">
</p>
<p><input type='range' id='slider' style='width:300px;' min=0 max=599 onchange='updateGrad("changePos")'></p>
<p>
Draw Speed: <input type='range' id='speed' onchange='colorState.speedChange()' style="width: 300px;" min=1 max=1000 value=500>
<select id='dir' onclick="colorState.changeVisuals()">
<option value=1>In</option>
<option value=-1>Out</option>
</select>
</p>
<p>Auto Change: <input type='checkbox' checked id="autoChange"></p>
<button onclick="colorState.changeVisuals(true)">Change Visuals</button>
</div>
<div class='trigger' onclick="show(2)"><h3>Parameters</h3></div>
<div class='options'>
<p>J co-ordinate: <input type="number" id="jcor" value=0></p>
<p>K co-ordinate: <input type="number" id="kcor" value=0></p>
<br>
<p>X co-ordinate: <input type="number" id="xcor" value=0></p>
<p>Y co-ordinate: <input type="number" id="ycor" value=0></p>
<p>Zoom: <input type="number" id="zoom" value=1></p>
<p>
Change Zoom:
<input id='changeZoom' type='number' value=10 min=1 step=0.1><button onclick='changeZoom(0)' style='width:22px;'>÷</button><button onclick='changeZoom(1)' style='width:22px;'>×</button>
</p>
<p>Iterations: <input type='number' id='limit' value=600></p>
</div>
<div class='options' id='last'>
<button onclick="disable(true);setTimeout(run,0, -1)" id='run'>Generate</button>
<button onclick="disable(true);setTimeout(jrun,0, -1)" id='jrun'>Julia</button>
</div>
</div>
</td>
</tr>
</table>
<p>It is normal for this webpage to stop responding when run, especially with a large canvas or a high iterations value.</p>
<!--<p><a id='download' href='' target='_blank_'>Download as PNG</a></p>-->
<!--<p><a href='gif.html' target='_blank_'>Example Zoom</a></p>-->
<script src="mandelbrot.js"></script>
</body>