-
Notifications
You must be signed in to change notification settings - Fork 125
/
dots.html
46 lines (37 loc) · 1.4 KB
/
dots.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Vectors / Matrices</title>
<script src="../lib/sylvester.js" type="text/javascript"></script>
<script src="lib/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
var dots = [], images = [], h = 500;
var axis = Vector.create([0.7,1,0.3]);
var rot = Matrix.Rotation(0.1, axis);
window.onload = function() {
for (var i = 0; i < 16; i++) {
dots[i] = Vector.create([h*(Math.random()-0.5), h*(Math.random()-0.5), h*(Math.random()-0.5)]);
insert = new Insertion.Bottom(document.body, '<img id="img_' + i + '" src="dot.png" />');
images[i] = $('img_' + i);
}
new PeriodicalExecuter(function() {
for (var i = 0; i < dots.length; i++) {
f = (dots[i].e(3) + h)/(2*h) + 0.1;
images[i].setStyle({
opacity: f - 0.1,
width: (100 * f) + 'px',
height: (100 * f) + 'px',
position: 'absolute',
top: (300 - dots[i].e(2)*f) + 'px',
left: (600 + dots[i].e(1)*f) + 'px'
});
dots[i] = rot.x(dots[i]);
}
}, 0.01);
};
</script>
</head>
<body style="background: #000;">
</body>
</html>