-
Notifications
You must be signed in to change notification settings - Fork 0
/
assignment1.html
123 lines (112 loc) · 3.72 KB
/
assignment1.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
<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 properties;
attribute vec3 vColor;
varying vec4 color;
void main() {
float x = vPosition.x;
float y = vPosition.y;
float twist = properties.x;
float angle = properties.y;
float d = sqrt(x * x + y * y);
float cosTheta = cos(angle);
float sinTheta = sin(angle);
vec4 pos = vec4(x * cosTheta - y * sinTheta, x * sinTheta + y * cosTheta, 0.0, 1.0);
pos = vec4(pos.x * cos(d * twist) - pos.y * sin(d * twist), pos.x * sin(d * twist) + pos.y * cos(d * twist), 0.0, 1.0);
gl_Position = pos;
color = vec4(vColor, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 color;
void main() {
gl_FragColor = color;
}
</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="assignment1.js"></script>
<style type="text/css">
html, body { margin: 0; padding: 0; background-color: rgb(45, 45, 45); color: white; font-family: Arial, sans-serif; }
.form-group { }
label { display: inline-block; width: 100px; vertical-align: middle; line-height: 2.3em; }
input, select { display: inline-block; vertical-align: middle; line-height: 2.3em; }
.slider { width: 250px; }
form { float: left; padding: 10px; }
canvas { float: left; padding: 10px; }
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="angle">Rotation</label>
<input type="range" class="slider" id="angle"
min="0" max="360" step="0.1" value="30"
onchange="setAngle(this.value)" oninput="setAngle(this.value)">
</div>
<div class="form-group">
<label for="twist">Twist</label>
<input type="range" class="slider" id="twist"
min="-5.0" max="5.0" step="0.01" value="1"
onchange="setTwist(this.value)" oninput="setTwist(this.value)">
</div>
<div class="form-group">
<label for="tesselation">Tesselation</label>
<input type="range" class="slider" id="tesselation"
min="0" max="9" step="1" value="5"
onchange="setTesselation(this.value)" oninput="setTesselation(this.value)" list="tesselation-list">
</div>
<div class="form-group">
<label for="shape">Shape</label>
<select id="shape" onchange="setShape(this.value)">
<option value="triangle" selected="selected">Triangle</option>
<option value="square">Square</option>
<option value="diamond">Diamond</option>
<option value="radioactive">Radioactive</option>
<option value="star">Star</option>
</select>
</div>
<div class="form-group">
<label for="color">Color</label>
<select id="color" onchange="setColor(this.value)">
<option value="random">Random</option>
<option value="red" selected="selected">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="form-group">
<label for="mode">Mode</label>
<select id="mode" onchange="setMode(this.value)">
<option value="solid">Solid</option>
<option value="outline" selected="selected">Outline</option>
</select>
</div>
<div class="form-group">
<label for="fractal">Fractal</label>
<input type="checkbox" id="fractal" onchange="setFractal(this.checked)">
</div>
</form>
<datalist id="tesselation-list">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</datalist>
</div>
<canvas id="gl-canvas" width="800" height="800">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>