30:Tbe8,mouse_bindings = { let animating = false; let id; let startCell = labyrinth.longestPath[0] let pathLen = labyrinth.longestPath.length; let endCell = labyrinth.longestPath[pathLen-1]; // Animation for when the player reaches the destination let success = function() { let counter = 0; cubes.visible = false; scene.add(youWin); camera.position.set(0,0,1.); camera.quaternion.identity(); function animation () { counter += 1; let xangle = Math.sin (counter/40)*30*Math.PI/180; let yangle = Math.cos (counter/50)*30*Math.PI/180; scene.rotation.set(xangle,yangle,0); renderer.render(scene,camera); if (counter == 3000) { clearInterval(id); } } animating = true; id = setInterval(animation, 1000/30); } // Rotates the camera let rotate = function (direction) { if (animating) return; // Dont do anything if its still finishing animation let oldRot = camera.quaternion.clone(); let newRot = camera.quaternion.clone().multiply(rotations[direction]); let counter = 0; function animation () { counter += 1; THREE.Quaternion.slerp (oldRot,newRot,camera.quaternion,counter/60); renderer.render(scene,camera); if (counter == 60) { clearInterval(id); animating = false; } } animating = true; id = setInterval(animation, 1000/60); } // Walks ahead let ahead = function () { if (animating) return; // Ignore if already animating let fwd = new THREE.Vector3(); camera.matrix.extractBasis(new THREE.Vector3(),new THREE.Vector3(),fwd) let currentCoords = camera.gridCoords; let wallCoords = currentCoords.map ((x,i) => x - Math.round (fwd.getComponent(i))); let [i,j,k] = wallCoords; if (labyrinth[i][j][k] == ".") { let nextCoords = currentCoords.map ((x,i) => x - 2* Math.round (fwd.getComponent(i))); let counter = 0; let prev = camera.position.clone(); let next = new THREE.Vector3(...boxPos(...nextCoords)); function animation () { counter += 1; camera.position.lerpVectors(prev,next,counter/60); renderer.render (scene,camera); if (counter == 60) { camera.gridCoords = nextCoords; labyrinth.checkFlags[nextCoords].visible = true; clearInterval(id); animating = false; if (nextCoords[0] == endCell[0] && nextCoords[1] == endCell[1] && nextCoords[2] == endCell[2]) { success(); } } } animating = true; id = setInterval(animation, 1000/60); } } let [w,h] = [canvas.width,canvas.height]; canvas.onclick = (e) => { let [i,j] = [~~(e.offsetX/w*3),~~(e.offsetY/h*3)]; if (i == 1) { if (j == 1) ahead() else if (j == 0) rotate('up') else if (j == 2) rotate('down') } else { if (i == 0) rotate('left') else if (i == 2) rotate('right') } } invalidation.then(() => { if (animating) clearInterval(id); }) }31:T5a3,make3dLabyrinth = function (nx,ny,nz) { let lab = []; let [imax,jmax,kmax] = [nx,ny,nz].map(n=>2*n+1) // Fill the labyrinth for (let i = 0; i < imax; i++) { lab.push([]) for (let j = 0; j < jmax; j++) { lab[i].push([]); for (let k = 0; k < kmax; k++) { lab[i][j][k] = (i&j&k&1) == 1 ? 'U' : 'W'; } } } // Directions to walk let dir = [[1,0,0],[-1,0,0], [0,1,0],[0,-1,0], [0,0,1],[0,0,-1]]; // Function to shuffle an array let shuffle = (array) => { // Make a copy array = [...array] for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i [array[i], array[j]] = [array[j], array[i]]; } return array } // Make a random walk breaking walls starting from cell i,j,k let visit = (i,j,k) => { lab [i][j][k] = '.' let longest = []; for (let [di,dj,dk] of shuffle(dir)) { let [I,J,K] = [i+di*2,j+dj*2,k+dk*2]; if (I<0||J<0||K<0||I>=imax||J>=jmax||K>=kmax) continue; if (lab[I][J][K] == 'U') { lab [i+di][j+dj][k+dk] = '.' let newpath = visit (I,J,K) if (newpath.length > longest.length) longest = newpath } } longest.push([i,j,k]) return longest } let path = visit (~~(Math.random()*nx)*2+1,~~(Math.random()*ny)*2+1,~~(Math.random()*nz)*2+1); lab.longestPath = path; return lab } 32:T834,// Returns a group with all 3d elements of the maze, including // the walls and the sprites cubes = { let materials = []; let geometries = [[[],[]],[[],[]]]; let getCubeGeometry = (i,j,k) => geometries[i%2][j%2][k%2] || (geometries[i%2][j%2][k%2] = new THREE.BoxBufferGeometry (...boxSize(i,j,k).map(x=>x))); let getCubeMaterial = i => materials[i] || (materials[i] = new THREE.MeshStandardMaterial ( {color:new THREE.Color().setHSL(Math.random(),1,0.5)})); let beamMaterial = new THREE.MeshStandardMaterial(0xffffff); let cubes = new THREE.Group(); let spriteMap = new THREE.CanvasTexture (await FileAttachment('whitecheck.png').image()); let checkMaterial = new THREE.SpriteMaterial( { map: spriteMap } ); spriteMap = new THREE.CanvasTexture (await FileAttachment('exit.png').image()); let exitMaterial = new THREE.SpriteMaterial( { map: spriteMap } ); let startCell = labyrinth.longestPath[0] let pathLen = labyrinth.longestPath.length; let endCell = labyrinth.longestPath[pathLen-1]; labyrinth.checkFlags = {}; for (let i = 0; i < labyrinth.length; i++) { for (let j = 0; j < labyrinth[i].length; j++) { for (let k = 0; k < labyrinth[i][j].length; k++) { let cubetype = labyrinth[i][j][k]; if (cubetype != '.') { let material = (boxSize(i,j,k).reduce((a,b) => a+b)<2) ? beamMaterial : getCubeMaterial(~~(Math.random()*4)); let cube = new THREE.Mesh(getCubeGeometry(i,j,k), material); cube.position.set (...boxPos(i,j,k)) cubes.add (cube) } else if (i&j&k&1) { let flag; if (i == endCell[0] && j == endCell[1] && k == endCell[2]) { flag = new THREE.Sprite( exitMaterial ); } else { flag = new THREE.Sprite( checkMaterial ); flag.visible = false; } labyrinth.checkFlags[[i,j,k]] = flag; flag.position.set (...boxPos(i,j,k)); flag.scale.set (0.4,0.4,0.4); cubes.add (flag) } } } } return cubes }33:[{"id":"8f0c76b4c5b18a30f19518ac4e8863c6caadc0469859ecbc9311954429969229f9ec4e970b4819d4f79f175e4ea9889f4dd4890868402463141ff1ee539d7608","href":"https://static.observableusercontent.com/files/8f0c76b4c5b18a30f19518ac4e8863c6caadc0469859ecbc9311954429969229f9ec4e970b4819d4f79f175e4ea9889f4dd4890868402463141ff1ee539d7608","name":"exit.png","type":"image/png","lastModified":1599256020722.991,"size":12521},{"id":"cb47fe65703ae0fdd8658efe34b882c0f51a5316302f59ae2106e480a86788a27bd69672f2022af0b6c06c681ac9ba6843b4cd4abf7769f2e0c9874e7d0cf6cd","href":"https://static.observableusercontent.com/files/cb47fe65703ae0fdd8658efe34b882c0f51a5316302f59ae2106e480a86788a27bd69672f2022af0b6c06c681ac9ba6843b4cd4abf7769f2e0c9874e7d0cf6cd","name":"whitecheck.png","type":"image/png","lastModified":1599255848891.612,"size":13401}] 2e:{"title":"3D Labyrinth","cells":[{"id":0,"value":"md`# 3D Labyrinth`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"canvas = DOM.canvas(800,600)","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"{\n let sizes = {'Small 2d (3 x 3)' : [3,1,3],\n 'Medium 2d (6 x 6)' : [5,1,6],\n 'Large 2d (12 x 12)' : [12,1,12],\n 'Small 3d (2 x 3 x 3)' : [2,3,3],\n 'Medium 3d (4 x 4 x 4)' : [4,4,4],\n 'Large 3d (6 x 5 x 5)' : [6,5,5]\n };\n\n let div = html`

\n \n `;\n \n for (let s of Object.keys(sizes)) {\n let button = html`${s}`;\n button.onclick = () => {\n mutable labSize = sizes[s]\n }\n div.append(button)\n }\n return div\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`

\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"mutable labSize = [1,3,3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"labyrinth = make3dLabyrinth (...labSize)","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"renderer = new THREE.WebGLRenderer ({canvas, antialias:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"camera = {\n let camera = new THREE.PerspectiveCamera(120, canvas.width/canvas.height, 0.1, 100)\n return camera\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"lights = {\n let lights = new THREE.Group();\n let lightDir = new THREE.DirectionalLight (0xffffff, 1);\n lightDir.position.set(1,2,5);\n let lightDir2 = new THREE.DirectionalLight (0xffffff, 1);\n lightDir2.position.set(-1,-2,-5);\n let lightAmb = new THREE.AmbientLight (0x303030); \n lights.add (lightAmb, lightDir, lightDir2)\n return lights\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"// Thickness of the walls w.r.t. cell \nthickness = 0.1","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"// x,y,z coordinates of the center of cell i,j,k\nfunction boxPos (i,j,k) {\n let [sx,sy,sz] = boxSize(i,j,k)\n return [Math.floor(i/2)*(1+thickness)+(i%2)*thickness + sx/2,\n Math.floor(j/2)*(1+thickness)+(j%2)*thickness + sy/2,\n Math.floor(k/2)*(1+thickness)+(k%2)*thickness + sz/2]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"// x,y,z size of the box representing grid cell i,j,k\nfunction boxSize (i,j,k) {\n return [i%2 ? 1 : thickness, \n j%2 ? 1 : thickness, \n k%2 ? 1 : thickness]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"// \n// A mesh showing a cheery message. \n//\nyouWin = {\n let geom = textGeometry(\"You win!\")\n let mesh = new THREE.Mesh (geom,new THREE.MeshStandardMaterial({color: 0xff0000 }))\n let {center,radius} = geom.boundingSphere;\n let s = 1/radius\n mesh.position.set(-center.x*s,-center.y*s,-center.z*s);\n mesh.scale.set (s,s,s);\n return mesh;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"//\n// The scene\n//\nscene = {\n let scene = new THREE.Scene();\n scene.background = new THREE.Color(0xCCCCCC);\n scene.add(cubes) \n scene.add(lights)\n return scene\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"// Starts the interaction\nstart = {\n let path = labyrinth.longestPath;\n camera.gridCoords = path[0];\n labyrinth.checkFlags[path[0]].visible = true;\n camera.position.set (...boxPos(...camera.gridCoords));\n camera.quaternion.identity()\n renderer.render(scene,camera)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"// Quaternions for the 4 3d rotations\nrotations = {\n let halfTurn = Math.PI/2;\n let rot = (dx,dy) => new THREE.Quaternion().setFromEuler(new THREE.Euler(dx*halfTurn,dy*halfTurn,0));\n return {\n left: rot(0,1),\n right: rot (0,-1),\n up: rot (1,0),\n down : rot (-1,0)\n }\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"// {\n// let canvas = DOM.canvas(800,600)\n// let renderer = new THREE.WebGLRenderer ({canvas, antialias:true});\n// let material = new THREE.MeshStandardMaterial ( 0x1111ff );\n// let path = labyrinth.longestPath;\n// let curve = new THREE.Curve();\n// curve.getPoint = function (t) {\n// let i = t * (path.length-1)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"THREE = require('three@0.119.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"import {textGeometry} from '@esperanc/3d-fonts' ","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}