Draw Cubes

by John Doe

HTML

<p id="log">just some logging information</p>
 <canvas width="500" height="500" id="canvas">Sorry, no canvas available</canvas>

CSS

table {
  table-layout: auto;
  border-collapse: collapse;
  border: 1px solid black;
}

td,th {
    border: 1px solid black;
}
th {
    background-color: gray;
}
tr {
    border-collapse: collapse;
    border: 1px solid black;
    float: none;
}

canvas {
    float:left;
}

div {
    float: left;
}

JavaScript

/*
 * TODO: 
 * refactor Projection
 * layer panel: 
   * add automatic extension, 
   * add a z-value control of the layers
   * maybe change background colors
 * highlighting on mouse over
 * refactor plotting such that multiple perspectives can be plotted/canvases can be used
 * SOLVER/ANALYZER:
 * check whether pieces are one solid/millable/notachble
 * build movement tree (previews?) (coordinate motion?)
 * allow forcing of impossible moves
 */

 /*
 * KNOWN BUGS:
 * in perspective projection it is not sufficient to order just by z value (take z-value before projection, instead, but this increases the comp. cost)
 */

let cubes,quads,projection,mouse,cnvs,ctx
  

function main2()
{ 
  //for testing algorithms in colour management
  clog("main")
  cnvs = document.getElementById('canvas')
  ctx = cnvs.getContext('2d')
  let radius = 100
  ctx.arc(250, 250, radius, 0, 2*Math.PI );
  ctx.stroke()
  let limit = 17
  let step = 2
  for(let k=0; k< limit; k++)
  {
    window.setTimeout(function()
    {
      let angle = 2*Math.PI/360 * 57*k
      let end = radius + (limit - k)*step
      ctx.moveTo(250+Math.cos(angle)*radius, 250+Math.sin(angle)*radius)
      ctx.lineTo(250+Math.cos(angle)*end, 250+Math.sin(angle)*end)
      ctx.fillText(k, 250+Math.cos(angle)*(radius + step*limit), 250+Math.sin(angle)*(radius + step*limit)); 
      ctx.stroke()
    }, 500*k)
  }
}






function main()
{ 
  clog("main")
  cnvs = document.getElementById('canvas')
  ctx = cnvs.getContext('2d')
  cubes = []
  quads =[]
  projection = {}
  mouse = {}

  mouse = new Mouse()
  eraseCanvas()
  clog("push cube")
  Cube.cubesFromArray(generateSomeArrangement())
  clog(cubes)
  Quad.quadsFromCubes()
  clog("projection")
  projection = new Projection()
  controlsSetup()
  projection.projectQuads()
  clog("drawing")
  Quad.drawQuads()
  log("finished main")
  let l = new Layer()
}


function generateSomeArrangement()
{
  let a = [
    [
      [1,1,1],
      [1,2,2],
      [1,3,3]
    ],
   ...