-
Notifications
You must be signed in to change notification settings - Fork 0
/
p4.html
253 lines (208 loc) · 12.8 KB
/
p4.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html>
<head>
<title>P4 - Matt Radtke</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid #000"></canvas>
<br/>
<input id="slider1" type="range" min="-100" max="100" />
<br/>
<input id="slider2" type="range" min="-100" max="100" />
<br/>
<input type="checkbox" id="ns">
<br/>
<script src = "https://graphics.cs.wisc.edu/JS/twgl-full.min.js"></script>
<script>
"use strict";
window.onload = function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var slider1 = document.getElementById("slider1");
slider1.value = 50;
var slider2 = document.getElementById("slider2");
slider2.value = 50;
var box = document.getElementById("ns");
var m4 = twgl.m4;
var angleAroundCenter = 0;
var angle = 0;
var tTranslateFromCenter = m4.translation([100,0,0]);
function lineToTx(x,y,z,Tx) {
var loc = [x,y,z];
var locTx = m4.transformPoint(Tx,loc);
context.lineTo(locTx[0]+canvas.width/2,-locTx[1]+canvas.height/2);
}
function moveToTx(x,y,z,Tx) {
var loc = [x,y,z];
var locTx = m4.transformPoint(Tx,loc);
context.moveTo(locTx[0]+canvas.width/2,-locTx[1]+canvas.height/2);
}
function drawTriangle(v1,v2,v3,color,Tx){
context.beginPath();
context.fillStyle=color;
moveToTx(v1[0],v1[1],v1[2],Tx);
lineToTx(v2[0],v2[1],v2[2],Tx);
lineToTx(v3[0],v3[1],v3[2],Tx);
context.closePath();
context.fill();
}
function drawStar(Tx, scale, color) {
context.save();
context.strokeStyle = color;
var xOrigin = 0;
var yOrigin = 0;
var zOrigin = 0;
// upper half
// drawTriangle([0,50*scale,0],[20*scale,0,0],[0,0,-20*scale],"darkred",Tx);
// drawTriangle([0,50*scale,0],[20*scale,0,0],[0,0,20*scale],"red",Tx);
// drawTriangle([0,50*scale,0],[-20*scale,0,0],[0,0,-20*scale],"crimson",Tx);
// drawTriangle([0,50*scale,0],[-20*scale,0,0],[0,0,20*scale],"brown",Tx);
// //lower half
// drawTriangle([0,-50*scale,0],[20*scale,0,0],[0,0,-20*scale],"darkred",Tx);
// drawTriangle([0,-50*scale,0],[20*scale,0,0],[0,0,20*scale],"red",Tx);
// drawTriangle([0,-50*scale,0],[-20*scale,0,0],[0,0,-20*scale],"crimson",Tx);
// drawTriangle([0,-50*scale,0],[-20*scale,0,0],[0,0,20*scale],"brown",Tx);
//
moveToTx(0,50*scale,0,Tx);
lineToTx(20*scale,0,0,Tx);
lineToTx(0,-50*scale,0,Tx);
lineToTx(-20*scale,0,0,Tx);
lineToTx(0,50*scale,0,Tx);
lineToTx(0,0,20*scale,Tx);
lineToTx(0,-50*scale,0,Tx);
lineToTx(0,0,-20*scale,Tx);
lineToTx(0,50*scale,0,Tx);
moveToTx(20*scale,0,0,Tx);
lineToTx(0,0,20*scale,Tx);
lineToTx(-20*scale,0,0,Tx);
lineToTx(0,0,-20*scale,Tx);
lineToTx(20*scale,0,0,Tx);
context.stroke();
context.restore();
}
function draw() {
canvas.width = canvas.width;
context.fillStyle = "lightblue";
var angle1 = slider1.value*0.01*Math.PI;
var angle2 = slider2.value*0.01*Math.PI;
var scale = 5;
context.fillRect(0,0,canvas.width,canvas.height);
var axis = [0,1,0];
angle = angle +0.01;
angleAroundCenter = angleAroundCenter +0.01;
//rotation transform
var Trotation = m4.axisRotation(axis,angle);
var TrotateAndTranslate1 = m4.multiply(m4.translation([100,0,0]),m4.axisRotation([0,1,0],angleAroundCenter));
var TrotateAndTranslate2 = m4.multiply(m4.translation([-100,0,0]),m4.axisRotation([0,1,0],angleAroundCenter));
//combine the translation with another rotation
var eye=[200*Math.cos(angle1),50,200*Math.sin(angle2)];
var target = [0,0,0];
var up = [0,1,0];
var Tcamera = m4.inverse(m4.lookAt(eye,target,up));
//model view is the final view after applying all the transforms before the camera
var TallRotations1 = m4.multiply(Trotation,TrotateAndTranslate1);
var TallRotations2 = m4.multiply(Trotation,TrotateAndTranslate2);
var Tmodelview1 = m4.multiply(TallRotations1,Tcamera);
var Tmodelview2 = m4.multiply(TallRotations2,Tcamera);
var Tprojection = m4.perspective(Math.PI/5, 1.5,2,500);
//viewing transform
var Tviewport=m4.multiply(m4.scaling([50,50,200]),m4.translation([0,0,0]));
//prespective transform
var Tcpv=m4.multiply(m4.multiply(Tcamera,Tprojection),Tviewport);
//transform the obejct into the perspective
var Tmcpv1=m4.multiply(Tmodelview1,Tcpv);
var Tmcpv2=m4.multiply(Tmodelview2,Tcpv);
var v01 = [0,50*scale,0]; var v02 = [20*scale,0,0]; var v03 = [0,0,-20*scale];
var v11 = [0,50*scale,0]; var v12 = [20*scale,0,0]; var v13 = [0,0,20*scale];
var v21 = [0,50*scale,0]; var v22 = [-20*scale,0,0]; var v23 = [0,0,-20*scale];
var v31 = [0,50*scale,0]; var v32 = [-20*scale,0,0]; var v33 = [0,0,20*scale];
var v41 = [0,-50*scale,0]; var v42 = [20*scale,0,0]; var v43 = [0,0,-20*scale];
var v51 = [0,-50*scale,0]; var v52 = [20*scale,0,0]; var v53 = [0,0,20*scale];
var v61 = [0,-50*scale,0]; var v62 = [-20*scale,0,0]; var v63 = [0,0,-20*scale];
var v71 = [0,-50*scale,0]; var v72 = [-20*scale,0,0]; var v73 = [0,0,20*scale];
//centers of the triangles
//we then transform each Z and sort them
var t0 = [(v01[0]+v02[0]+v03[0])/3,(v01[1]+v02[1]+v03[1])/3,(v01[2]+v02[2]+v03[2])/3];
var t1 = [(v11[0]+v12[0]+v13[0])/3,(v11[1]+v12[1]+v13[1])/3,(v11[2]+v12[2]+v13[2])/3];
var t2 = [(v21[0]+v22[0]+v23[0])/3,(v21[1]+v22[1]+v23[1])/3,(v21[2]+v22[2]+v23[2])/3];
var t3 = [(v31[0]+v32[0]+v33[0])/3,(v31[1]+v32[1]+v33[1])/3,(v31[2]+v32[2]+v33[2])/3];
var t4 = [(v41[0]+v42[0]+v43[0])/3,(v41[1]+v42[1]+v43[1])/3,(v41[2]+v42[2]+v43[2])/3];
var t5 = [(v51[0]+v52[0]+v53[0])/3,(v51[1]+v52[1]+v53[1])/3,(v51[2]+v52[2]+v53[2])/3];
var t6 = [(v61[0]+v62[0]+v63[0])/3,(v61[1]+v62[1]+v63[1])/3,(v61[2]+v62[2]+v63[2])/3];
var t7 = [(v71[0]+v72[0]+v73[0])/3,(v71[1]+v72[1]+v73[1])/3,(v71[2]+v72[2]+v73[2])/3];
//var l0 =
var zTransform1 = m4.transformPoint(Tmcpv1,t0)[2];
var zTransforms = [m4.transformPoint(Tmcpv1,t0)[2],m4.transformPoint(Tmcpv1,t1)[2],
m4.transformPoint(Tmcpv1,t2)[2],m4.transformPoint(Tmcpv1,t3)[2],m4.transformPoint(Tmcpv1,t4)[2],
m4.transformPoint(Tmcpv1,t5)[2],m4.transformPoint(Tmcpv1,t6)[2],m4.transformPoint(Tmcpv1,t7)[2],
m4.transformPoint(Tmcpv2,t0)[2],m4.transformPoint(Tmcpv2,t1)[2],m4.transformPoint(Tmcpv2,t2)[2],
m4.transformPoint(Tmcpv2,t3)[2],m4.transformPoint(Tmcpv2,t4)[2],m4.transformPoint(Tmcpv2,t5)[2],
m4.transformPoint(Tmcpv2,t6)[2],m4.transformPoint(Tmcpv2,t7)[2] ];
var temp;
var i =0;
var j = 0;
//sort the transformed z's from closest to farthest
for(j = 0; j < 16; j++)
for(i = 0; i < 16; i++) {
if(zTransforms[i] > zTransforms[i+1]) {
temp = zTransforms[i];
zTransforms[i] = zTransforms[i+1];
zTransforms[i+1] = temp;
}
}
//this goes through the transformed points and draws the triangles from farthest away to closest
if(box.checked != true)
for(i = 15; i >=0 ; i--)
{
//object 2
if(m4.transformPoint(Tmcpv2,t0)[2] == zTransforms[i])
drawTriangle(v01,v02,v03,"cyan",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t1)[2] == zTransforms[i])
drawTriangle(v11,v12,v13,"blue",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t2)[2] == zTransforms[i])
drawTriangle(v21,v22,v23,"aqua",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t3)[2] == zTransforms[i])
drawTriangle(v31,v32,v33,"violet",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t4)[2] == zTransforms[i])
drawTriangle(v41,v42,v43,"cyan",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t5)[2] == zTransforms[i])
drawTriangle(v51,v52,v53,"blue",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t6)[2] == zTransforms[i])
drawTriangle(v61,v62,v63,"aqua",Tmcpv2);
if(m4.transformPoint(Tmcpv2,t7)[2] == zTransforms[i])
drawTriangle(v71,v72,v73,"violet",Tmcpv2);
//object 1
if(m4.transformPoint(Tmcpv1,t0)[2] == zTransforms[i])
drawTriangle(v01,v02,v03,"darkred",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t1)[2] == zTransforms[i])
drawTriangle(v11,v12,v13,"crimson",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t2)[2] == zTransforms[i])
drawTriangle(v21,v22,v23,"red",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t3)[2] == zTransforms[i])
drawTriangle(v31,v32,v33,"yellow",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t4)[2] == zTransforms[i])
drawTriangle(v41,v42,v43,"darkred",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t5)[2] == zTransforms[i])
drawTriangle(v51,v52,v53,"crimson",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t6)[2] == zTransforms[i])
drawTriangle(v61,v62,v63,"red",Tmcpv1);
if(m4.transformPoint(Tmcpv1,t7)[2] == zTransforms[i])
drawTriangle(v71,v72,v73,"yellow",Tmcpv1);
}
/**
Some notes:
Due to the limitations of the painters algorithm and matching transformed z
coordinates, the visual realism is restricted even though we sorted the
triangles and drew all of them based on their distance away
**/
if(box.checked == true){
drawStar(Tmcpv1,scale,"yellow");
drawStar(Tmcpv2,scale,"blueviolet");
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
};
</script>
</body>
</html>