Untitled

<!DOCTYPE html>
<html>
<head>
<title>bad three dimensional thing</title>
<style>
canvas { border: 1px solid black; border-radius:5px }
body { background-image: url(https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png);}
</style>

</head>
<canvas width=500 height=500 id=canvas></canvas><br>
<input type="range" id="zx" min="-5" max="5" step="0.05" value="0.5"><span id=zxd>0.5</span><br>
<input type="range" id="zy" min="-5" max="5" step="0.05" value="0.5"><span id=zyd>0.5</span><br>
<input type="checkbox" checked id="spin"><label for=spin>spin</label>
<script>
var zx = 0.5;
var zy = 0.5;

document.getElementById("zx").addEventListener("input", function(e) {
	var val = this.value;
	zx = val;
	document.getElementById("zxd").innerHTML = val.toString();
	go();
});
document.getElementById("zy").addEventListener("input", function(e) {
	var val = this.value;
	zy = val;
	document.getElementById("zyd").innerHTML = val.toString();
	go();
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function rotVert(v,th) {
	var c = Math.cos(th);
	var s = Math.sin(th);

	return [c*v[0] + s*v[2], v[1], -s*v[0] + c*v[2]];
}

function projVert(v) {
	return [v[0] + zx*v[2], v[1] + zy*v[2]];
}

function niceVert(v) {
	return [70*v[0]+250, 70*v[1]+200]
}

var vertices = [
	[-1,-1,-1],
	[-1,-1, 1],
	[-1, 1,-1],
	[-1, 1, 1],
	[ 1,-1,-1],
	[ 1,-1, 1],
	[ 1, 1,-1],
	[ 1, 1, 1]
];

ctx.fillStyle = "red";
ctx.strokeStyle = "white";

var angle = 0;
var frame = 0;

var gradient = ctx.createLinearGradient(0,0,500,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","orange");
gradient.addColorStop("1.0","lightsteelblue");

ctx.font = "80px sans serif";

function go() {
	ctx.fillStyle="purple";
	ctx.fillRect(0,0,500,500);
	ctx.fillStyle=gradient;
	for (var i = 0; i < 8; i++) {
		var v = vertices[i];
		var p = niceVert(projVert(rotVert(v,angle)));
		ctx.fillRect(p[0]-10,p[1]-10,20,20);
	}

	for (var i = 0; i < 8; i++) {
		for (var j = 0; j < 8; j++) {
			var v1 = vertices[i];
			var v2 = vertices[j];
			var d = 0;
			for (var p = 0; p < 3; p++) {
				if (v1[p]  != v2[p]) {
					d += 1;
				}
			}
			if (d==1) {
				var p1 = niceVert(projVert(rotVert(v1,angle)));
				var p2 = niceVert(projVert(rotVert(v2,angle)));
				ctx.beginPath();
				ctx.moveTo(p1[0],p1[1]);
				ctx.lineTo(p2[0],p2[1]);
				ctx.stroke();
			}
		}
	}

	ctx.fillStyle = gradient;
	var x = (frame % 100)*3;
	ctx.fillText("yuor text here",x,450);
}

function step() {
	go();
	if (document.getElementById("spin").checked) {
		angle += 0.05;
	}
	frame += 1;
	requestAnimationFrame(step);
}
step();


</script>