-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtv-ident.html
130 lines (116 loc) · 5.57 KB
/
tv-ident.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>3D Sierpinski Gasket TV Ident</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec3 theta;
uniform float scale;
uniform vec2 trans;
void main() {
vec3 angles = radians(theta);
vec3 c = cos(angles);
vec3 s = sin(angles);
mat4 rx = mat4(1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0);
mat4 ry = mat4(c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0);
mat4 rz = mat4(c.z, s.z, 0.0, 0.0,
-s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0);
mat4 rotationMat = rz * ry * rx;
mat4 scalingMat = mat4(scale, 0.0, 0.0, 0.0,
0.0, scale, 0.0, 0.0,
0.0, 0.0, scale, 0.0,
0.0, 0.0, 0.0, 1.0);
mat4 transMat = mat4(1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
trans[0], trans[1], 0.0, 1.0);
gl_Position = transMat * scalingMat * rotationMat * vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void main() {
gl_FragColor = fColor;
}
</script>
<script type="text/javascript" src="Common/webgl-utils.js"></script>
<script type="text/javascript" src="Common/initShaders.js"></script>
<script type="text/javascript" src="Common/MV.js"></script>
<script type="text/javascript" src="tv-ident.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div id="menu">
<p>Gasket Properties</p><br>
<div id="propertybox">
<label for="color1" class="colorlabel">Colour 1</label>
<label for="color2" class="colorlabel">Colour 2</label>
<label for="color3" class="colorlabel">Colour 3</label>
<label for="color4" class="colorlabel">Colour 4</label><br>
<input type="color" id="color1" class="colorpicker" name="color1" value="#00FFFF">
<input type="color" id="color2" class="colorpicker" name="color2" value="#00FF99">
<input type="color" id="color3" class="colorpicker" name="color3" value="#00801A">
<input type="color" id="color4" class="colorpicker" name="color4" value="#E64D33">
</div>
<div id="propertybox">
<label for="division">Number of Subdivisions</label>
<input type="range" id="division" class="slider settings" name="division" min="1" max="5" step="1"
value="3">
<input type="text" class="textbox" name="division" value="3" readonly><br>
<label for="scale">Initial Scale</label>
<input type="range" id="scale" class="slider settings" name="scale" min="0.5" max="3" step="0.5"
value="1">
<input type="text" class="textbox" name="scale" value="1" readonly><br>
</div>
<br>
<p>Animation Properties</p>
<br>
<div id="propertybox">
<label for="speed">Speed of Animation (%)</label>
<input type="range" id="speed" class="slider settings" name="speed" min="100" max="800" step="100"
value="200">
<input type="text" class="textbox" name="speed" value="200" readonly><br>
<label for="scaleFac">Scaling Factor</label>
<input type="range" id="scaleFac" class="slider settings" name="scaleFac" min="0.5" max="3" step="0.5"
value="3">
<input type="text" class="textbox" name="scaleFac" value="3" readonly><br>
<label for="degree">Rotation Angle (°)</label>
<input type="range" id="degree" class="slider settings" name="degree" min="0" max="360" step="10"
value="180">
<input type="text" class="textbox" name="degree" value="180" readonly><br>
<label for="rotateX">Rotation about x-axis</label>
<input type="checkbox" id="rotateX" name="rotateX" checked /><br>
<label for="rotateY">Rotation about y-axis</label>
<input type="checkbox" id="rotateY" name="rotateY" checked /><br>
<label for="transMode">Translation Style</label>
<select id="transMode" class="settings" name="transMode">
<option value="0">Random</option>
<option value="1">Rotating</option>
<option value="2">Dancing</option>
<option value="3">Flipping</option>
<option value="4">Paralysing</option>
</select><br>
</div>
<input type="button" id="start-button" value="Start">
<input type="button" id="restart-button" value="Restart">
</div>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</div>
</body>
</html>