-
Notifications
You must be signed in to change notification settings - Fork 0
/
ViewFringesCanvas.html
123 lines (89 loc) · 2.73 KB
/
ViewFringesCanvas.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 lang="en">
<head>
<meta charset="utf-8">
<title>View Fringes</title>
<style>
canvas {
background: beige
}
</style>
</head>
<body onload="redraw();">
<canvas id="Canvas" width="700" height="700"></canvas>
<script src="data/fringes.js"></script>
<script type="text/javascript">
var elem = document.getElementById('Canvas');
var w = elem.width
var h = elem.height
var angx = 0
var angy = 0
var franjas = fringes();
function redraw () {
elem = document.getElementById('Canvas');
var context = elem.getContext('2d');
context.clearRect(0,0,w, h)
context.fillStyle = '#00f';
context.strokeStyle = '#00f';
context.save();
scale = 9;
context.translate(w*0.5, h*0.7);
context.scale(scale, -scale);
context.lineWidth = 2/scale;
my = rotay()
mx = rotax()
for (var f in franjas) {
var pontosfranja = []
for (var p = 0; p < franjas[f].length; p = p+4) {
var x = franjas[f][p][0]
var y = franjas[f][p][1]
var z = franjas[f][p][2]
var pt = produto(my, produto(mx, [x,y,z]));
pontosfranja.push([pt[0], pt[1]]);
}
context.beginPath();
context.moveTo(pontosfranja[0][0], pontosfranja[0][1]);
for (var ponto = 1; ponto < pontosfranja.length; ponto++) {
context.lineTo(pontosfranja[ponto][0], pontosfranja[ponto][1])
}
context.stroke();
}
context.restore();
}
function rotax() {
var sn = Math.sin(angx);
var cs = Math.cos(angx);
return [ 1, 0, 0,
0, cs, -sn,
0, sn, cs ]
}
function rotay() {
var sn = Math.sin(angy);
var cs = Math.cos(angy);
return [ cs, 0, sn,
0, 1, 0,
-sn, 0, cs ]
}
function produto(matriz, ponto) {
x = matriz[0] * ponto[0] + matriz[1] * ponto[1] + matriz[2] * ponto[2]
y = matriz[3] * ponto[0] + matriz[4] * ponto[1] + matriz[5] * ponto[2]
z = matriz[6] * ponto[0] + matriz[7] * ponto[1] + matriz[8] * ponto[2]
return [x, y, z]
}
document.getElementById('Canvas').onmousemove = mousemove;
document.getElementById('Canvas').onmouseout = mouseleave;
function mousemove(e) {
x = e.clientX - 10;
y = h - e.clientY + 10;
angy = (w - x/w) * Math.PI - Math.PI*0.5;
angx = -(Math.PI*y/h - Math.PI*0.5);
redraw();
}
function mouseleave(e) {
angy = 0;
angx = 0;
redraw();
}
</script>
</body>
</html>