30:Ta7b,md`# 3D Virtual Gallery Virtual tours are offered by several museums around the world such as the [Louvre](https://petitegalerie.louvre.fr/visite-virtuelle/saison1/#/petite_galerie_5/), or the [British Museum](https://www.google.co.uk/maps/@51.5192048,-0.1274951,2a,75y,172.87h,89.26t/data=!3m6!1e1!3m4!1sFyBuFtvu6FeVvVVc5--uiw!2e0!7i13312!8i6656?hl=en). These use the "panorama" approach, where several pictures of a real exhibition are stitched together in order to provide a 360^o view around spots along the gallery. A more immersive experience can be achieved through *virtual reality* (VR). A good example is the Smithsonian American Art Museum ["Beyond The Walls"](https://store.steampowered.com/app/1087320/Smithsonian_American_Art_Museum_Beyond_The_Walls/) software. The main limitations of this approach are the hardware requirements. On the other hand, if you want to show a few pictures rendered in a 3d scene, you can resort to free software such as the [Shutdown Gallery](https://shutdown.gallery/), or to several sites that offer this kind of thing as a service, such as [ArtSteps](https://www.artsteps.com/). Building a virtual gallery, however, normally requires modeling a nice 3D scene where the artifacts are placed at strategic places. Here we take a more cavalier approach by building a random 3d labyrinth, tumbling down some walls to make for more space and then hanging pictures, also randomly. It uses [three.js](threejs.org) to create a 3d maze which you can navigate using first-person shooter game style interaction. Click on the left, right or center of the canvas to rotate left, right or to move ahead. You can also click directly on a picture or a floor tile to move directly there. When you are in front of a particular picture, its title is shown above it, and you can click on it to open an iframe with the corresponding link. The floor plan can be viewed by clicking on the ${buttonIcons.fly} icon. In order to provide content to the gallery, all you need to do is to create a table with paintings (images), titles and links. In this demo I use Creative Commons images and links scraped from [Wikipedia](en.wikipedia.org) and a few other places. You can choose a collection from the menu below. You can also choose to leave "bread crumbs" along the way (shown as checkmarks) so you don't lose your way. **Credits:** * [Wikipedia](https://wikipedia.org) (obviously), for the pictures of artwork exhibited in museums around the world. * [Hdrihaven](https://hdrihaven.com) for the background imagery. This [tool](https://matheowis.github.io/HDRI-to-CubeMap/) for converting hdri pictures to cube maps was especially useful. `31:T5c7,mainFrame = { const mainFrame = html`

`; mainFrame.style["width"] = `${width}px`; mainFrame.style["height"] = `${height}px`; mainFrame.style["text-align"] = "center"; mainFrame.style.position = "relative"; mainFrame.append(canvas); const frame = html`

`; frame.style["width"] = `${width}px`; frame.style["height"] = `${height}px`; frame.style["text-align"] = "center"; frame.style.display = "inline-block"; //frame.style.border = "1px solid gray"; frame.style.position = "absolute"; frame.style.top = "0px"; frame.style.left = "0px"; frame.style["pointer-events"] = "none"; mainFrame.append(frame); for (let sym of Object.getOwnPropertyNames(buttons)) { let b = buttons[sym]; b.style.position = "absolute"; b.style["z-index"] = "10"; b.style["box-shadow"] = "4px 4px 5px 0px rgba(0,0,0,.2)"; b.style["pointer-events"] = "auto"; b.style["user-select"] = "none"; frame.append(b); } const bwidth = buttonSizeRatio * width; buttons['left'].style.left = buttons['fly'].style.left = buttons[ 'walk' ].style.left = "10px"; buttons['up'].style.left = `${(width - bwidth) / 2}px`; buttons['right'].style.left = `${width - bwidth - 10}px`; buttons['left'].style.bottom = buttons['up'].style.bottom = buttons[ 'right' ].style.bottom = "10px"; buttons['fly'].style.top = buttons['walk'].style.top = "10px"; frame.append(title); frame.append(loadBar); return mainFrame; }32:T5d1,// // A miscellanea collection with a few paintings and creative coding works // miscellanea = [ { src: "https://upload.wikimedia.org/wikipedia/commons/6/67/Ismael_Nery_-_Nude_woman_crouching_-_sd.jpg", title: "Ismael Nery - Nude Woman Crouching, ca. 1930", link: "https://en.wikipedia.org/wiki/Brazilian_painting#/media/File:Ismael_Nery_-_Nude_woman_crouching_-_sd.jpg" }, { src: "https://upload.wikimedia.org/wikipedia/commons/f/f3/00472-Jader-Siqueira---Tr%C3%ADp.jpg", title: "Jader Siqueira - Triptych, 1977", link: "https://en.wikipedia.org/wiki/Brazilian_painting#/media/File:00472-Jader-Siqueira---Tr%C3%ADp.jpg" }, { src: "https://upload.wikimedia.org/wikipedia/commons/4/42/00031-Trindade-Leal----Gine.jpg", title: "Trindade Leal, Ginete. 1951", link: "https://en.wikipedia.org/wiki/Brazilian_painting#/media/File:00031-Trindade-Leal----Gine.jpg" }, { src: FileAttachment("mandala.png"), title: "Claudio Esperanca - Sketch Mandala", link: "https://observablehq.com/embed/@esperanc/sketch-mandala?cells=canvas" }, { src: "https://showcase.p5js.org/static/media/16.115cb70d.png", title: "36 Days of Type x p5.js", link: "https://36xp5.site/" }, { src: "https://showcase.p5js.org/static/media/32.ffa6848c.png", title: "Christina Dacanay (She/they) from Brooklyn, USA - Fireflies", link: "https://showcase.p5js.org/#/2020-All/project-32/" } ]33:T1ea5,interaction = { start; let animating = false; let id; let startCell = labyrinth.longestPath[0]; let pathLen = labyrinth.longestPath.length; let endCell = labyrinth.longestPath[pathLen - 1]; // Converts painting dir orientations to camera rotation angles around the y axis and vice versa const dirToYRot = [-Math.PI / 2, Math.PI / 2, Math.PI, 0]; const yRotToDir = { "-1": 0, 1: 1, 2: 2, 0: 3 }; // Current camera Y rotation angle const curCameraYRot = quat => { return new THREE.Euler().setFromQuaternion(quat || camera.quaternion, "YXZ") ._y; }; // Which wall direction camera currently points to const curCameraDir = () => { let angle = curCameraYRot(); return yRotToDir[Math.round(angle / (Math.PI / 2))]; }; // The currently viewed painting let currentPainting = null; // Non null if the painting popup is being shown let paintingPopupClose = null; // Opens a popup for the current painting const paintingPopup = function() { if (paintingPopupClose) return; const fwidth = canvas.width * 0.8; const fheight = canvas.height * 0.8; const ftop = canvas.height * 0.1; const fleft = canvas.width * 0.1; paintingPopupClose = popupFrame( mainFrame, currentPainting.link, ftop, fleft, fwidth, fheight, () => { paintingPopupClose = null; } ); }; // Something that is done whenever the camera moves to another point let cCell = camera.gridCoords; let cDir = curCameraDir(); const checkPosition = () => { cCell = camera.gridCoords; cDir = curCameraDir(); currentPainting = null; if (!flying) { for (let obj of paintingGroup.children) { let { painting, cell, dir } = obj.paintingProperties; if ( dir == cDir && cell[0] == cCell[0] && cell[1] == cCell[1] && cell[2] == cCell[2] ) { title.removeChild(title.children[0]); title.append(html`

${painting.title} 🔎

`); currentPainting = painting; break; } } } if (currentPainting) { title.style.visibility = "visible"; title.onclick = paintingPopup; } else { title.style.visibility = "hidden"; } return { cCell, cDir }; }; const noAnimation = () => {}; let repeatAnimation = noAnimation; // Rotates the camera const rotate = function(direction) { title.style.visibility = "hidden"; 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; checkPosition(); repeatAnimation(); } } animating = true; id = setInterval(animation, 1000 / 60); }; // Walks to a given cell const moveTo = function(nextCoords, nextQuat, cellCoords) { title.style.visibility = "hidden"; if (animating) return; // Dont do anything if its still finishing animation let counter = 0; let prev = camera.position.clone(); let next = new THREE.Vector3( ...(cellCoords ? boxPos(...cellCoords) : nextCoords) ); let oldQuat = camera.quaternion.clone(); function animation() { counter += 1; camera.position.lerpVectors(prev, next, counter / 60); if (nextQuat) THREE.Quaternion.slerp( oldQuat, nextQuat, camera.quaternion, counter / 60 ); renderer.render(scene, camera); if (counter == 60) { if (cellCoords) camera.gridCoords = cellCoords; if (breadCrumbs && cellCoords) labyrinth.checkFlags[cellCoords].visible = true; clearInterval(id); animating = false; checkPosition(); repeatAnimation(); } } animating = true; id = setInterval(animation, 1000 / 60); }; // Walks ahead const 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)) ); moveTo(null, null, nextCoords); } }; let [w, h] = [canvas.width, canvas.height]; const raycaster = new THREE.Raycaster(); const rayobjects = cubes.children.concat(paintingGroup.children); let mouse = new THREE.Vector2(); let flying = false; let oldPos, oldQuat, oldCell; buttons.walk.style.display = 'none'; const setFlying = () => { let [x, y, z] = boxPos(...labSize); oldPos = camera.position.clone(); oldCell = [...camera.gridCoords]; oldQuat = camera.quaternion.clone(); moveTo([x, y + Math.max(...labSize) * 0.8, z], rotations.down); ['left', 'right', 'up', 'fly'].forEach( b => (buttons[b].style.display = "none") ); buttons.walk.style.display = 'inline-block'; flying = true; }; const setWalking = (quat, cell) => { moveTo(null, quat || oldQuat, cell || oldCell); ['left', 'right', 'up', 'fly'].forEach( b => (buttons[b].style.display = "inline-block") ); buttons.walk.style.display = 'none'; flying = false; }; const pickPainting = e => { mouse.x = (e.offsetX / canvas.width) * 2 - 1; mouse.y = -(e.offsetY / canvas.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); let pick = raycaster.intersectObjects(rayobjects); if (pick.length > 0) { let obj = pick[0].object; if (obj.paintingProperties) { return obj.paintingProperties; } if (obj.isFloor) { let [i, j, k] = obj.gridCoords; return { cell: [i, 1, k], dir: cDir }; } } return null; }; canvas.oncontextmenu = e => { return false; }; canvas.onmousedown = e => { if (e.button != 0) return; checkPosition(); const pick = pickPainting(e); if (pick) { const angle = dirToYRot[pick.dir]; const newQuat = new THREE.Quaternion().setFromEuler( new THREE.Euler(0, angle, 0, "YXZ") ); flying = false; setWalking(newQuat, pick.cell); return; } if (flying) return; let [i, j] = [~~((e.offsetX / w) * 3), ~~((e.offsetY / h) * 3)]; repeatAnimation = noAnimation; if (i == 1) { repeatAnimation = ahead; } else { if (i == 0) repeatAnimation = () => { rotate('left'); }; else if (i == 2) repeatAnimation = () => { rotate('right'); }; } repeatAnimation(); }; buttons.left.onmousedown = e => { repeatAnimation = () => { rotate('left'); }; repeatAnimation(); }; buttons.up.onmousedown = e => { repeatAnimation = ahead; repeatAnimation(); }; buttons.right.onmousedown = e => { repeatAnimation = () => { rotate('right'); }; repeatAnimation(); }; buttons.fly.onmousedown = e => { if (animating) return; setFlying(); }; buttons.walk.onmousedown = e => { if (animating) return; setWalking(); }; canvas.onmouseup = buttons.left.onmouseup = buttons.right.onmouseup = buttons.up.onmouseup = e => { repeatAnimation = noAnimation; }; checkPosition(); invalidation.then(() => { if (animating) clearInterval(id); }); }34:T459,"commented out popup demo" // // POPUP FRAME DEMO // // { // const frame = html`

`; // frame.style["width"] = "800px"; // frame.style["height"] = "600px"; // frame.style["text-align"] = "center"; // frame.style["background-color"] = "lightgray"; // frame.style.display = "inline-block"; // frame.style.border = "1px solid gray"; // frame.style.position = "relative"; // const content = md`*Click to open popup*`; // content.style.border = "1px solid pink"; // content.style["border-radius"] = "15px"; // content.style["padding"] = "2px 10px"; // content.style.display = "inline-block"; // content.style.margin = "0 auto"; // content.style["margin-top"] = "20px"; // content.style.position = "relative"; // content.style["box-shadow"] = "4px 4px 5px 0px rgba(0,0,0,.2)"; // frame.append(content); // let popupOpen = false; // content.onclick = () => { // if (!popupOpen) { // popupOpen = true; // popupFrame(frame, paintingInfo[3].link, 100, 100, 600, 400, () => { // popupOpen = false; // }); // } // }; // return frame; // }35:T6cc,// // Function to open an iframe overlayed on parent. // url is the iframe url. // top, left, width, height control the geometry of the overlay. // closeCallback, if defined, is called when the popup closes. // Returns a function to remove the popup. // popupFrame = { const cross = await FileAttachment("cross.png").image(); cross.width = 30; const loading = await FileAttachment("loading.gif").image(); return function(parent, url, top, left, width, height, closeCallback) { const frame = html``; frame.style["background-color"] = "white"; frame.style.backgroundImage = `url(${loading.src})`; frame.style["background-size"] = "contain"; frame.style["background-position"] = "center"; frame.style["background-repeat"] = "no-repeat"; frame.style.position = "absolute"; frame.style.width = `${width}px`; frame.style.height = `${height}px`; frame.style["z-index"] = 100; frame.style.top = `${top}px`; frame.style.left = `${left}px`; parent.append(frame); const close = html`

${cross}

`; close.style.width = "30px"; close.style.height = "30px"; close.style["background-color"] = "white"; close.style.position = "absolute"; close.style["z-index"] = 100; close.style.top = `${top}px`; close.style.left = `${left + width + 4}px`; parent.append(close); const closePopup = () => { parent.removeChild(frame); parent.removeChild(close); if (closeCallback) closeCallback(); }; frame.onload = () => { frame.style.backgroundImage = `none`; }; close.onclick = e => { closePopup(); e.stopPropagation(); return false; }; return closePopup; }; }36:T507,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] ]; // 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] = '.'; lab[i][j][k] = '.'; 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; }37:T542,// // Tear down a few walls // decimate = { function getWalls() { let walls = []; for (let i = 1; i < labyrinth.length - 1; i += 1) { for (let j = 1; j < labyrinth[0].length - 1; j += 1) { for (let k = 1; k < labyrinth[0][0].length - 1; k += 1) { if ((i & 1) + (j & 1) + (k & 1) == 2 && labyrinth[i][j][k] == 'W') walls.push([i, j, k]); } } } return walls; } let walls = getWalls(); // Tear down a few walls according to decimateRatio walls = shuffle(walls); let n = ~~(walls.length * decimateRatio); for (let [i, j, k] of walls.slice(0, n)) labyrinth[i][j][k] = "."; // Tear down "columns" // Tear down walls between cells for (let i = 1; i < labyrinth.length - 1; i += 1) { for (let j = 1; j < labyrinth[0].length - 1; j += 1) { for (let k = 1; k < labyrinth[0][0].length - 1; k += 1) { if ((i & 1) + (j & 1) + (k & 1) == 1 && labyrinth[i][j][k] == 'W') { let count = 0; for (let [di, dj, dk] of [ [-1, 0, 0], [1, 0, 0], [0, -1, 0], [0, 1, 0], [0, 0, -1], [0, 0, 1] ]) if (labyrinth[i + di][j + dj][k + dk] != 'W') count++; if (count == 4) labyrinth[i][j][k] = "."; } } } } return walls; }38:T911,// // Returns a group with all 3d elements of the maze, including // the walls, floor and sprites // cubes = { decimate; // Regenerate after decimation of walls, if any 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({ color: 0xffffff }); let floorMaterial = new THREE.MeshStandardMaterial({ color: 0x777777 }); 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 = {}; let [jmin, jmax] = removeCeiling ? [0, labyrinth[0].length - 1] : [0, labyrinth[0].length]; for (let i = 0; i < labyrinth.length; i++) { for (let j = jmin; j < jmax; j++) { for (let k = 0; k < labyrinth[i][j].length; k++) { let cubetype = labyrinth[i][j][k]; if (cubetype != '.') { let isFloor = j == 0 && (i & 1) + (k & 1) == 2; let material = isFloor ? floorMaterial : beamMaterial; let cube = new THREE.Mesh(getCubeGeometry(i, j, k), material); cube.isFloor = isFloor; cube.gridCoords = [i, j, k]; cube.position.set(...boxPos(i, j, k)); cubes.add(cube); } else if (breadCrumbs && i & j & k & 1) { let flag = new THREE.Sprite(checkMaterial); flag.visible = false; labyrinth.checkFlags[[i, j, k]] = flag; let [x, y, z] = boxPos(i, j, k); flag.position.set(x, y - 0.4, z); flag.scale.set(0.1, 0.1, 0.1); cubes.add(flag); } } } } return cubes; }39:[{"id":"8f0c76b4c5b18a30f19518ac4e8863c6caadc0469859ecbc9311954429969229f9ec4e970b4819d4f79f175e4ea9889f4dd4890868402463141ff1ee539d7608","href":"https://static.observableusercontent.com/files/8f0c76b4c5b18a30f19518ac4e8863c6caadc0469859ecbc9311954429969229f9ec4e970b4819d4f79f175e4ea9889f4dd4890868402463141ff1ee539d7608","name":"exit.png","type":"image/png","lastModified":1612964505542.523,"size":12521},{"id":"cb47fe65703ae0fdd8658efe34b882c0f51a5316302f59ae2106e480a86788a27bd69672f2022af0b6c06c681ac9ba6843b4cd4abf7769f2e0c9874e7d0cf6cd","href":"https://static.observableusercontent.com/files/cb47fe65703ae0fdd8658efe34b882c0f51a5316302f59ae2106e480a86788a27bd69672f2022af0b6c06c681ac9ba6843b4cd4abf7769f2e0c9874e7d0cf6cd","name":"whitecheck.png","type":"image/png","lastModified":1612964505542.523,"size":13401},{"id":"5b2d099b4523af9aeb149d3f1b7e2bea26597f0c04f6f52357d0ef86febc1e37f3c9e422624755c26f06055e8383e59eed15cca8ebb77cb91173d362a119b653","href":"https://static.observableusercontent.com/files/5b2d099b4523af9aeb149d3f1b7e2bea26597f0c04f6f52357d0ef86febc1e37f3c9e422624755c26f06055e8383e59eed15cca8ebb77cb91173d362a119b653","name":"louvre.csv","type":"text/csv","lastModified":1613314102284.093,"size":17453},{"id":"7a0714247131cc0fdb2854ca7f6f5d9c72ccbb1c1254caca6ae51ce72eb9627a02773dcf986e9a370c4a6b7f70d2ba086a988bac6f688352edbf83cd75e30baa","href":"https://static.observableusercontent.com/files/7a0714247131cc0fdb2854ca7f6f5d9c72ccbb1c1254caca6ae51ce72eb9627a02773dcf986e9a370c4a6b7f70d2ba086a988bac6f688352edbf83cd75e30baa","name":"kinetic_art.csv","type":"text/csv","lastModified":1613312375319.604,"size":2077},{"id":"9af138672c731cbef6af8a65f748acdc4517813ea336ac0e78a21c890d4337e2b462070edfe8c009c63ba947fe9257d740f00addc58035070b067373f3644bf3","href":"https://static.observableusercontent.com/files/9af138672c731cbef6af8a65f748acdc4517813ea336ac0e78a21c890d4337e2b462070edfe8c009c63ba947fe9257d740f00addc58035070b067373f3644bf3","name":"p5showcase.csv","type":"text/csv","lastModified":1613660747507.442,"size":9303},{"id":"c5b437c8fb61945c19bf73d92fb3d9b89e087fd07f8360ebf44542481d594533df5696c28a199755363238bb72dda5db81907ee0f37dcacf0a4358bebe3e6321","href":"https://static.observableusercontent.com/files/c5b437c8fb61945c19bf73d92fb3d9b89e087fd07f8360ebf44542481d594533df5696c28a199755363238bb72dda5db81907ee0f37dcacf0a4358bebe3e6321","name":"national_gallery.csv","type":"text/csv","lastModified":1613399035455.962,"size":25243},{"id":"d005653ecf0b4ea481788f5e5a400605ff7d91dac3c4695de94341eeb7b910f73bcf6eebe365e6ebc1d1d5ece1374cf577e95fd14c98023ac2b32c302c49b4e4","href":"https://static.observableusercontent.com/files/d005653ecf0b4ea481788f5e5a400605ff7d91dac3c4695de94341eeb7b910f73bcf6eebe365e6ebc1d1d5ece1374cf577e95fd14c98023ac2b32c302c49b4e4","name":"px.png","type":"image/png","lastModified":1613488268881.679,"size":464459},{"id":"1b82976ea4b594ee5bc43a75249aa0e0732c9e16e7a13599184cf48e5dc95e517b41f5670dc13ee03efb083dd360dddb6c8bd17a7d59d1b2e52a55cfa5755176","href":"https://static.observableusercontent.com/files/1b82976ea4b594ee5bc43a75249aa0e0732c9e16e7a13599184cf48e5dc95e517b41f5670dc13ee03efb083dd360dddb6c8bd17a7d59d1b2e52a55cfa5755176","name":"cross.png","type":"image/png","lastModified":1613044786263.774,"size":11879},{"id":"f80a728ad412c8e9d7606a8756041a717b365251e8c98bbdc52dfbaec3d2ec5a3f462dc75bd1ca774ba11d33b05a3a97ec0072a3364bbbad4a082e84fb5ad700","href":"https://static.observableusercontent.com/files/f80a728ad412c8e9d7606a8756041a717b365251e8c98bbdc52dfbaec3d2ec5a3f462dc75bd1ca774ba11d33b05a3a97ec0072a3364bbbad4a082e84fb5ad700","name":"mandala.png","type":"image/png","lastModified":1613058935345.345,"size":157064},{"id":"461c442521fbaef914140a2b9b4c04729a49d7954447280175b7ef4131e80276ec539a6f633cd240b2e3340b455035f580e63ff7683754623cec8558784eb9d3","href":"https://static.observableusercontent.com/files/461c442521fbaef914140a2b9b4c04729a49d7954447280175b7ef4131e80276ec539a6f633cd240b2e3340b455035f580e63ff7683754623cec8558784eb9d3","name":"loading.gif","type":"image/gif","lastModified":1613062412411.007,"size":8821},{"id":"2c20e5a12127d278152c1b5235756461d35ac442bb59bf02f4db8a4b84aaec6f800a743293c0320355d2e6ad6905e129d720fc59f83015005b713202ffffffb7","href":"https://static.observableusercontent.com/files/2c20e5a12127d278152c1b5235756461d35ac442bb59bf02f4db8a4b84aaec6f800a743293c0320355d2e6ad6905e129d720fc59f83015005b713202ffffffb7","name":"brazilian_art@1.csv","type":"text/csv","lastModified":1613251622123.896,"size":10125},{"id":"36726c6312e219864de317451a646b5006ac7a074600b008fe6cc3c2144eda7c2a9f0c1a7b0d627969bf0bb70c168985fcaa30255dcb961bf2770856700bdfb2","href":"https://static.observableusercontent.com/files/36726c6312e219864de317451a646b5006ac7a074600b008fe6cc3c2144eda7c2a9f0c1a7b0d627969bf0bb70c168985fcaa30255dcb961bf2770856700bdfb2","name":"modern_art@1.csv","type":"text/csv","lastModified":1613312030602.111,"size":6511},{"id":"6012ded5e0d5ff34d312bb1920098a367f51ace61f400a186c58d73ddff192b506c453c0097c016db2b0ef924f9220b5829270a2d860ceb7eb69f515b37af360","href":"https://static.observableusercontent.com/files/6012ded5e0d5ff34d312bb1920098a367f51ace61f400a186c58d73ddff192b506c453c0097c016db2b0ef924f9220b5829270a2d860ceb7eb69f515b37af360","name":"british_museum.csv","type":"text/csv","lastModified":1613341845777.654,"size":56156},{"id":"96840efd22040db3234d3439d06aabfb4fe6f5e36c65ae7f0ccf3a2fabb6c8738fa9777935ad0b0d4d5ac0009456710e4f65be343e7731787607fe15f200c663","href":"https://static.observableusercontent.com/files/96840efd22040db3234d3439d06aabfb4fe6f5e36c65ae7f0ccf3a2fabb6c8738fa9777935ad0b0d4d5ac0009456710e4f65be343e7731787607fe15f200c663","name":"nz.png","type":"image/png","lastModified":1613488269160.883,"size":449211},{"id":"409556af1de740c6f5ef8e45ab950809821522719e1bb090779cc1dd9d922b1c1b1f807acf07e3aacfdb7a3c3fe35921fe21fe32d12e810a8699d206cc4e4f1f","href":"https://static.observableusercontent.com/files/409556af1de740c6f5ef8e45ab950809821522719e1bb090779cc1dd9d922b1c1b1f807acf07e3aacfdb7a3c3fe35921fe21fe32d12e810a8699d206cc4e4f1f","name":"ny.png","type":"image/png","lastModified":1613488269112.429,"size":417779},{"id":"40676807f861b520136c6671c1890706b1eae673a51a2afcafa20a9757adc75f9820f605c851a4b3773a361e6612feb5f00969ff883032b025e74cc04a2c1bbc","href":"https://static.observableusercontent.com/files/40676807f861b520136c6671c1890706b1eae673a51a2afcafa20a9757adc75f9820f605c851a4b3773a361e6612feb5f00969ff883032b025e74cc04a2c1bbc","name":"py.png","type":"image/png","lastModified":1613488268939.994,"size":472991},{"id":"bc8de4b1ced0c0fe2e10c6ce24fef976a7536bcc33b14af010f8b5ecc53f016a92d6f81728e5337d12f91f9a207409a0db2f05466e50e8f22d9a08a7cfaf9d50","href":"https://static.observableusercontent.com/files/bc8de4b1ced0c0fe2e10c6ce24fef976a7536bcc33b14af010f8b5ecc53f016a92d6f81728e5337d12f91f9a207409a0db2f05466e50e8f22d9a08a7cfaf9d50","name":"pz.png","type":"image/png","lastModified":1613488268875.752,"size":460402},{"id":"3dfd24c183fbfc309726af65436f68c4e53c502e526e2d47ef0a54e57d55fc0e82d40377540ceb90cb802f4a41036aa389ffc00e7e73253d365003c7aa074f9e","href":"https://static.observableusercontent.com/files/3dfd24c183fbfc309726af65436f68c4e53c502e526e2d47ef0a54e57d55fc0e82d40377540ceb90cb802f4a41036aa389ffc00e7e73253d365003c7aa074f9e","name":"nx.png","type":"image/png","lastModified":1613488268617.582,"size":475126}] 2e:{"title":"3D Virtual Gallery","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"viewof collection = Select(collections, {\n label: \"Choose collection\",\n format: c => c.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"viewof crumbs = Checkbox(\"y\", { label: \"Leave bread crumbs?\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"viewof artworkSearch = Search(\n collection.info.map(d => ({\n title: d.title,\n link: d.link\n })),\n {\n label: \"Artwork search\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"viewof artworkTable = Table(artworkSearch, {\n format: { link: d => html`${d}` }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"sep = md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1496,"value":"hangingPoints.length < paintings.length\n ? md`** Warning: ** ${paintings.length -\n hangingPoints.length} paintings not being shown`\n : md`${hangingPoints.length - paintings.length} wall slots left empty`","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"md`## Paintings information`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1086,"value":"brazilian_art = FileAttachment(\"brazilian_art@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"modern_art = FileAttachment(\"modern_art@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1225,"value":"kinetic_art = FileAttachment(\"kinetic_art.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1228,"value":"louvre = FileAttachment(\"louvre.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"british_museum = FileAttachment(\"british_museum.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1382,"value":"national_gallery = FileAttachment(\"national_gallery.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1605,"value":"p5showcase = FileAttachment(\"p5showcase.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`## Configuration\n\nModify the variables below to change configuration of the display. In order to allow for specification\nwhen this notebook is embedded in some other page, all values below can also be defined by\nspecifying variables with corresponding names capitalized preceded by \\`def\\` within the \\`window\\`(global) scope. For instance, \\`decimateRatio\\` is set to \\`window.defDecimateRatio\\` if this is defined previous to\nembedding the cells from this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1615,"value":"//\n// Options for the collection input. An array of objects containing fields\n// name, info, and size, respectively the title of the collection, an array of paintings\n// and the size of the labirynth (either a an integer or an array of integers.)\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1248,"value":"collections = window.defCollections || [\n { name: \"Brazilian Art\", info: brazilian_art, size: 5 },\n { name: \"Miscellanea\", info: miscellanea, size: 3 },\n { name: \"Louvre\", info: louvre, size: [8, 6] },\n { name: \"British Museum\", info: british_museum, size: [14, 11] },\n { name: \"National Gallery of Art\", info: national_gallery, size: [10, 7] },\n { name: \"Modern art\", info: modern_art, size: 4 },\n { name: \"Kinetic art\", info: kinetic_art, size: 3 },\n { name: \"p5js Showcase 2020\", info: p5showcase, size: [8, 6] }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"//\n// Ratio of the labyrinth walls to be torn down\n// 0 means perfect labyrinth and 1 means a rectangular room with no walls\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"decimateRatio = window.defDecimateRatio || 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"//\n// Thickness of the walls w.r.t. cell. \n// 1 means walls as thick as cells. 0 means paper-thin walls (not recommended)\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"thickness = window.defThickness || 0.05","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"//\n// Camera angle in degrees.\n// Useful values range from roughly 60 to 140.\n// Small angles mean less distortion, but, since the viewer stays at the center of\n// cells, paintings will appear larger. Bigger values result in bigger distortions, but paintings can be put\n// closer together and still appear small. Use paintingSizeRatio to control overall painting size.\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1108,"value":"cameraAngle = window.defCameraAngle || 85 // in degrees","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"//\n// Painting size with respect to each wall cell.\n// Values closer to 1 make paintings bigger.\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"paintingSizeRatio = window.defPaintingSizeRatio || 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"//\n// Background color of navigation buttons\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1319,"value":"buttonColor = window.defButtonColor ||'#ffffffaa' ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"//\n// Color of arrows in navigation buttons\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1320,"value":"buttonSymbolColor = window.defButtonSymbolColor || '#000000'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"//\n// Ratio between button size and width\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1322,"value":"buttonSizeRatio = window.defButtonSizeRatio || 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"// \n// Ratio between width of button and size of the arrow\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1326,"value":"buttonSymbolSizeRatio = window.defSymbolSizeRatio || 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":1508,"value":"//\n// These configure the button icons used in the interface\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1503,"value":"buttonIcons = window.defButtonIcons || {\n left: '⇦',\n up: '⇧',\n right: '⇨',\n walk: '🚶',\n fly: '🚁'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1755,"value":"//\n// width of the canvas\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1582,"value":"width = window.defWidth || window.innerWidth * 0.98","pinned":true,"hidden":false,"mode":"ojs"},{"id":1362,"value":"//\n// Height of the canvas. By default set to 9/16 of the width (wide-screen aspect ratio)\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"height = window.defHeight || ~~((width * 9) / 16)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"//\n// If true, removes the blocks that make the ceiling\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1387,"value":"removeCeiling = window.defRemoveCeiling === undefined\n ? true\n : window.defRemoveCeiling","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"//\n// An array of 6 image urls used for the scene cubemap\n//","pinned":true,"hidden":false,"mode":"ojs"},{"id":1737,"value":"cubemapUrls = window.defCubemapUrls || [\n await FileAttachment('px.png').url(),\n await FileAttachment('nx.png').url(),\n await FileAttachment('py.png').url(),\n await FileAttachment('ny.png').url(),\n await FileAttachment('pz.png').url(),\n await FileAttachment('nz.png').url()\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":980,"value":"md`## Elements of \\`mainDisplay\\`\n\nThese are inserted into the mainDisplay cell\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"canvas = DOM.canvas(width, height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"buttons = {\n collection;\n let buttons = {};\n let size = width * buttonSizeRatio;\n for (let prop of Object.getOwnPropertyNames(buttonIcons)) {\n buttons[prop] = html`

\n ${buttonIcons[prop]}

`;\n }\n return buttons;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":902,"value":"title = {\n let title = html`

`;\n title.id = \"title\";\n title.style.background = \"white\";\n title.style.border = \"1px solid gray\";\n title.style[\"border-radius\"] = \"15px\";\n title.style[\"padding\"] = \"2px 10px\";\n title.style.display = \"inline-block\";\n title.style.margin = \"0 auto\";\n title.style[\"margin-top\"] = \"20px\";\n title.style.position = \"relative\";\n title.style[\"z-index\"] = \"10\";\n title.style[\"box-shadow\"] = \"4px 4px 5px 0px rgba(0,0,0,.2)\";\n title.style[\"pointer-events\"] = \"auto\";\n title.style[\"cursor\"] = \"pointer\";\n title.style[\"user-select\"] = \"none\";\n title.append(html`Click to open popup`);\n return title;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1662,"value":"loadBar = {\n let bar = html`

`;\n bar.style.width = `70%`;\n bar.style.backgroundColor = 'lightgray';\n bar.style.border = '2px solid gray';\n bar.style.display = \"inline-block\";\n bar.style.margin = \"0 auto\";\n bar.style[\"margin-top\"] = `${height * 0.45}px`;\n bar.style.position = \"relative\";\n bar.style[\"z-index\"] = \"10\";\n bar.style[\"cursor\"] = \"wait\";\n bar.style.display = \"none\";\n\n let progress = html`

`;\n progress.style.width = `10%`;\n progress.style.height = `${height * 0.05}px`;\n progress.style.backgroundColor = 'darkgray';\n bar.append(progress);\n bar.setProgress = x => (progress.style.width = `${x}%`);\n\n return bar;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md`## Cells controlled by inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"breadCrumbs = crumbs.length > 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"mutable labSize = typeof collection.size == \"number\"\n ? [collection.size, 1, collection.size]\n : [collection.size[0], 1, collection.size[1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"//\n// Painting info\n//\npaintingInfo = collection.info","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`

\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1153,"value":"function showLabyrinth(lab) {\n let s = \"

\";\n  let unvisited = [];\n  for (let j = 1; j < 2; j++) {\n    s += j + \"\\n\";\n    for (let i = 0; i < lab.length; i++) {\n      for (let k = 0; k < lab[0][0].length; k++) {\n        let c = lab[i][j][k];\n        s += c;\n        if (c == \"U\") unvisited.push([i, j, k]);\n      }\n      s += \"\\n\";\n    }\n    s += \"\\n\";\n  }\n  return html`${s}\\n${unvisited}\\n

${lab.longestPath\n .map(([i, j, k]) => `${i},${k}`)\n .join(\" - \")}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1165,"value":"// showLabyrinth(labyrinth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"function paintingOnWall(painting, cell, dir) {\n const direction = [\n { offset: [0.499, 0, 0], angle: -Math.PI / 2 },\n { offset: [-0.499, 0, 0], angle: Math.PI / 2 },\n { offset: [0, 0, 0.499], angle: Math.PI },\n { offset: [0, 0, -0.499], angle: 0 }\n ];\n\n let mat = new THREE.MeshBasicMaterial({\n color: 0xffffff,\n side: THREE.DoubleSide,\n map: new THREE.CanvasTexture(painting.img)\n });\n let aspect = painting.img.width / painting.img.height;\n const sz = paintingSizeRatio;\n let geo = new THREE.PlaneBufferGeometry(\n ...(aspect < 1 ? [aspect * sz, sz] : [sz, sz / aspect])\n );\n let mesh = new THREE.Mesh(geo, mat);\n\n let [x, y, z] = [boxPos(...cell), direction[dir].offset].reduce((p, q) =>\n [0, 1, 2].map(i => p[i] + q[i])\n );\n mesh.position.set(x, y, z);\n mesh.rotation.set(0, direction[dir].angle, 0);\n\n mesh.paintingProperties = { painting, cell, dir };\n\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"//\n// A list of possible places to hang paintings\n//\nhangingPoints = {\n decimate; // After decimation\n\n let result = [];\n\n for (let i = 1; i < labyrinth.length - 1; i += 2) {\n for (let j = 1; j < labyrinth[0].length - 1; j += 2) {\n for (let k = 1; k < labyrinth[0][0].length - 1; k += 2) {\n let cell = [i, j, k];\n if (labyrinth[i + 1][j][k] == \"W\") result.push({ cell, dir: 0 });\n if (labyrinth[i - 1][j][k] == \"W\") result.push({ cell, dir: 1 });\n if (labyrinth[i][j][k + 1] == \"W\") result.push({ cell, dir: 2 });\n if (labyrinth[i][j][k - 1] == \"W\") result.push({ cell, dir: 3 });\n }\n }\n }\n\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"//\n// The \"labyrinth\" proper\n//\nlabyrinth = {\n decimateRatio;\n return make3dLabyrinth(...labSize);\n}","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 collection;\n let camera = new THREE.PerspectiveCamera(\n cameraAngle,\n canvas.width / canvas.height,\n 0.1,\n 100\n );\n camera.gridCoords = [0, 0, 0];\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\n let pointLight1 = new THREE.PointLight(0xffffff, 0.4);\n pointLight1.position.set(10, 0.9, 10);\n let pointLight2 = new THREE.PointLight(0xffffff, 0.4);\n pointLight2.position.set(-10, 0.9, -10);\n let pointLight3 = new THREE.PointLight(0xffffff, 0.4);\n pointLight3.position.set(-10, 0.9, 10);\n let pointLight4 = new THREE.PointLight(0xffffff, 0.4);\n pointLight4.position.set(10, 0.9, -10);\n let lightAmb = new THREE.AmbientLight(0x606060);\n lights.add(lightAmb, pointLight1, pointLight2, pointLight3); //lightDir, lightDir2)\n return lights;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1745,"value":"cubemapImages = {\n return await Promise.all(cubemapUrls.map(url => afterDecode(url)));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"cubemap = {\n let map = new THREE.CubeTexture(cubemapImages);\n map.needsUpdate = true;\n return map;\n}","pinned":false,"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":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"\"commented out youwin mesh\"\n//\n// A mesh showing a cheery message.\n//\n// youWin = {\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":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"paintingGroup = {\n const paintingGroup = new THREE.Group();\n let hp = shuffle(hangingPoints);\n for (let i = 0; i < Math.min(hp.length, paintings.length); i++) {\n let painting = paintings[i];\n let { cell, dir } = hp[i];\n paintingGroup.add(paintingOnWall(painting, cell, dir));\n }\n return paintingGroup;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"//\n// The scene\n//\nscene = {\n let scene = new THREE.Scene();\n scene.background = cubemap;\n scene.add(cubes);\n scene.add(lights);\n scene.add(paintingGroup);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"// Starts the interaction\nstart = {\n let path = [[1, 1, 1]]; //labyrinth.longestPath;\n camera.gridCoords = path[0];\n if (breadCrumbs) labyrinth.checkFlags[path[0]].visible = true;\n\n let [x, y, z] = boxPos(...camera.gridCoords);\n camera.position.set(x, y, z);\n camera.quaternion.copy(rotations.right);\n\n renderer.render(scene, camera);\n}","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"// Fisher-Yates shuffle (https://javascript.info/task/shuffle)\nfunction shuffle(array) {\n array = [...array];\n for (let i = array.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"paintings = {\n //mutable imgStat = { success: 0, fail: 0 };\n loadBar.style.display = \"inline-block\";\n loadBar.setProgress(0);\n const batchSize = 10; // Load images in batches\n for (let batch = 0; batch < paintingInfo.length; batch += batchSize) {\n let promises = paintingInfo.slice(batch, batch + batchSize).map(d => {\n if (typeof d.src == \"object\") return d.src.image(); // A file attachment\n return afterDecode(d.src); // An image url\n });\n await Promises.delay(200);\n loadBar.setProgress((batch / paintingInfo.length) * 100);\n await Promise.allSettled(promises).then(response => {\n response.forEach((obj, i) => {\n paintingInfo[i + batch].img = obj.value;\n });\n });\n loadBar.setProgress(\n ((batch + promises.length) / paintingInfo.length) * 100\n );\n }\n loadBar.style.display = \"none\";\n return paintingInfo;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1634,"value":"mutable imgStat = ({ success: 0, fail: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"// Returns a promise for loading an image asynchronously from src (an image url).\nafterDecode = {\n const failImage = await FileAttachment(\"exit.png\").image();\n return src => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = src;\n return img.decode().then(\n () => {\n //mutable imgStat.success++;\n return img;\n },\n () => {\n //mutable imgStat.fail++;\n return failImage;\n }\n );\n };\n}","pinned":false,"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"},{"id":1242,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}