Value of d:
Select 1-9 to turn the cubes on and off
<head>
<script type="text/javascript" src="code.js"> </script>
</head>
<body>
<canvas id="canvas" width=500 height=500 style="border:2px solid"></canvas>
<p>
Value of d:
<input type="range" min="1" max="50" value="25" class="slider"
id="dInput" onchange="DrawScene()" list="ticks">
<output for="dInput" id="dInputValue"></output>
<datalist id="ticks">
<option value="1"></option>
<option value="12"></option>
<option value="25"></option>
<option value="36"></option>
<option value="50"></option>
</datalist>
<p>
Select 1-9 to turn the cubes on and off
<script>
'use strict'
var canvas = document.getElementById('canvas');
canvas.tabIndex=0;
canvas.addEventListener("keypress", Keypress);
var ctx = canvas.getContext('2d');
ctx.transform(1,0,0,-1,0,canvas.height);
var d = 50;
var display = [false, false, false,
false, true, false,
false, false, false];
DrawScene();
document.getElementById('dInput').value = d;
</script>
</body>
'use strict'
const CUBE_VERTS = [[-10,-10,10], [10,-10,10], [10,10,10], [-10,10,10],
[-10,-10,20], [10,-10,20], [10,10,20], [-10,10,20]]
const CUBE_EDGES = [
[0,1,"red"], [1,2,"red"], [2,3,"red"], [3,0,"red"],
[4,5,"green"], [5,6,"green"], [6,7,"green"], [7,4,"green"],
[0,4,"blue"], [1,5,"blue"], [2,6,"blue"], [3,7,"blue"],
]
function Project(pt, tx, ty) {
let x = (pt[0]+tx)*(d/pt[2]);
let y = (pt[1]+ty)*(d/pt[2]);
return [x,y];
}
function DrawLine(ctx, start, end, tx, ty) {
let a = Project(start, tx, ty);
let b = Project(end, tx, ty);
ctx.beginPath();
ctx.moveTo(a[0], a[1]);
ctx.lineTo(b[0], b[1]);
ctx.stroke();
ctx.closePath();
}
function Cube(ctx,tx, ty) {
for (let i=0; i<CUBE_EDGES.length; i++) {
let start = CUBE_EDGES[i][0];
let end = CUBE_EDGES[i][1];
let color = CUBE_EDGES[i][2];
ctx.strokeStyle = color;
DrawLine(ctx, CUBE_VERTS[start],CUBE_VERTS[end], tx, ty);
}
}
function Keypress(evnt) {
if (evnt.key >= '1' && evnt.key <= '9') {
let pos = parseInt(event.key-'1');
display[pos] = !display[pos];
DrawScene();
}
}
function DrawScene() {
ctx.clearRect(0,0,canvas.width, canvas.height);
d = document.getElementById('dInput').value
document.getElementById('dInputValue').value = d
ctx.save()
ctx.translate(canvas.width/2, canvas.height/2);
var pos =0;
for(let i =-1; i<2; i++) {
for (let j=-1; j<2; j++) {
if(display[pos]) {
Cube(ctx,50*i,50*j);
}
pos ++;
}
}
ctx.restore();
}