JavaScript
// Geometry of a Model
var cubes = [];
class Cube {
constructor(a) {
this.offset = a;
this.color = 'rgba(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ', 0.3)';
var v = [-1, -1, -1, 1, -1, -1, 1, -1, 1,
-1, -1, 1, -1, 1, -1, 1, 1, -1,
1, 1, 1, -1, 1, 1];
var t = [0, 1, 2, 2, 3, 0, 4, 5, 6, 6, 7, 4,
0, 1, 4, 1, 4, 5, 1, 2, 5, 2, 5, 6,
2, 3, 6, 3, 6, 7, 3, 0, 7, 0, 7, 4
];
this.dx = -25 + 5 * (this.offset / 10);
this.dy = -3 + Math.random() * 6;
this.dz = -25 + 5 * (this.offset % 10);
this.trngls = [];
this.points = [];
for (var j = 0; j < v.length; j += 3) {
this.points.push(this.dx + v[j], this.dy + v[j + 1], this.dz + v[j + 2]);
}
for (var j = 0; j < t.length; j++) {
this.trngls.push(this.offset * 8 + t[j]);
}
}
}
for (var i = 0; i < 100; i++) {
cubes.push(new Cube(i));
}
var cnv = document.getElementById("cnv"),
ctx = cnv.getContext("2d");
cnv.width = 500;
cnv.height = 400;
update();
var pos = 0;
var angle = 0;
document.body.addEventListener('keydown', function(e) {
var code = e.keyCode;
switch (code) {
case 37:
angle -= 2;
break; //Left key
case 38:
pos += 2;
break; //Up key
case 39:
angle += 2;
break; //Right key
case 40:
pos -= 2;
break; //Down key
default:
alert(code); //Everything else
}
});
function handle(e) {
}
var positions = [];
function update() {
positions = [];
var t = Date.now(),
ang = (angle * 0.0123),
s = Math.sin(ang),
c = Math.cos(ang);
var allPoints = [];
var allTrngls = [];
var allColors = [];
var mat = [c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 4 - (pos * 0.123)];
ctx.clearRect(0, 0, 500, 500);
for (var i = 0; i < cubes.length; i++) {
allPoints.push(...cubes[i].points);
...