-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
187 lines (173 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DeepMandelbrot</title>
<meta name="description" content="Mandelbrot deep viewer in webapp. It uses WebGL and perturbation theory acceleration.">
<meta name="keywords" content="mandelbrot,julia,fractal,deep,webgl,perturbation">
<meta name="author" content="Munsocket">
<!-- PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta rel="apple-touch-startup-image" name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" type="image/x-icon" href="images/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="DeepMandelbrot">
<meta name="application-name" content="DeepMandelbrot">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="images/icons/browserconfig.xml">
<meta name="theme-color" content="#0a0a0a">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/iphone5_splash.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/iphone6_splash.png"/>
<link rel="apple-touch-startup-image" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" href="images/icons/iphoneplus_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="images/icons/iphonex_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/iphonexr_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="images/icons/iphonexsmax_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/ipad_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/ipadpro1_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/ipadpro3_splash.png" />
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="images/icons/ipadpro2_splash.png" />
<!-- Open Graph protocol -->
<meta property="og:type" content="website">
<meta property="og:title" content="DeepMandelbrot">
<meta property="og:description" content="Deep mandelbrot fractal explorer with WebGL and perturbation acceleration.">
<meta property="og:url" content="https://munsocket.github.io/deep-fractal/">
<meta property="og:image" content="https://munsocket.github.io/deep-fractal/images/icons/og-image.jpg">
<meta property="og:image:height" content="420">
<meta property="og:image:width" content="803">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<style>
html, body { overflow: hidden; background-color: #0a0a0a; }
main { display: flex; flex-direction: column; height: 100vh; min-height: 100%; }
.viewer { flex: 1; position: relative; display: flex; flex-direction: column; background-color: #0a0a0a; }
#menu.is-active { position: fixed; width: 100%; top: 3.25em; }
.patreon-button { background-color: rgb(250, 116, 94); border-color: rgb(250, 116, 94); color: #ffffff; }
.patreon-button:hover { background-color: rgb(238, 109, 89); border-color: rgb(238, 109, 89); color: #ffffff;}
.supersamling-check:hover { color: #3273dc; }
canvas { position: absolute; width: 100%; height: 100%; }
#gljulia { left: 0; bottom: 0; height: 400px; width: 400px;}
#glcontrol { cursor: crosshair; }
#zoomOut { position: absolute; bottom: .4em; left: .4em; width: 2.3em; font-size: 1em;}
@media screen and (min-width: 1088px) {
#menu.is-active { position: static; width: auto; }
#zoomOut { display: none; }
.supersamling-check:hover { color: #ffffff; }
}
</style>
</head>
<body>
<main>
<!-- Header -->
<header>
<nav class="navbar is-black" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<h1 class="navbar-item has-text-weight-bold">DeepMandelbrot</h1>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="menu" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Color</a>
<div class="navbar-dropdown">
<a class="navbar-item" onclick="colorScheme = 0; draw(aim);">Smooth iteration</a>
<a class="navbar-item" onclick="colorScheme = 1; exteriortex = dogetex; draw(aim);">Doge tessellation</a>
<a class="navbar-item" onclick="colorScheme = 1; exteriortex = lolitex; draw(aim);">Loli tessellation</a>
<a class="navbar-item" onclick="colorScheme = 1; exteriortex = ricktex; draw(aim);">Rick tessellation</a>
</div>
</div>
<div class="navbar-item">
<label class="checkbox supersamling-check">
<input type="checkbox" onclick="superSampling = superSampling == 0 ? 1 : 0; draw(aim);">
Supersamling
</label>
</div>
<!-- <a class="navbar-item" onclick="Events.savePng();">Save</a> -->
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button patreon-button" target="_blank" rel="noopener" href="https://www.patreon.com/deepfractal" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<path fill="#ffffff" d="M108.8135992 26.06720125c-26.468266 0-48.00213212 21.53066613-48.00213212 47.99733213
0 26.38653268 21.53386613 47.85426547 48.00213213 47.85426547 26.38639937 0 47.8530655-21.4677328
47.8530655-47.85426547 0-26.466666-21.46666613-47.99733213-47.85306547-47.99733213" />
<path fill="#ffffff" d="M23.333335 153.93333178V26.0666679h23.46666576v127.8666639z" />
</svg>
<span>Become a Patron</span>
</a>
<a class="button is-primary" rel="noopener" href="https://github.com/munsocket/deep-fractal" target="_blank">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20">
<path fill="#ffffff" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04
2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01
1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span>GitHub</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Main viewer -->
<section class="viewer">
<canvas id="glmandel"></canvas>
<canvas id="gljulia"></canvas>
<canvas id="glcontrol"></canvas>
<a id="zoomOut" class="button is-black is-rounded" onclick="Events.reset();">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 562 562">
<path fill="#ffffff" d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149
25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382
0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283
73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161
11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256
504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"></path>
</svg>
</a>
</section>
</main>
<!-- Modal form -->
<div id="errorBox" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<article class="message is-primary">
<div class="message-header">
<p id="errorHdr">Something went wrong</p>
<button class="delete" aria-label="delete" onclick="document.getElementById('errorBox').classList.toggle('is-active');"></button>
</div>
<div id="errorMsg" class="message-body">
Please check console and consider submit a bug report on <a href="https://github.com/munsocket//issues">github</a>.
</div>
</article>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/4.x/twgl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/double.iife.min.js"></script>
<script src="src/old-src/render.js"></script>
<script src="src/old-src/shaders.js"></script>
<script src="src/old-src/events.js"></script>
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132550679-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-132550679-1');
</script>
</body>
</html>