-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcube.html
73 lines (55 loc) · 1.97 KB
/
cube.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
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
//HW470:
//use the uniform matrix defined in the js file
uniform mat4 modelView;
void main()
{
fColor = vColor;
//HW470:
//Apply scaling functions rotations and translations to vposition
gl_Position = modelView * vPosition;
}
</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="cube.js"></script>
<script type="text/javascript" src="cubeFunc.js"></script>
<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<!--HW470: Buttons and slider for scale -->
Click canvas to add a cube<br>
<button id= "xButton">Rotate X</button>
<button id= "yButton">Rotate Y</button>
<button id= "zButton">Rotate Z</button>
<button id= "RandomButton">Rotate Random Axis</button>
<div>
scale cube 10% <input id="slider" type="range"
min="10" max="100" step="10" value="10" />
100%
</div>
<!--HW470: Program description and title-->
<h1>CSE 470 HW#2: Rotating Cubes</h1><br>
<b>Author:</b> Parker LeBlanc 1207201940 <b>Date: </b> February 9th 2017<br>
<b>Discription: </b> This program allows users to add rotating cubes to the canvas<br>
<b>Functionality: </b>Cubes should be added where the user clicks. The users should be able to use the slider to change the size of the cubes. The buttons should change the rotation axis.<br>
<b>Parameters: </b>Scale of the cubes using the slider. Rotation axis using the buttons. Location of the cube by clicking.<br>
<b>Resources: </b> Prof. Angel's codes<br>
</body>
</html>