2f:null 30:["$","title",null,{"children":"Cube Lozenge Animation 1 | Matt Dzugan | Observable"}] 35:T49c,function InitializeCubeData(Heightmap, heightBy){ // initial block of cubes var b = -8; var z = d3.range(b, N).map(x => d3.range(b, N).map(y => d3.range(b, N).map(z => {return({x:x, y:y, z:z})}))); var flat = d3.merge(d3.merge(z)); // morph them by newHeightMap var rowAxis = returnAxisMapping(heightBy).rowAxis; var colAxis = returnAxisMapping(heightBy).colAxis; var heightAxis = returnAxisMapping(heightBy).heightAxis; Heightmap.forEach((x, rr) => x.forEach((d, cc) => { var maxExistingHeight = d3.max(flat.filter(f => (f[rowAxis]==rr)*(f[colAxis]==cc)) .map(f => f[heightAxis])); flat.forEach(f => { if((f[rowAxis]==rr)*(f[colAxis]==cc)){ f[heightAxis] += (d-maxExistingHeight); } }); // end flat update })); //end heightmap iteration var cubes = flat.map(f => {return({positions: [f], transitions: [{x:0, y:0, z:0, duration:0, start:0, stop:(f[rowAxis]+f[colAxis])*1/2}]})}); return cubes; }36:T993,function AddCubeDataTransition(myCubeData, newHeightmap, heightBy, transitionBy, when){ var t_0 = myCubeData[0].positions.length-1; var t_1 = t_0+1; /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* // determine next position of each cube *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ var positions_t0 = myCubeData.map(x => x.positions[t_0]); var positions_t1 = JSON.parse(JSON.stringify(positions_t0)); //var transitions_t1 = positions_t1.map(x => {return {x:0, y:0, z:0, duration:0, start:t_0, stop:t_1}}) var transitions_t1 = positions_t1.map(x => {return {x:0, y:0, z:0, duration:0, start:0, stop:0}}) // morph them by newHeightMap var rowAxis = returnAxisMapping(heightBy).rowAxis; var colAxis = returnAxisMapping(heightBy).colAxis; var heightAxis = returnAxisMapping(heightBy).heightAxis; newHeightmap.forEach((x, rr) => x.forEach((d, cc) => { var maxExistingHeight = d3.max(positions_t1.filter(f => (f[rowAxis]==rr)*(f[colAxis]==cc)) .map(f => f[heightAxis])); positions_t1.forEach((f,ii) => { if((f[rowAxis]==rr)*(f[colAxis]==cc)){ f[heightAxis] += (d-maxExistingHeight); transitions_t1[ii][heightAxis] = d-maxExistingHeight; transitions_t1[ii]["duration"] = Math.abs(d-maxExistingHeight); } }); // end positions_t1 update })); //end newHeightmap iteration /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* // update the contents of myCubeData *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ myCubeData.forEach((c,i) => { c.positions.push(positions_t1[i]) c.transitions.push(transitions_t1[i]) }) // update the transition timing for each cube's transition var rowExtent = d3.extent(positions_t1.map(p =>p[rowAxis])); var colExtent = d3.extent(positions_t1.map(p =>p[colAxis])); for(var rr of d3.range(rowExtent[0], rowExtent[1]+1)){ for(var cc of d3.range(colExtent[0], colExtent[1]+1)){ var cubesHere = myCubeData.filter(c => (c.positions[t_1][rowAxis]==rr)&(c.positions[t_1][colAxis]==cc)); var maxStop = d3.max(cubesHere.map(c => c.transitions[t_0].stop)); myCubeData.forEach(c => { if((c.positions[t_1][rowAxis]==rr)&(c.positions[t_1][colAxis]==cc)){ c.transitions[t_1].start = delay+maxStop; c.transitions[t_1].stop = delay+maxStop+c.transitions[t_1].duration; } }) } } return myCubeData }37:T472,cubeData = { var cubeData = InitializeCubeData(generateRepeatedLozengeHeightmap2(N, false), "y"); /* cubeData = AddCubeDataTransition(cubeData, generateLozengeHeightmap(N), "x", "x", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateRepeatedLozengeHeightmap2(N, false), "z", "z", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateLozengeHeightmap(N), "y", "y", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateRepeatedLozengeHeightmap2(N, false), "x", "x", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateLozengeHeightmap(N), "z", "z", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateRepeatedLozengeHeightmap2(N, true), "y", "y", "ASAP"); */ cubeData = AddCubeDataTransition(cubeData, generateLozengeHeightmap(N), "x", "x", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateLozengeHeightmap(N), "z", "z", "ASAP"); cubeData = AddCubeDataTransition(cubeData, generateRepeatedLozengeHeightmap2(N, false).map(rr => rr.map(cc => cc+2)), "y", "y", "ASAP"); return cubeData; }38:T409,curatedCubeData = { // for each cube // // var visibleVec = [] // // for each positionIndex // // // is cubeX == maxX_YZ // // // is cubeY == maxY_XZ // // // is cubeZ == maxZ_XY var Pvec = d3.range(cubeData[0].positions.length); var cubes = JSON.parse(JSON.stringify(cubeData)); cubes.forEach(c => { var visibleVec = []; for(var pp of Pvec){ visibleVec.push(c.positions[pp].x >= -1+d3.max(cubes.filter(f => (f.positions[pp].y==c.positions[pp].y)&(f.positions[pp].z==c.positions[pp].z)).map(x => x.positions[pp].x))); visibleVec.push(c.positions[pp].y >= -1+d3.max(cubes.filter(f => (f.positions[pp].x==c.positions[pp].x)&(f.positions[pp].z==c.positions[pp].z)).map(x => x.positions[pp].y))); visibleVec.push(c.positions[pp].z >= -1+d3.max(cubes.filter(f => (f.positions[pp].x==c.positions[pp].x)&(f.positions[pp].y==c.positions[pp].y)).map(x => x.positions[pp].z))); } c.visible = visibleVec.some(x => x==true) }) return cubes.filter(c => c.visible); }39:Tab5,function createAnimation(options = {}) { const { invalidation: invalidate = new Promise(()=>{}), width: w = 750, height: h = w, } = options; const renderer = new THREE.WebGLRenderer({ antialias: true }); Promise.race([invalidation, invalidate]).then(() => renderer.dispose()); renderer.setSize(w, h); renderer.setPixelRatio(devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; var t2time = d3.scaleLinear().domain([minStart, maxStop]).range([0, 1]); var time2t = d3.scaleLinear().domain([0, 1]).range([minStart, maxStop]); return function draw(time) { //* camera.scale.x = 0.25; camera.scale.y = 0.25; camera.scale.z = 0.25; //*/ //* var myexp = 1.2; camera.scale.x = 0.185*(1+1+0*d3.easePolyIn.exponent(myexp)(time)); //low scale = zoomed in camera.scale.y = 0.185*(1+1+0*d3.easePolyIn.exponent(myexp)(time)); camera.scale.z = 0.185*(1+1+0*d3.easePolyIn.exponent(myexp)(time)); camera.updateProjectionMatrix(); //camera.position.y = 20 camera.position.y = 25-1.0*d3.easePolyIn.exponent(myexp)(time); /* camera.scale.x = (1+d3.easePolyIn.exponent(myexp)(time))/1.5; camera.scale.y = (1+d3.easePolyIn.exponent(myexp)(time))/1.5; camera.scale.z = (1+d3.easePolyIn.exponent(myexp)(time))/1.5; camera.position.z = 5+1.0*d3.easePolyIn.exponent(myexp)(time); camera.position.y = 5+0.0*d3.easePolyIn.exponent(myexp)(time); camera.position.x = 5+1.0*d3.easePolyIn.exponent(myexp)(time); camera.updateProjectionMatrix() //*/ //* cubes.forEach((cube, index) => { var p = curatedCubeData[index].positions[0]; //var tt_A1 = genEasedTimer(.15-to, .20-to, d3.easeSinOut)(time) // slide out const s = 1;//0.5; cube.position.x = p.x*s; cube.position.y = p.y*s; cube.position.z = p.z*s; cube.scale.x = 1.02; cube.scale.y = 1.02; cube.scale.z = 1.02; /* cube.scale.x = 0.954; cube.scale.y = 0.954; cube.scale.z = 0.954; */ var transitions = curatedCubeData[index].transitions; for(var trans of transitions){ if(time==0){ var tt=0; }else if(time<=t2time(trans.start)){ var tt=0; }else if(time>=t2time(trans.stop)){ var tt=1; }else{ var tt = genEasedTimer(t2time(trans.start), t2time(trans.stop), d3.easeSinInOut)(time); } cube.position.x += trans.x*s*tt; cube.position.y += trans.y*s*tt; cube.position.z += trans.z*s*tt; } }); renderer.render(scene, camera); return renderer.domElement; } }3a:T4b0,cubes = { var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true } ); var geometry = new THREE.BoxGeometry(1, 1, 1); var c_r = new THREE.Color(palette[0]).getHex(); var c_t = new THREE.Color(palette[1]).getHex(); var c_l = new THREE.Color(palette[2]).getHex(); geometry.faces[ 0 ].color.setHex( c_r ); // right side geometry.faces[ 1 ].color.setHex( c_r ); // right side geometry.faces[ 4 ].color.setHex( c_t ); // top side geometry.faces[ 5 ].color.setHex( c_t ); // top side geometry.faces[ 8 ].color.setHex( c_l ); // left side geometry.faces[ 9 ].color.setHex( c_l ); // left side //*/ return curatedCubeData.map(x => x.positions[0]).map(x => { const cube = new THREE.Mesh(geometry, material); // wireframe if(renderLines){ var geo = new THREE.EdgesGeometry( cube.geometry ); var mat = new THREE.LineBasicMaterial( { color: new THREE.Color(palette[3]), linewidth: 4 } ); var wireframe = new THREE.LineSegments( geo, mat ); wireframe.renderOrder = 1; // make sure wireframes are rendered 2nd wireframe.material.linewidth = 10; cube.add( wireframe ); } return cube; }); }3b:[{"id":"7c2517f2fc91ed4ccf2acfddf894988f52bcae9bf0d8827569653cd9f87124126be63fd65f01ce57e71972c26a6710b79e2a2ea28a6990520c06d00d6a2f29b7","href":"https://static.observableusercontent.com/files/7c2517f2fc91ed4ccf2acfddf894988f52bcae9bf0d8827569653cd9f87124126be63fd65f01ce57e71972c26a6710b79e2a2ea28a6990520c06d00d6a2f29b7","name":"cube-lozenge-loop (7).gif","type":"image/gif","lastModified":1619573776444.506,"size":5249811},{"id":"cfdc504cfd376053f03b717b268ee039a23bd1235f3aebc2516bc8f344d9f3f11a6f7bed4491aca6665ccab9e4dfbf232393f7dcdcae9c68e2aa53c8a23b62df","href":"https://static.observableusercontent.com/files/cfdc504cfd376053f03b717b268ee039a23bd1235f3aebc2516bc8f344d9f3f11a6f7bed4491aca6665ccab9e4dfbf232393f7dcdcae9c68e2aa53c8a23b62df","name":"cube-lozenge-loop (8).gif","type":"image/gif","lastModified":1619620719913.099,"size":3344006},{"id":"d83333919235d7df5339b04e12503a42c6530152bfb7475905e44afa762157b2cf3d78ac28007b46b79fe50408c46fbf9527b37f8ad592a635ed6be9cf91d51d","href":"https://static.observableusercontent.com/files/d83333919235d7df5339b04e12503a42c6530152bfb7475905e44afa762157b2cf3d78ac28007b46b79fe50408c46fbf9527b37f8ad592a635ed6be9cf91d51d","name":"cube-lozenge-loop (9).gif","type":"image/gif","lastModified":1619621753814.705,"size":2685296},{"id":"eca4eb65cad75604428b0dae30988b02bf2f1ec8e68a724ef81cf9280a16a4ea91754b02690034d4f21ee0922c4318ffe3638a28469a666b45812db4b42addd1","href":"https://static.observableusercontent.com/files/eca4eb65cad75604428b0dae30988b02bf2f1ec8e68a724ef81cf9280a16a4ea91754b02690034d4f21ee0922c4318ffe3638a28469a666b45812db4b42addd1","name":"ezgif.com-gif-maker (10).gif","type":"image/gif","lastModified":1619795127991.803,"size":6391809}] 33:{"id":"6cf19d26e62520b6","slug":"cube-lozenge-animation-1","title":"Cube Lozenge Animation 1","thumbnail":"3b88824ac63ffceb7f3756a9c9a7cebee879eac51baf9d981fda05be67f2cfa6","access_level":"public","create_time":"$D2021-04-26T13:16:29.664Z","update_time":"$D2021-06-01T18:26:11.752Z","view_time":null,"first_public_time":"$D2021-04-28T01:35:55.444Z","fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":"starter_2024"},"version":625,"publish_version":625,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null}],"members":[{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b1eb241e8efe8a56","slug":"shorts","title":"shorts","owner":{"id":"5d1c5c48a3939518","login":"mattdzugan","name":"Matt Dzugan"}},"type":"notebook","body":{"title":"Cube Lozenge Animation 1","cells":[{"id":0,"value":"md`# Cube Lozenge Animation 1\n\nPreviously I've created a few animations ([here](https://observablehq.com/@mattdzugan/cube-pushing-loop) & [here](https://observablehq.com/@mattdzugan/cube-swivel-loop)) based on the idea of moving some cubes around to a transform into a zoomed-out version of the inital layout.\n\nWell, here's another one, this time with the cubes visiting the 3D representation of some [lozenge tilings](https://observablehq.com/@mattdzugan/generative-lozenge-tilings) along the way.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"md`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Pre-Processing\nWe're going to make a few functions to create and modify our data structures. Maybe one day I'll rework this into a more OOP style.\n\n#### Initialize Cube Data\nFirst, a function to initialize our set of cubes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\n#### Add Transition\nNext, a function that we'll call a few times, to add a transition\n\n_(start {ASAP, Together, Random}, newHeightmap, transitionAlong)_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\n#### Orchestrate Animation\nNow we can use the functions above to create our main data structure that the animation will read from.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"minStart = d3.min(d3.merge(cubeData.map(x => x.transitions.map(y => y.start))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"maxStop = d3.max(d3.merge(cubeData.map(x => x.transitions.map(y => y.stop))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"md`#### Remove Unseen Cubes\nThis animation will take quite some time to render. To help speed this up, we can remove any cube that is never the max of its XY-column XZ-column or YZ-column.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`\n#### Helper Functions\nSomething that can make sense of our 3Dimensional Transforms\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"function returnAxisMapping(heightBy){\n if(heightBy == \"y\"){\n return {rowAxis: \"z\", colAxis: \"x\", heightAxis: \"y\"}\n }\n if(heightBy == \"z\"){\n return {rowAxis: \"y\", colAxis: \"x\", heightAxis: \"z\"}\n }\n if(heightBy == \"x\"){\n return {rowAxis: \"z\", colAxis: \"y\", heightAxis: \"x\"}\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"function generateRepeatedLozengeHeightmap2(N, double){\n var x1 = generateRepeatedLozengeHeightmap(N, double);\n var x2 = x1.map(rr => rr.map(cc => Math.max(Math.min(cc-Math.floor(N/2), N-1),-1)));\n return x2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"function genEasedTimer(start, stop, easer){\n return x => ((xstop) ? 1 : easer((x-start)/(stop-start))))\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`### Render Test Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof testPos = Range([0, cubeData[0].positions.length-1], {value: 0, label: \"Test Position\", step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"test_cubeCoords = curatedCubeData.map(x => x.positions[testPos])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"test_render = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n invalidation.then(() => renderer.dispose());\n renderer.setSize(width/2, width/2);\n renderer.setPixelRatio(devicePixelRatio);\n\n renderer.render(test_scene, test_camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`#### Boring Three.js stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"test_cubes = {\n var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true } );\n \n\n \n //*/\n return test_cubeCoords.map(x => {\n \n var c_r = new THREE.Color(palette[0]).getHex();\n var c_t = new THREE.Color(palette[1]).getHex();\n var c_l = new THREE.Color(palette[2]).getHex();\n \n // DRAW THE COLORS ON THAT CUBE\n var geometry = new THREE.BoxGeometry(1, 1, 1);\n geometry.faces[ 0 ].color.setHex( c_r ); // right side\n geometry.faces[ 1 ].color.setHex( c_r ); // right side\n geometry.faces[ 4 ].color.setHex( c_t ); // top side\n geometry.faces[ 5 ].color.setHex( c_t ); // top side\n geometry.faces[ 8 ].color.setHex( c_l ); // left side\n geometry.faces[ 9 ].color.setHex( c_l ); // left side\n \n // PUT THE CUBE IN THE RIGHT SPOT\n const cube = new THREE.Mesh(geometry, material);\n var s = 1;\n cube.position.x = (x.x)*s;\n cube.position.y = (x.y)*s;\n cube.position.z = (x.z)*s;\n return cube;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"test_scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(palette[3]);\n test_cubes.forEach(cube => scene.add(cube)); \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"test_camera = {\n const d = N*2.5;\n const camera = new THREE.OrthographicCamera(-d, d, d*1/1, -d*1/1, 0.001, 2000);\n camera.position.x = d;\n camera.position.y = d;\n camera.position.z = d;\n camera.lookAt(0, N/2, 0);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`## Render Main Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"{\n const draw = createAnimation({invalidation});\n \n if(renderAsGif) return yield* renderGif(invalidation, draw, duration, {\n fps,\n // The update interval during rendering (in ms), to prevent browser freezing.\n interval: 200,\n preview: draw(0),\n filename: 'cube-lozenge-loop',\n });\n \n //while(true) yield draw(Date.now() / duration % 1);\n for await(const t of Generators.input(viewof time)) yield draw(t);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof N = Range([3, 25], {value: 7, label: \"N\", step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof delay = Range([0, 5], {value: 0.5, label: \"Delay\", step:.1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof time = timeControl({invalidation, duration})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof renderAsGif = Object.defineProperty(\n html` Render animation as GIF`,\n 'value',\n {get() {return this.firstElementChild.checked}}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof doColors = Button('Generate New Color Palette')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof renderLines = Toggle({label: \"Render Lines?\", value:false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(palette[3]);\n cubes.forEach(cube => scene.add(cube)); \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"camera = {\n const d = 25;\n const camera = new THREE.OrthographicCamera(-d, d, d, -d, 0.001, 2000);\n camera.position.x = d;\n camera.position.y = d;\n camera.position.z = d;\n camera.lookAt(0, 0, 0);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"function timeControl({invalidation: invalidate, duration}) {\n const $paused = html``,\n $offset = inputs.range([0, 1], {step: .001, value: 0}),\n $view = html`

${$offset}${$paused} Pause`;\n \n $view.oninput = e => {\n if(e.target !== $view) e.stopImmediatePropagation();\n };\n \n let raf, last, offset = Date.now();\n (function loop() {\n if($paused.checked) offset = Date.now();\n else {\n $offset.value = (Date.now() - offset) / duration % 1;\n }\n if(last !== $offset.value) {\n $view.value = last = $offset.value;\n $view.dispatchEvent(new Event('input'));\n }\n raf = requestAnimationFrame(loop);\n })();\n Promise.race([invalidation, invalidate]).then(() => cancelAnimationFrame(raf));\n \n return $view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"palette = {\n doColors;\n //return [\"#2d3436\", \"#2d3436\", \"#2d3436\", \"#dfe6e9\"]\n //return [\"#f5f6fa\", \"#f5f6fa\", \"#f5f6fa\", \"#2f3640\"]\n return d3.shuffle(d3.shuffle(colorhunt)[0])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"duration = 8000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"fps = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"inputs = require('@observablehq/inputs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"import {generateRepeatedLozengeHeightmap} from \"@mattdzugan/3d-equivalency-of-a-favorite-2d-tiling\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import {generateLozengeHeightmap, computeHeightmap} from \"@mattdzugan/generative-lozenge-tilings\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {colorhunt} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"import {renderGif} from '@mootari/gif@766'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.90.0/build/three.min.js\");\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import {Button, Range, Toggle} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 34:"$33:body"