2b:null 2c:["$","title",null,{"children":"Six parts of a cube | Sander Evers | Observable"}] 31:T78f,{ function label(perm) { const el = html`${tex`${permlabel(perm)}`}`; el.className = 'controlLabel'; return el; }; const sx_box = (perm,ix) => html`${label(perm)}
`; const hf_box = (perm,ix) => html`${label([perm[0],perm[1]])}
`; const sx_form = bind(form(html``),viewof cube_vis); cubeform.style.margin = '15px 0px 15px 0px'; const cam_slider = html``; // cam_slider.style.position='absolute'; // cam_slider.style.transform=`translate(20px) rotate(90deg)`; // cam_slider.style.transformOrigin=`0% 0%`; cam_slider.style.width='200px'; cam_slider.style.display='block'; bind(cam_slider,viewof camrot); const inf_slider = html``; // inf_slider.style.position='absolute'; // inf_slider.style.transform=`translate(60px) rotate(90deg)`; // inf_slider.style.transformOrigin=`0% 0%`; inf_slider.style.width='200px'; inf_slider.style.display='block'; bind(inf_slider,viewof inflation); const controls = html`

${[sx_form,hf_form,cubeform,cam_slider,inf_slider]}

`; controls.style.position='absolute'; controls.style.textAlign='right'; controls.style.fontSize='11pt'; controls.style.top='100px'; controls.style.left=width+'px'; controls.style.transform='translate(-100%)'; controls.style.zIndex = 100; controls.style.whiteSpace='nowrap'; return controls; }32:T93f,{ const {scene,camera,camStart,camAxis,sixths,halves}=world; sixths.forEach((part,ix) => { part.visible = sx_vis[ix]>0; part.material[0].opacity = sx_vis[ix]*0.45; part.material[1].opacity = sx_vis[ix]*0.4; const move = new THREE.Vector4(-inflation/2,0,inflation/2,1).applyMatrix4(permutationMatrix(sixth_permutations[ix])); part.position.set(move.x,move.y,move.z); }); halves.forEach((block,ix) => { block.visible = hf_vis[ix]>0; block.material.opacity = hf_vis[ix]*0.6; }); cube_frame.visible = cube_vis.vis; const camPos = camStart.clone(); camPos.applyAxisAngle(camAxis,camrot); camera.position.set(camPos.x,camPos.y,camPos.z); camera.lookAt(0,0,0); function textpos3d(ix) { return new THREE.Vector3(-1/3,1/3,1).applyMatrix4(permutationMatrix(sixth_permutations[ix])); } function textpos2d(ix) { const curPos=textpos3d(ix); if (ix==1) { // animation of xzy_label - move from xyz to xzy position depending on xzy_swap value const axis=new THREE.Vector3(); axis.crossVectors(curPos,textpos3d(0)); const angle=curPos.angleTo(textpos3d(0)); axis.normalize(); curPos.applyAxisAngle(axis,xzy_swap*angle); } return curPos.applyMatrix4(camera.matrixWorldInverse).applyMatrix4(camera.projectionMatrix); } const halfWidth = renderer.domElement.width / 2; const halfHeight = renderer.domElement.height / 2; sixth_labels.forEach((label,ix) => { const xy = textpos2d(ix); label.style.left = (halfWidth + xy.x * halfWidth)+'px'; label.style.top = (halfHeight - xy.y * halfHeight)+'px'; // label visibility differs somewhat from object visibility const visible = (sx_vis[ix] || (ix==1 && time>k.l1s)) && time>k.l0s && timex)), 3)); frame.addAttribute('dist', new THREE.BufferAttribute(new Float32Array(dist),1)); frame.addAttribute('normal1', new THREE.BufferAttribute(new Float32Array(normal1.flatMap(x=>x)),3)); frame.addAttribute('normal2', new THREE.BufferAttribute(new Float32Array(normal2.flatMap(x=>x)),3)); const vertexShader = ` attribute float dist; attribute vec3 normal1; attribute vec3 normal2; uniform bool orthographic; varying float vdist; void main() { vec4 worldPosition = modelMatrix * vec4(position,1.0); vec3 camVector = orthographic ? cameraPosition : (cameraPosition - worldPosition.xyz); float in1 = dot(normal1,camVector); float in2 = dot(normal2,camVector); vdist = (in1>0.0 || in2>0.0)? 0.0 : dist; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } ` const fragmentShader = ` varying float vdist; void main() { float opacity = mod(vdist+1.0,3.0)<1.0 ? 0.0 : 1.0; gl_FragColor = vec4(0.0,0.0,0.0,opacity); } ` const material = new THREE.ShaderMaterial({vertexShader,fragmentShader,transparent:true,uniforms:{orthographic:{value:true}}}); const line = new THREE.LineSegments(frame,material); return line; }34:T446,// two labels at the same spot // appearing using two simultaneous CSS animations xyz_label = { const subject = tex`x < y < z`; const shadow = tex`x < y < z`; shadow.style = ` position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(0,0,0,0); text-align: center; ` const animations = ` @keyframes Aura { 0% { animation-timing-function: linear; text-shadow: 0 0 20px rgba(0,0,0,1); font-size: 25pt; letter-spacing: 10px; } 30% { animation-timing-function: ease-out; text-shadow: 0 0 0px rgba(0,0,0,0); font-size: 15pt; letter-spacing: 0px; } 80% { text-shadow: 0 0 50px rgba(0,0,0,1); font-size: 25pt; letter-spacing: 25px; } 100% { text-shadow: 0 0 50px rgba(0,0,0,0); font-size: 30pt; letter-spacing: 30px; } } @keyframes Appear { 0% { color: rgba(0,0,0,0); letter-spacing:3px; } 25% { color: rgba(0,0,0,0); letter-spacing:3px; } 40% { color: rgba(0,0,0,1); letter-spacing:0px; } 100% { color: rgba(0,0,0,1); letter-spacing:0px; } } `; return {subject,shadow,animations} }35:[] 2f:{"id":"2a905fe10b1f206e","slug":"six-parts-of-a-cube","title":"Six parts of a cube","thumbnail":"19ae8b2e38a163409bc5bbad1b771fabed857deb131329df2db484a980aa5451","access_level":"public","create_time":"$D2019-10-20T11:03:53.333Z","update_time":"$D2021-10-17T15:01:19.197Z","view_time":null,"first_public_time":"$D2019-10-23T15:43:45.945Z","fork":true,"stars":3,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":2383,"publish_version":2383,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"3704bea90b0005c7","slug":"isometric","title":"isometric","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"type":"notebook","body":{"title":"Six parts of a cube","cells":[{"id":0,"value":"md`# Six parts of a cube`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2212,"value":"md`An animation built using [three.js](https://threejs.org/), showing how the volume of a cube is divided into six parts by the order of the coordinate values. Pause it with the slider below, then explore interactively using the controls on the right.\n\nI posted [an account of its construction](https://sanderevers.github.io/2019/11/20/venture-into-webgl.html) at my personal blog.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2002,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"{ \n const header=html`

Six parts of a cube

`\n header.style.fontFamily='League Spartan';\n header.style.fontSize='24pt';\n header.style.position='absolute';\n header.style.whiteSpace='nowrap';\n header.style.left=width/2+'px';\n header.style.top='0px';\n header.style.transform='translate(-50%)';\n \n renderer.setSize( width, height ); \n return html`

${[renderer.domElement,header,...sixth_labels]}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"viewof time = {\n const ac = animationControl(10);\n ac.style.position='absolute';\n ac.style.whiteSpace='nowrap';\n ac.style.left=width/2+'px';\n ac.style.transform='translate(-50%)';\n // ac.style.left=(width-ac.offsetWidth)/2+'px';\n return ac;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2039,"value":"md`## Animation script\n\nThe dynamic properties of the scene, which can be manually controlled by the controls on the right, are automatically controlled by the following script while the animation slider is playing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"md`#### Keyframes\n\nThe \\`time\\` variable runs from 0 to 1. The moments when things start/stop to change are defined here:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1385,"value":"// keyframes\nk = Object.assign({\n b0:0, // enter xx, t=> {sx_new[1]=false})\n .to(k.rbs+0.06-0.016,x=>x,t=>{sx_new[1]=1;})\n .to(k.rbs+0.09-0.016,x=>1-d3.easeCubic(x),t=>{sx_new[1]=t;});\n \n // zx,t=>{sx_new[ix+2]=false;})\n .to(k.l2s+ix*0.016+0.02,d3.easeCubic,t=>{sx_new[ix+2]=t;})\n .to(k.rbs+0.06+ix*0.016,x=>x,t=>{sx_new[ix+2]=1;})\n .to(k.rbs+0.09+ix*0.016,x=>1-d3.easeCubic(x),t=>{sx_new[ix+2]=t;});\n } \n viewof sx_vis.value = sx_new;\n \n // movement\n from(k.rbs+0.03)\n .to(k.rbe, x=>(-Math.cos(2*Math.PI*x)+1)/2, t => {\n viewof inflation.value = t;\n });\n \n return '< open this cell';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2139,"value":"md`#### Halves flashing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"{\n const hf_new = {};\n // x{hf_new[0]=t})\n .to(k.be,x=>1-d3.easeCubicOut(x), t=> {hf_new[0] = t});\n // y {hf_new[2] = t})\n .to(k.be,x=>1-d3.easeCubicOut(x), t=> {hf_new[2] = t});\n viewof hf_vis.value = hf_new;\n\n return '< open this cell';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2151,"value":"md`#### Cube frame visibility:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2149,"value":"{\n from(0)\n .to(k.rbs,x=>x,t=>{viewof cube_vis.value={vis:true}})\n .to(k.rbe,x=>x,t=>{viewof cube_vis.value={vis:false}})\n .to(1,x=>x,t=>{viewof cube_vis.value={vis:true}});\n \n return '< open this cell';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2168,"value":"md`#### Camera rotation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1969,"value":"{\n const {camStart,camEnd} = world;\n const endAngle = camStart.angleTo(camEnd);\n\n // camera moves from start to end between k.rfs and k.rfe\n // and back between k.rbs and k.rbe\n from(k.rfs)\n .to(k.rfe, d3.easeQuad, t=>{viewof camrot.value = t*endAngle;})\n .to(k.rbs, x=>x, t=>{})\n .to(k.rbe, x=>1-d3.easeQuad(x), t=>{viewof camrot.value = t*endAngle;});\n\n return '< open this cell';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2157,"value":"md`#### Animated labels:\n\n(Not controlled by the UI.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1544,"value":"{\n // xyz_label: CSS animations are turned on at k.l0s\n from(0)\n .to(k.l0s,x=>x,t=>{\n xyz_label.shadow.style.animation='';\n xyz_label.subject.style.animation='';\n })\n .to(k.le,x=>x,t=>{\n xyz_label.shadow.style.animation='Aura 0.6s';\n xyz_label.subject.style.animation='Appear 0.6s ease-out';\n })\n .to(k.rbe,x=>x,t=>{\n xyz_label.shadow.style.animation='';\n xyz_label.subject.style.animation='';\n });\n\n // xzy_label: position moves from xyz to zyx between k.l1s and k.l1x\n // simultaneously, y and z are swapped.\n // both animations are controlled by xzy_swap, turning from 1 into 0\n from(k.l1s)\n .to(k.l1x, x=>x, t=> {viewof xzy_swap.value=1-t;});\n return '< open this cell'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2047,"value":"dynprops = md`## Dynamic properties\n\nThese cells are not directly defined in terms of \\`time\\`, but their values are changed by the animation script, or by the UI controls.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1187,"value":"viewof sx_vis = new NonRepeatingView({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1226,"value":"viewof hf_vis = new NonRepeatingView({});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2022,"value":"viewof cube_vis = new NonRepeatingView({vis:true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1176,"value":"viewof camrot = new View(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1541,"value":"viewof inflation = new View(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1556,"value":"viewof xzy_swap= new View(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2177,"value":"md`Based on the live values of these cells, the WebGL object properties (and text label CSS properties) are changed and the scene is re-rendered:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2184,"value":"md`## WebGL objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1301,"value":"sixth_permutations = {\n function insert_everywhere(elements,item,forwards) {\n const ret = [];\n for (let i=0;i<=elements.length;i++) {\n const p = [...elements];\n p.splice(i,0,item);\n ret.push(p);\n }\n if (!forwards)\n ret.reverse();\n return ret;\n }\n // https://en.wikipedia.org/wiki/Steinhaus%E2%80%93Johnson%E2%80%93Trotter_algorithm\n function all_permutations(elements) {\n const len = elements.length;\n if (len==0)\n return [[]];\n const last = elements[len-1];\n const ps = all_permutations(elements.slice(0,len-1));\n return ps.flatMap((p,i) => insert_everywhere(p,last,i%2));\n }\n return all_permutations([0,1,2])\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"// geometry for x face.v.flat())), 3));\n geo.setAttribute('normal',\n new THREE.BufferAttribute(new Float32Array(faces.flatMap(face => [...face.n,...face.n,...face.n])), 3));\n geo.addGroup(0,6,0);\n geo.addGroup(6,6,1);\n // faces.forEach((face,fix) => {\n // face.forEach(vertex => geo.vertices.push(new THREE.Vector3(...vertex)));\n // geo.faces.push(new THREE.Face3(3*fix+0, 3*fix+1, 3*fix+2, undefined, undefined, fix%2));// new THREE.Color((fix%2==0)?0xff0000:0x0000ff)));\n// });\n // geo.computeFaceNormals();\n // geo.computeVertexNormals();\n return geo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"function sixth(perm) {\n const colors = [0xff0000,0x00ff00,0xcccc00];\n const material0 = new THREE.MeshPhysicalMaterial( { transparent:true, metalness:0.8, roughness: 0.8,side:THREE.DoubleSide, emissive: new THREE.Color(0x000000), depthFunc: THREE.AlwaysDepth, color:new THREE.Color(colors[perm[2]])} );\n const material1 = new THREE.MeshPhysicalMaterial( { transparent:true, metalness:0.8, roughness: 0.8,side:THREE.DoubleSide, emissive: new THREE.Color(0x000000), depthFunc: THREE.AlwaysDepth, color:new THREE.Color(colors[perm[0]])} );\n const m = new THREE.Mesh(sixth_xyz, [material0,material1]);\n m.applyMatrix(permutationMatrix(perm));\n return m;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"half_permutations = {\n const bp = [...sixth_permutations];\n const f = bp.shift();\n bp.reverse();\n return [f,...bp];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"// geometry for xi and polarity pj\ncube_edge_normals = {\n const combis=[];\n for (let i=0; i<3; i++)\n for (let pi of [-1,1])\n for (let j=i+1; j<3; j++)\n for (let pj of [-1,1]) {\n let vi = [0,0,0];\n vi[i] = pi;\n let vj = [0,0,0];\n vj[j] = pj;\n combis.push([vi,vj]);\n }\n return combis; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"cube_attributes = {\n // vertices corresponding to n1==[1,0,0] and n2==[0,0,1]\n // are [1,-1,1] and [1,1,1]\n function makeVertices(n1,n2) {\n const zipWith = (f,as,bs) => as.map((a,i)=>f(a,bs[i]));\n const zeroto = d => (a,b) => a+b+((a||b)?0:d);\n return [zipWith(zeroto(-1),n1,n2), zipWith(zeroto(1),n1,n2)];\n }\n \n const vertices = cube_edge_normals.flatMap(ns => makeVertices(...ns))\n const normal1 = cube_edge_normals.flatMap(ns => [ns[0],ns[0]]);\n const normal2 = cube_edge_normals.flatMap(ns => [ns[1],ns[1]]);\n const dist = cube_edge_normals.flatMap(() => [0,20]);\n \n return {normal1,normal2,vertices,dist};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":854,"value":"lights = \n [new THREE.HemisphereLight(0xffffff,0x000000,7), ...[[0,6,-1],[1,-3,-1]].map(p => {\n const light = new THREE.SpotLight( 0xffffff, 30, 5, Math.PI/2, 0);\n light.position.set(...p);\n return light;\n})];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"world = {\n //const camera = new THREE.PerspectiveCamera( 60, width/height, 0.1, 1000 );\n const camera = new THREE.OrthographicCamera( -2.5*width/height, 2.5*width/height, 2.5, -2.5, 1, 1000 );\n const camStart = new THREE.Vector3(-1,1.5,4);\n const camEnd = new THREE.Vector3(3,3,3);\n const camAxis = new THREE.Vector3();\n camAxis.crossVectors(camStart,camEnd);\n camAxis.normalize();\n \n const scene = new THREE.Scene();\n scene.background = new THREE.Color( 0xffffff );\n\n const sixths=sixth_permutations.map(sixth);\n const halves=half_permutations.map(half);\n\n [cube_frame, ...sixths, ...halves, ...lights].forEach(obj => scene.add(obj));\n \n return {scene,camera,camStart,camEnd,camAxis,sixths,halves};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2193,"value":"md`## Text labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":691,"value":"function permlabel(perm) {\n const [f,s,t] = perm;\n return `${'xyz'[f]}<${'xyz'[s]}` + (t===undefined?'':`<${'xyz'[t]}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"sixth_labels = {\n function textspan(perm) {\n const [f,s,t] = perm;\n let text;\n if (perm.join('')=='021') {\n text = xzy_label.ineq2;\n } else if (perm.join('')=='012') {\n text = html`${xyz_label.subject}${xyz_label.shadow}`;\n text.style.textAlign='center';\n text.style.width ='700px';\n } else {\n text = html`${tex`${permlabel(perm)}`}`;\n }\n text.style.position = 'absolute';\n text.style.display = 'block';\n text.style.fontSize='12pt';\n text.style.transform = 'translate(-50%,-50%)';\n return text;\n }\n return sixth_permutations.map(textspan);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1635,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1581,"value":"// will be animated by adjusting the positions of az and ay\nxzy_label = {\n const az = html`${tex`z`}`;\n az.style.position='absolute';\n const ay = html`${tex`y`}`;\n ay.style.position='absolute';\n ay.style.transform='translate(-100%,0)';\n const ineq = html`${az}${tex`\\phantom{z} < \\phantom{y}`}${ay}`;\n const ineq2 = html`${tex`x < \\vphantom{z}`}${ineq}`;\n return {ineq,ineq2,az,ay};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1641,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2181,"value":"md`# Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1069,"value":"height=450","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1341,"value":"function from(start) {\n let _start=start;\n // map range [_start,end] to [0,1]; apply tween function; feed result to action\n function to(end,tween,action) {\n const curtime = (THREE.Math.clamp(time,this._start,end) - this._start) / (end-this._start);\n if (curtime>0 || start==this._start && time<=start) action(tween(curtime));\n this._start=end;\n return this;\n }\n return {to,_start}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"function permutationMatrix(perm) {\n const [p,q,r]=perm;\n const setvec = s => [0,0,0,0].map((e,i)=>i==s?1:0);\n const m = new THREE.Matrix4();\n m.set(...setvec(p),...setvec(q),...setvec(r),...setvec(3));\n m.transpose();\n return m;\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1747,"value":"// include League Spartan font in css\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2329,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"THREE = {\n const THREE = window.THREE = await require('three');\n await require('three/examples/js/controls/OrbitControls.js').catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"renderer = new THREE.WebGLRenderer({antialias: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"import {View,bind} from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1183,"value":"import {NonRepeatingView} from '@sanderevers/forms-with-two-way-data-binding'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1916,"value":"import {animationControl} from '@sanderevers/animation-control'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2298,"value":"{ viewof time.listenTo(now); }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"d3 = require('d3-ease')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"