@rawify/vector3
Version:
The RAW JavaScript 3D Vector library
43 lines (35 loc) • 1.31 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Vectors / Matrices</title>
<script type="text/javascript" src="../lib/sylvester-min.js"></script>
</head>
<body style="background: #000;">
<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);
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)]);
image = document.createElement('img');
image.id = 'img_' + i;
image.src = './dot.png';
document.body.appendChild(image);
images[i] = image;
}
setInterval(function() {
for (var i = 0; i < dots.length; i++) {
f = (dots[i].e(3) + h)/(2*h) + 0.1;
images[i].style.opacity = f - 0.1;
images[i].style.width = (100 * f) + 'px';
images[i].style.height = (100 * f) + 'px';
images[i].style.position = 'absolute';
images[i].style.top = (300 - dots[i].e(2)*f) + 'px';
images[i].style.left = (600 + dots[i].e(1)*f) + 'px';
dots[i] = rot.x(dots[i]);
}
}, 20);
</script>
</body>
</html>