@rawify/vector3
Version:
The RAW JavaScript 3D Vector library
63 lines (49 loc) • 1.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Polygon demo</title>
<script type="text/javascript" src="../lib/sylvester-min.js"></script>
</head>
<body>
<canvas id="screen" width="800" height="600"></canvas>
<script type="text/javascript">
var P = Polygon.create([
[0,0], [5,0], [5,5], [0,5], [0,10],
[5,10], [0,5], [5,5], [10,10], [10,15],
[-5,15], [-5,5],
[-10,5], [-10,0], [-5,0], [-5,-5], [0,-5]
])
.scale(25, [0,0,0])
.translate([400,380,0]);
var trigs = P.toTriangles(),
screen = document.getElementById('screen'),
ctx = screen.getContext('2d');
function draw() {
ctx.fillStyle = 'black';
ctx.fillRect(0,0, 800,600);
var i, n, c;
for (i = 0, n = trigs.length; i < n; i++) {
c = Math.round(255 * (i+1) / n);
ctx.fillStyle = 'rgb(' + [c,c,c].join(',') + ')';
ctx.beginPath();
ctx.moveTo(trigs[i].v(1).e(1), 800 - trigs[i].v(1).e(2));
ctx.lineTo(trigs[i].v(2).e(1), 800 - trigs[i].v(2).e(2));
ctx.lineTo(trigs[i].v(3).e(1), 800 - trigs[i].v(3).e(2));
ctx.fill();
}
};
draw();
var angle = Math.PI/36,
axis = $L([400,380], [0.3,1.4,1]);
setInterval(function() {
P.rotate(angle, axis);
draw();
}, 20);
var i = 0;
document.onclick = function() {
trigs[i++].copyVertices();
};
</script>
</body>
</html>