-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
104 lines (101 loc) · 5.05 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
<html>
<head>
<title>Fractal sounds</title>
<link rel="stylesheet" href="./stylesheets/fractalStyle.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
crossorigin="anonymous"></script>
<meta property="og:image" content="https://www.golova.dev/experiments/images/preview.png">
<meta property="og:title" content="Fractal sound explorer">
<meta property="og:type" content="website">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon-180.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16.png">
<meta name="twitter:title" content="golova.dev">
<meta name="twitter:description" content="See and listen to the beauty of fractals online.">
<meta name="twitter:site" content="@nsgolova">
<meta name="twitter:image" content="https://www.golova.dev/experiments/images/preview.png">
<meta name="twitter:image:alt" content="Fractal sound explorer">
<meta name="twitter:card" content="summary">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div><label id="logoLabel">Fractal sounds</label></div>
<div><a id="hideUI">Hide UI</a></div>
<div id="uiContainer" onclick="">
<div id="topUI">
<div class="menuTitle">Fractal type</div>
<div class="clickable" id="setSetting0" style="color: red;">Mandelbrot Set</div>
<div class="clickable" id="setSetting1">Burning Ship</div>
<div class="clickable" id="setSetting2">Feather Fractal</div>
<div class="clickable" id="setSetting3">SFX Fractal</div>
<div class="clickable" id="setSetting4">Henon Map</div>
<div class="clickable" id="setSetting5">Duffing Map</div>
<div class="clickable" id="setSetting6">Ikeda Map</div>
<div class="clickable" id="setSetting7">Chirikov Map</div>
<div><label id="volumeLabel">Volume: 30%</label></div>
<div><input type="range" id="volume" min="1" max="100" value="30"></div>
<div><label id="tuneLabel">Tune: 4000Hz</label></div>
<div><input type="range" id="maxFreq" min="2000" max="10000" value="4000" step="100"></div>
<div class="toggleButton" title="Prevent sound from fading over time.">
<label class="switch">
<input type="checkbox" id="sustain" checked>
<span class="slider round"></span>
</label>
<label class="toggleButtonLabel">Sustain</label>
</div>
<div class="toggleButton" title="Show colors of fractals' inner structure.">
<label class="switch">
<input type="checkbox" id="colors">
<span class="slider round"></span>
</label>
<label class="toggleButtonLabel">Colors</label>
</div>
<div class="toggleButton" title="Show animation of sound path.">
<label class="switch">
<input type="checkbox" id="animations" checked>
<span class="slider round"></span>
</label>
<label class="toggleButtonLabel"><td><nobr>Animated path</nobr></td></label>
</div>
<div>
<p style='font: 12px "Lucida Grande", Helvetica, Arial, sans-serif;'>
Controls:
<br>Left click - <b>play</b>.
<br>Right click or
<br>"Space" - <b>stop</b>.
<br>Wheel click or
<br>"alt"+mouse - <b>drag</b>.
<br>Scroll or pinch to <b>zoom</b>.
</p>
</div>
<div>
<input id="share" type="button" value="Copy share link">
</div>
<div>
<input id="shareUrl" type="text" value="" style="visibility: hidden; height: 0px; width: 132px;"/>
</div>
<div id="copiedLabel" style="visibility: hidden; height: 0px; width: 132px;">Copied!</div>
<div class="linkContainer">
<a href="https://youtu.be/GiAj9WW1OfQ">
<img src="./images/youtube.png" width="32" height="32" title="Video explanation">
</a>
<a href="https://codeparade.itch.io/fractal-sound-explorer">
<img src="./images/windows.png" width="32" height="32" title="App for Windows">
</a>
<a href="https://github.com/radulov/FractalSoundWeb.git">
<img src="./images/github.png" width="32" height="32" title="Look at my guts">
</a>
</div>
</div>
</div>
<div style="width: 100%; height: 100%; touch-action: none;">
<canvas id="placeholder" width="1200" height="720" style="position: absolute; left: 0; top: 0; z-index: 0;width: 100%; height: 100%;"></canvas>
<canvas id="glcanvas" width="1200" height="720" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="lineCanvas" width="1200" height="720" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script src="./javascripts/AudioFeeder.js"></script>
<script src="./javascripts/fractalSoundsUtils.js"></script>
<script src="./javascripts/fractalSounds.js"></script>
</body>
</html>