JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.3.2/gl-matrix-min.js"></script>

JavaScript

var canvas = document.createElement('canvas'),
		context = canvas.getContext('2d');
   
canvas.width = canvas.height = 500;
canvas.style.cssText = `
	display: block;
  background: #000;
`;

context.fillStyle = 'white';

var center = {
	x: canvas.width / 2,
	y: canvas.height / 2
};

var boxSize = 5;

var box = new Float32Array([0,0.2,.02]);

function render (time) {
	requestAnimationFrame(render);
//	context.clearRect(0, 0, canvas.width, canvas.height);
  
	var speed = 4;
	var angleInDegrees = ((time/10) * speed) % 360,
		angleInRadians = angleInDegrees * 0.0174533;
    
	// create tranformations matrix
	var transformations = mat4.create();
	
  // z rotation
  transformations = mat4.multiply(
  	transformations,
    mat4.fromZRotation(mat4.create(), angleInRadians), 
    transformations
  );
  
  // y rotation
	transformations = mat4.multiply(
  	transformations,
    mat4.fromYRotation(mat4.create(), Math.PI*2.0 * ((time/100000.0) * speed % 1.0)),
    transformations
  );

	// initialize vertcies
	var rotatedBox = new Float32Array(box);

  	// apply transformation to vertex
	vec3.transformMat4(rotatedBox, box, transformations);

  	var size = 3 + (boxSize * rotatedBox[2]) * 3;
  
	context.fillRect(center.x - size/2 + rotatedBox[0]*canvas.width, center.y - size/2 + rotatedBox[1]*canvas.height, size, size);
}
requestAnimationFrame(render);

document.body.appendChild(canvas);