JSFiddle - React, Tailwind, and code Playground

by andyvanee

HTML

<canvas id="cnv"></canvas>

JavaScript

e// 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;
var left=false,right=false,up=false,down=false;
document.body.addEventListener('keydown', function(e) {
updateKeys(e.keyCode, true);
});
document.body.addEventListener('keyup', function(e) {
updateKeys(e.keyCode, false);
});

function updateKeys(code,val) {
  switch (code) {
    case 37:
      left=val;
      break; //Left key
    case 38:
      up=val;
      break; //Up key
    case 39:
      right=val;
      break; //Right key
    case 40:
      down=val;
      break; //Down key
  }
}

function handle(e) {

}
var positions = [];

function update() {
		if(left)angle-=2;
    if(right)angle+=2;
    if(up)pos+=2;
    if(down)pos-=2;

  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,...