let w, h, ctx // maze dimensions const width = 5, height = 5, depth = 5 let maze // angles of rotation (α = XY, β = XZ) let α = Math.PI/6, β = Math.PI/6 onload = () => { const cvs = document.querySelector('canvas') w = cvs.width = 3*innerWidth h = cvs.height = 3*innerHeight ctx = cvs.getContext('2d') ctx.lineWidth = 1 //ctx.lineCap = 'round' ctx.fillStyle = 'rgba(255,128,128,0.1)' maze = generateMaze(width, height, depth) // add start and finish maze[0][0][0].wallBkwrd = false maze[width-1][height-1][depth-1] .wallFwrd = false initInput() animate() } function initInput() { document.querySelector('input').oninput = e => { α = e.target.value * Math.PI / 180 } } function generateMaze(n, m, l) { cells = [] // initialize with closed cells for(let x = 0; x < n; x++) { cells.push([]) for(let y = 0; y < m; y++) { cells[x].push([]) for(let z = 0; z < l; z++) { cells[x][y].push({ x: x, y: y, z: z, wallTop: true, wallBottom: true, wallLeft: true, wallRight: true, wallFwrd: true, wallBkwrd: true, visited: false }); } } } // start from (0, 0, 0) and go! stack = [cells[0][0][0]] while(stack.length > 0) { curr = stack[stack.length - 1] const x = curr.x const y = curr.y const z = curr.z curr.visited = true // check neighbors activeCells = [] if(x > 0 && !cells[x-1][y][z].visited) { activeCells.push(cells[x-1][y][z]) } if(y > 0 && !cells[x][y-1][z].visited) { activeCells.push(cells[x][y-1][z]) } if(z > 0 && !cells[x][y][z-1].visited) { activeCells.push(cells[x][y][z-1]) } if(x < n-1 && !cells[x+1][y][z].visited) { activeCells.push(cells[x+1][y][z]) } if(y < m-1 && !cells[x][y+1][z].visited) { activeCells.push(cells[x][y+1][z]) } if(z < l-1 && !cells[x][y][z+1].visited) { activeCells.push(cells[x][y][z+1]) } if(activeCells.length > 0) { next = activeCells[Math.floor (Math.random()*activeCells.length)] // remove wall between cells if(x != next.x) { if(x < next.x) { curr.wallRight = false next.wallLeft = false } else { curr.wallLeft = false next.wallRight = false } } if(y != next.y) { if(y < next.y) { curr.wallTop = false next.wallBottom = false } else { curr.wallBottom = false next.wallTop = false } } if(z != next.z) { if(z < next.z) { curr.wallFwrd = false next.wallBkwrd = false } else { curr.wallBkwrd = false next.wallFwrd = false } } stack.push(next) } else { stack.pop() } } return cells } function animate() { ctx.clearRect(0, 0, w, h) β += 0.005 renderMaze(maze) requestAnimationFrame(animate) } function renderMaze(maze) { ctx.clearRect(0, 0, w, h) const n = maze.length const m = maze[0].length const l = maze[0][0].length const side = 0.85 * Math.min(w/n, h/m, w/l) const project = projector(n, m, l, side) for(let ix = 0; ix < n; ix++) for(let iy = 0; iy < m; iy++) for(let iz = 0; iz < l; iz++) { const cell = maze[ix][iy][iz] if(cell.wallBkwrd) { renderRect( project(ix, iy, iz), project(ix+1, iy, iz), project(ix+1, iy+1, iz), project(ix, iy+1, iz)) } if(cell.wallFwrd) { renderRect( project(ix, iy, iz+1), project(ix+1, iy, iz+1), project(ix+1, iy+1, iz+1), project(ix, iy+1, iz+1)) } if(cell.wallLeft) { renderRect( project(ix, iy, iz), project(ix, iy, iz+1), project(ix, iy+1, iz+1), project(ix, iy+1, iz)) } if(cell.wallRight) { renderRect( project(ix+1, iy, iz), project(ix+1, iy, iz+1), project(ix+1, iy+1, iz+1), project(ix+1, iy+1, iz)) } if(cell.wallBottom) { renderRect( project(ix, iy, iz), project(ix, iy, iz+1), project(ix+1, iy, iz+1), project(ix+1, iy, iz)) } if(cell.wallTop) { renderRect( project(ix, iy+1, iz), project(ix, iy+1, iz+1), project(ix+1, iy+1, iz+1), project(ix+1, iy+1, iz)) } } } function renderRect(p1, p2, p3, p4) { ctx.beginPath() ctx.moveTo(...p1) ctx.lineTo(...p2) ctx.lineTo(...p3) ctx.lineTo(...p4) ctx.closePath() ctx.fill() ctx.stroke() } function projector(n, m, l, side) { return function(ix, iy, iz) { // reading original coordinates const cx = ix - n/2 const cy = iy - m/2 const cz = iz - l/2 // rotating them around const rx = (cx*Math.cos(β) - cz*Math.sin(β)) const rz = (cx*Math.sin(β) + cz*Math.cos(β)) const ry = cy*Math.cos(α) + rz*Math.sin(α) // project onto canvas const x = w/2 + side*rx const y = h/2 + side*ry return [x, y] } }

3D maze generator