-
Notifications
You must be signed in to change notification settings - Fork 1
/
page.html
94 lines (85 loc) · 2.2 KB
/
page.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
<html>
<head>
<meta charset="utf-8"/>
<title>Fractals with WebGL</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script type="text/javascript" src="main.js"></script>
<!-- shader programs -->
<script id="vertex shader" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aLocation;
varying vec2 vLocation;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
vLocation = aLocation;
}
</script>
<script id="fragment shader" type="x-shader/x-fragment">
precision mediump float;
uniform int uJulia; // Is a Julia set to be rendered? (>0)
// Mandelbrot set otherwise. (<=0)
uniform vec2 uJuliaParameter;
varying vec2 vLocation; // Complex number at this fragment.
// complex number operations
float normQ(vec2 z) {
return dot(z, z);
}
vec2 square(vec2 z) {
return vec2(z[0]*z[0]-z[1]*z[1]
,z[0]*z[1]*2.0);
}
// convert a value between 0 and 1 to a color
vec3 toColor(float val) {
if (val<0.25)
return vec3(val*4.0, 0.0, 0.0);
val -= 0.25;
if (val<0.25)
return vec3(1.0-val*4.0, val*4.0, 0.0);
val -= 0.25;
if (val<0.25)
return vec3(val*4.0, 1.0-val*4.0, val*4.0);
val -= 0.25;
return vec3(1.0, val*4.0, 1.0);
}
void main(void) {
vec2 z;
vec2 c;
if (uJulia>0) { // Julia set
z = vLocation;
c = uJuliaParameter;
}
else { // Mandelbrot set
z = vec2(0.0, 0.0);
c = vLocation;
}
int iterations=0;
// the actual maximum number of iterations is inserted
// by javascript code
for (int i=0; i<MAXITERATIONS; i++) {
if (normQ(z)<10.0) {
z = square(z) + c;
iterations = i;
}
}
float value = float(iterations)/float(MAXITERATIONS);
gl_FragColor = vec4(toColor(value), 1.0);
}
</script>
</head>
<body onload="onLoad();">
<div class="fractal_panel">
<canvas id="Mandelbrot canvas" class="fractal_canvas" width=700 height=700>
</canvas><br/>
maximum iterations:
<input type="number" id="Mandelbrot max iterations" class="iterations_input">
</input>
</div>
<div class="fractal_panel">
<canvas id="Julia canvas" class="fractal_canvas" width=700 height=700>
</canvas><br/>
maximum iterations:
<input type="number" id="Julia max iterations" class="iterations_input">
</input>
</div>
</body>
</html>