-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
121 lines (106 loc) · 4.3 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
<!doctype html>
<html>
<head>
<title>WebGL Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
<script src="mandelbrot.js" type="text/javascript"></script>
<!-- Fragment shader program -->
<script id="shader-fs" type="x-shader/x-fragment">
precision highp float;
precision highp int;
uniform float offsetX;
uniform float offsetY;
uniform float ww;
uniform float wh;
uniform float zoom;
uniform int maxIterations;
uniform int colorScheme;
float modI(float a,float b) {
float m=a-floor((a+0.5)/b)*b;
return floor(m+0.5);
}
vec2 q2s(float a, float b) {
return vec2(a+b,b-(b-a));
}
void main(void) {
float x0 = (gl_FragCoord.x - ww/2.0)/(200.0*zoom) + offsetX;
float y0 = (gl_FragCoord.y - wh/2.0)/(200.0*zoom) + offsetY;
float x = 0.0;
float y = 0.0;
int iteration = 0;
for (int i = 0; i < 999999; i++) {
if (x*x + y*y > 4.0 || i > maxIterations)
break;
float temp = x*x - y*y + x0;
y = 2.0*x*y + y0;
x = temp;
iteration++;
}
float q = float(iteration)/float(maxIterations);
q = q > 1.0 ? 1.0 : q;
q = q < 0.0 ? 0.0 : q;
vec3 color; // COLORING https://stackoverflow.com/questions/16500656/which-color-gradient-is-used-to-color-mandelbrot-in-wikipedia
if (colorScheme == 0) {
if (q == 1.0)
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
else if (q > 0.5)
gl_FragColor = vec4(q, 1.0, q, 1.0);
else
gl_FragColor = vec4(0.1, q, 0.1, 1.0);
} else if (colorScheme == 1) {
float i = modI(float(iteration), float(16));
if(i < 1.0 ) color = vec3(66, 30, 15) / float(255); else
if(i < 2.0 ) color = vec3(25, 7, 26) / float(255); else
if(i < 3.0 ) color = vec3(9, 1, 47) / float(255); else
if(i < 4.0 ) color = vec3(4, 4, 73) / float(255); else
if(i < 5.0 ) color = vec3(0, 7, 100) / float(255); else
if(i < 6.0 ) color = vec3(12, 44, 138) / float(255); else
if(i < 7.0 ) color = vec3(24, 82, 177) / float(255); else
if(i < 8.0 ) color = vec3(57, 125, 209) / float(255); else
if(i < 9.0 ) color = vec3(134, 181, 229) / float(255); else
if(i < 10.0 ) color = vec3(211, 236, 248) / float(255); else
if(i < 11.0 ) color = vec3(241, 233, 191) / float(255); else
if(i < 12.0 ) color = vec3(248, 201, 95) / float(255); else
if(i < 13.0 ) color = vec3(255, 170, 0) / float(255); else
if(i < 14.0 ) color = vec3(204, 128, 0) / float(255); else
if(i < 15.0 ) color = vec3(153, 87, 0) / float(255); else
if(i < 16.0 ) color = vec3(106, 52, 3) / float(255);
if (q >= 0.99) color = vec3(0,0,0);
gl_FragColor = vec4(color, 1.0);
} else {
gl_FragColor = vec4(vec3(1 - (iteration/maxIterations)), 1.0);
}
}
</script>
<!-- Vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
</head>
<body onload="start()">
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
<div class="input">
<label>
<h4 id="num-iterations">700 iterations</h4><br>
<input type="range" id="iterations" min="1" max="3000" defaultValue="700">
</label>
<h4>Coloring scheme</h4>
<div class="box">
<label><input type="radio" name="color" checked>Green</label><br>
<label><input type="radio" name="color">Wikipedia</label><br>
<label><input type="radio" name="color">Boring</label>
</div>
<div class="warning">
<h4>Warnings</h4>
The controls are bad and
large amount of iterations may freeze low end computers
</div>
</div>
</body>
</html>