thomasdarimont · April 10, 2024 20:45 · ungoldman · Apr 15, 2022 · thomasdarimont · Apr 16, 2022
diff --git a/spinning-cube.html b/spinning-cube.html
 <!doctype html>
 <html>

 <head>
    <title>Spinning Cube</title>
    <script type="text/javascript">
        
        function Point3D(x,y,z) {
            
            this.x = x;
            this.y = y;
            this.z = z;

            this.rotateX = function(currentAngle) {
                
                var rad = currentAngle * Math.PI / 180;
                var cosa = Math.cos(rad);
                var sina = Math.sin(rad);
                var y = this.y * cosa - this.z * sina;
                var z = this.y * sina + this.z * cosa;
                
                return new Point3D(this.x, y, z);
            };

            this.rotateY = function(currentAngle) {
                
                var rad = currentAngle * Math.PI / 180;
                var cosa = Math.cos(rad);
                var sina = Math.sin(rad);
                var z = this.z * cosa - this.x * sina;
                var x = this.z * sina + this.x * cosa;
                
                return new Point3D(x,this.y, z);
            };

            this.rotateZ = function(currentAngle) {
                
                var rad = currentAngle * Math.PI / 180;
                var cosa = Math.cos(rad);
                var sina = Math.sin(rad);
                var x = this.x * cosa - this.y * sina;
                var y = this.x * sina + this.y * cosa;
                
                return new Point3D(x, y, this.z);
            };

            this.project = function(viewWidth, viewHeight, fieldOfView, viewDistance) {
                
                var factor = fieldOfView / (viewDistance + this.z);
                var x = this.x * factor + viewWidth / 2;
                var y = this.y * factor + viewHeight / 2;
                return new Point3D(x, y, this.z);
            };
        }

        var vertices = [
            new Point3D(-1,1,-1),
            new Point3D(1,1,-1),
            new Point3D(1,-1,-1),
            new Point3D(-1,-1,-1),
            new Point3D(-1,1,1),
            new Point3D(1,1,1),
            new Point3D(1,-1,1),
            new Point3D(-1,-1,1)
        ];

        var cubeFaces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]]

        var currentAngle = 0;
        
        var screen = {
            w : 64,
            h: 64
        };
        
        function startRendering() {
            
            var canvas = document.getElementById("renderScreen");
            if (canvas && canvas.getContext) {
                
                canvas.width = screen.w;
                canvas.height = screen.h;
                
                ctx = canvas.getContext("2d");
                
                ctx.strokeStyle = "rgb(255,15,155)"

                requestAnimationFrame(renderLoop);
            }
        }
        

        function renderLoop() {
            
            var points = new Array();
            
            ctx.fillRect(0,0, screen.h, screen.w);
            
            vertices.map(function(vertex){ 
                points.push(vertex.rotateX(currentAngle).rotateY(currentAngle).rotateZ(currentAngle).project(screen.h, screen.w,128,7));
            });
            
            cubeFaces.map(function(cubeFace){
                ctx.beginPath();
                ctx.moveTo(points[cubeFace[0]].x,points[cubeFace[0]].y);
                ctx.lineTo(points[cubeFace[1]].x,points[cubeFace[1]].y);
                ctx.lineTo(points[cubeFace[2]].x,points[cubeFace[2]].y);
                ctx.lineTo(points[cubeFace[3]].x,points[cubeFace[3]].y);
                ctx.closePath();
                ctx.stroke();          
            });
            
            currentAngle += 2;

            requestAnimationFrame(renderLoop);
        }
        
        window.onload = startRendering;
    </script>

    <style>
        body {
            background-color: rgb(0, 0, 0);
        }
        
        #renderScreen {
            transform: translate(200px, 120px) scale(5, 5);
             image-rendering: optimizeQuality;
            /* image-rendering: optimizeSpeed; */
        }
    </style>
 </head>

 <body>
    <canvas id="renderScreen"/>
 </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<title>Spinning Cube</title>
	<script type="text/javascript">

	function Point3D(x,y,z) {

	this.x = x;
	this.y = y;
	this.z = z;

	this.rotateX = function(currentAngle) {

	var rad = currentAngle * Math.PI / 180;
	var cosa = Math.cos(rad);
	var sina = Math.sin(rad);
	var y = this.y * cosa - this.z * sina;
	var z = this.y * sina + this.z * cosa;

	return new Point3D(this.x, y, z);
	};

	this.rotateY = function(currentAngle) {

	var rad = currentAngle * Math.PI / 180;
	var cosa = Math.cos(rad);
	var sina = Math.sin(rad);
	var z = this.z * cosa - this.x * sina;
	var x = this.z * sina + this.x * cosa;

	return new Point3D(x,this.y, z);
	};

	this.rotateZ = function(currentAngle) {

	var rad = currentAngle * Math.PI / 180;
	var cosa = Math.cos(rad);
	var sina = Math.sin(rad);
	var x = this.x * cosa - this.y * sina;
	var y = this.x * sina + this.y * cosa;

	return new Point3D(x, y, this.z);
	};

	this.project = function(viewWidth, viewHeight, fieldOfView, viewDistance) {

	var factor = fieldOfView / (viewDistance + this.z);
	var x = this.x * factor + viewWidth / 2;
	var y = this.y * factor + viewHeight / 2;
	return new Point3D(x, y, this.z);
	};
	}

	var vertices = [
	new Point3D(-1,1,-1),
	new Point3D(1,1,-1),
	new Point3D(1,-1,-1),
	new Point3D(-1,-1,-1),
	new Point3D(-1,1,1),
	new Point3D(1,1,1),
	new Point3D(1,-1,1),
	new Point3D(-1,-1,1)
	];

	var cubeFaces = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]]

	var currentAngle = 0;

	var screen = {
	w : 64,
	h: 64
	};

	function startRendering() {

	var canvas = document.getElementById("renderScreen");
	if (canvas && canvas.getContext) {

	canvas.width = screen.w;
	canvas.height = screen.h;

	ctx = canvas.getContext("2d");

	ctx.strokeStyle = "rgb(255,15,155)"

	requestAnimationFrame(renderLoop);
	}
	}


	function renderLoop() {

	var points = new Array();

	ctx.fillRect(0,0, screen.h, screen.w);

	vertices.map(function(vertex){
	points.push(vertex.rotateX(currentAngle).rotateY(currentAngle).rotateZ(currentAngle).project(screen.h, screen.w,128,7));
	});

	cubeFaces.map(function(cubeFace){
	ctx.beginPath();
	ctx.moveTo(points[cubeFace[0]].x,points[cubeFace[0]].y);
	ctx.lineTo(points[cubeFace[1]].x,points[cubeFace[1]].y);
	ctx.lineTo(points[cubeFace[2]].x,points[cubeFace[2]].y);
	ctx.lineTo(points[cubeFace[3]].x,points[cubeFace[3]].y);
	ctx.closePath();
	ctx.stroke();
	});

	currentAngle += 2;

	requestAnimationFrame(renderLoop);
	}

	window.onload = startRendering;
	</script>

	<style>
	body {
	background-color: rgb(0, 0, 0);
	}

	#renderScreen {
	transform: translate(200px, 120px) scale(5, 5);
	image-rendering: optimizeQuality;
	/* image-rendering: optimizeSpeed; */
	}
	</style>
	</head>

	<body>
	<canvas id="renderScreen"/>
	</body>

	</html>