2c:null 2d:["$","title",null,{"children":"WIP Observable vZome | Scott Vorthmann | Observable"}] 32:T605,vZomeCanvas = function( meshGroup, config ){ let { renderWidth=width, aspect=8/5, orbitControl=true } = config; const scene = new THREE.Scene(); scene.background = new THREE.Color( 0xffffff ); scene.add( meshGroup ); const lights = scene.lights = {}; lights.ambient = new THREE.AmbientLight(0x444444, .8); lights.spot = new THREE.SpotLight(0x888888, .4); lights.spot.position.set(200, 500, 0); lights.hemiLight = new THREE.HemisphereLight(0xefede8, 0x727248, .6); const fov = 30; const near = 1; const far = 4000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 500; camera.add(lights.hemiLight); camera.add(lights.ambient); camera.add(lights.spot); scene.add(camera); const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(renderWidth, renderWidth/aspect); renderer.setPixelRatio(devicePixelRatio); invalidation.then(() => (renderer.dispose())); var controls; if ( orbitControl ) { controls = new THREE.OrbitControls( camera, renderer.domElement ); // controls .rotateSpeed = 5; // controls .zoomSpeed = 2.5; invalidation.then(() => (renderer.dispose(),controls.dispose())); controls.addEventListener( "change", () => { renderer.render(scene, camera) }); } function animate() { requestAnimationFrame( animate ); controls && controls .update(); } animate(); renderer .render( scene, camera ); return renderer.domElement; }33:T5b4,defaultCanvas = function defaultCanvas( group, canvasWidth, aspect=8/5 ) { const scene = new THREE.Scene(); scene.background = new THREE.Color( 0xffffff ); scene.add( group ); const lights = scene.lights = {}; lights.ambient = new THREE.AmbientLight(0x444444, .8); lights.spot = new THREE.SpotLight(0x888888, .4); lights.spot.position.set(200, 500, 0); lights.hemiLight = new THREE.HemisphereLight(0xefede8, 0x727248, .6); const fov = 30; const near = 1; const far = 4000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.z = 500; camera.add(lights.hemiLight); camera.add(lights.ambient); camera.add(lights.spot); scene.add(camera); const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); const renderWidth = canvasWidth || width; renderer.setSize(renderWidth, renderWidth/aspect); renderer.setPixelRatio(devicePixelRatio); const controls = new THREE.OrbitControls( camera, renderer.domElement ); controls .staticMoving = true; // controls .rotateSpeed = 5; // controls .zoomSpeed = 2.5; invalidation.then(() => (controls.dispose(), renderer.dispose())); controls.addEventListener( "change", () => { renderer.render(scene, camera) }); function animate() { requestAnimationFrame( animate ); controls .update(); } animate(); renderer .render( scene, camera ); return renderer.domElement; }34:T5a2,function meshGroup( model, geometries=new Geometries( icosahedral_solid_connectors_shapes, colors ) ) { const group = new THREE.Object3D(); const ballMaterial = new THREE.MeshLambertMaterial({ color: geometries.ballColor }); model.balls.contents.forEach( (ball) => { const mesh = new THREE.Mesh( geometries.ballGeometry, ballMaterial ); const p = mesh.position; [ p.x, p.y, p.z ] = model.vertices.contents[ ball ] .map( grfloat ); group.add( mesh ); }); model.struts.forEach( (strut) => { const orbitName = strut.orbit; const color = geometries.strutColor( orbitName ); const material = new THREE.MeshLambertMaterial({ color: color }); const geometry = geometries.strutGeometry( orbitName, strut.length ); if ( geometry ) { const mesh = new THREE.Mesh( geometry, material ); const q = mesh.quaternion, p = mesh.position; [ p.x, p.y, p.z ] = model.vertices.contents[ strut.start ] .map( grfloat ); [ q.w, q.x, q.y, q.z ] = model.quaternions.contents[ strut.orientation ] .map( grfloat ); group.add( mesh ); } }); if ( model.panels ) { model.panels.forEach( (panel) => { const geometry = createPanelGeometry( panel, model.vertices.contents ); const material = new THREE.MeshLambertMaterial({ color: panel.color || colors[ "red" ] }); const mesh = new THREE.Mesh( geometry, material ); group.add( mesh ) }); } return group; }35:T428,resolveSegments = function resolveSegments( segments, model=newModel() ) { const scale = [2,3,1]; // phi cubed const struts = new IndexedSet; for (let segment of segments) { const startpoint = scalarmul(scale, segment[0]); const endpoint = scalarmul(scale, segment[1]); const startindex = model.vertices.add(startpoint); const endindex = model.vertices.add(endpoint); model.balls.add(startindex), model.balls.add(endindex); if (startindex != endindex) struts.add([startindex,endindex].sort()); } for (let [startindex, endindex] of struts.contents) { const startpoint = model.vertices.contents[startindex]; const endpoint = model.vertices.contents[endindex]; const displacement = vectorsub(endpoint, startpoint); const [orbit, quaternion, reflected, length] = orbit2(displacement); const quatindex = model.quaternions.add(quaternion); model.struts.push({ orbit: JSON.stringify(orbit), orientation: quatindex, start: reflected ? endindex : startindex, length: length }); } return model; } 36:[] 30:{"id":"03d72a1e3a89df69","slug":"wip-observable-vzome","title":"WIP Observable vZome","thumbnail":"85680b7d55c4c9da69a41996c0b1692a8119c3fde256eef55bbf5cf8974f7523","access_level":"public","create_time":"$D2018-09-11T02:53:45.779Z","update_time":"$D2023-01-21T17:50:12.448Z","view_time":null,"first_public_time":"$D2018-09-12T04:04:44.260Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":"starter_2024"},"version":3214,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null}],"members":[{"type":"individual","id":"c80882137d4e42a5","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"c6c505abda9887a4","slug":"vzome","title":"vZome","owner":{"id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann"}},"type":"notebook","body":{"titling":"auto","title":"WIP Observable vZome","cells":[{"id":0,"value":"md`# WIP Observable vZome\n\nThis notebook represents a new embodiment of vZome, native to the web,\nand reimagined in Javascript. It is a collaborative effort between [Jacob Rus](https://beta.observablehq.com/@jrus) and \n[Scott Vorthmann](https://beta.observablehq.com/@vorth), with Jacob providing\nmost of the fresh ideas and clever, clear implementation.\n\nFor now, this notebook gives you a handy viewer for [vZome](http://vzome.com) models, based\non [Three.js](https://threejs.org/), but no equivalent of the\n[desktop vZome](http://vzome.com/home/index/vzome-60/)\napplication for interactively building models. However, we\nare providing a completely transparent set of APIs for generating\nmodels using Javascript code. Observable vZome is far more open-ended\nthan the desktop application, which still has its place as a way\nto interactively create models.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2750,"value":"html`\n\n\n

\n${vZomeRenderer( testResolve, icosahedral_solid_connectors_shapes, 500 )}\n

The shape models used to render these purple struts and balls\nare imported from vZome. It is possible to hand-code your own shape models,\nbut we are not quite ready to document it.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2365,"value":"md`## vZomeRenderer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"function vZomeRenderer( model, shapes=icosahedral_solid_connectors_shapes, canvasWidth=width, aspect=8/5 ) {\n \n const solidParts = new Geometries( shapes, colors );\n const group = meshGroup( model, solidParts );\n return vZomeCanvas( group, { renderWidth: canvasWidth, aspect } );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3196,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2872,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2883,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"class Geometries {\n\n constructor( shapes, colors ) {\n this.colors = colors;\n this.shapes = shapes;\n this.cache = {};\n this.ballColor = colors[ \"white\" ];\n this.ballGeometry = createBallGeometry( shapes.ballShape );\n }\n\n strutGeometry( orbit, length ) {\n return getStrutGeometry( this.cache, this.shapes, orbit, length );\n }\n \n strutColor( orbit ) {\n const shape = this.shapes.strutShapes[ orbit ];\n if ( shape ) {\n return colors[ shape.color ];\n }\n else {\n return colors[ \"white\" ];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2696,"value":"function THREEVector3(v) {\n return new THREE.Vector3(...v.map(grfloat));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2687,"value":"function createStrutGeometry(shapes, orbit, length) {\n const shape = shapes.strutShapes[orbit];\n if ( ! shape )\n return undefined;\n var endpoint = scalarmul(length, shape.prototype );\n var midpoint = scalarmul([1,,2], endpoint);\n const vertices = shape.vertices.slice();\n for (const i of shape.tip) vertices[i] = vectoradd(vertices[i], endpoint);\n for (const i of shape.waist) vertices[i] = vectoradd(vertices[i], midpoint);\n \n const geometry = new THREE.Geometry();\n geometry.vertices = vertices.map(THREEVector3);\n geometry.faces = shape.polygons.reduce((triangles, polygon) => {\n return triangles.concat(triangulate(polygon));\n }, [] );\n geometry.computeFaceNormals();\n return geometry;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2304,"value":"function triangulate(polygon) {\n return polygon.reduce((tris, vertex, index, array) => {\n if (index >= 2) {\n tris.push(new THREE.Face3(array[0], array[index-1], array[index]));\n }\n return tris;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2897,"value":"function createPanelGeometry( panel, vertices ) {\n const geometry = new THREE.Geometry();\n geometry.vertices = panel.vertices.map( index => THREEVector3( vertices[ index ] ) );\n const list = [...range( panel.vertices.length )];\n geometry.faces = triangulate( list ) .concat( triangulate( list.reverse() ) );\n geometry.computeFaceNormals();\n return geometry;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"function createBallGeometry(shape) {\n const geometry = new THREE.Geometry();\n geometry.vertices = shape.vertices.map(THREEVector3);\n geometry.faces = shape.polygons.reduce((triangles, polygon) => {\n return triangles.concat(triangulate(polygon));\n }, []);\n geometry.computeFaceNormals();\n return geometry;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"function getStrutGeometry(cache, shapes, orbit, length) {\n const key = orbit + \":\" + length;\n if (!cache[key]) {\n cache[key] = createStrutGeometry(shapes, orbit, length);\n console.log(\"Cached geometry for \" + key);\n }\n return cache[key];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3116,"value":"md`## Useful Input Controls\n\nThis section contains some reusable input controls for Zome numbers,\nZome vectors, etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3118,"value":"function phiPowerInput( max ) {\n // exponents: [ -max, ... 0, ... max ]\n const exponents = [...Array( 2*max + 1 ).keys()] .map( i => i - max );\n const powers = exponents .map( i => grpow( [,1], i ) );\n return slider({\n value: max,\n min: 0, max: 2*max, step: 1,\n getValue: n => powers[n.value],\n display: v => numberString( v )\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3123,"value":"function numberString(a) {\n const [a0, a1=0] = a, sign = (a1 >= 0) ? '+' : '';\n return \"\" + a0 + sign + a1 + \"\\u03C6\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3136,"value":"function numberInput( maxPower, value=1 ) {\n const n = number( {value:value} );\n n.style.display = \"inline\"\n const p = phiPowerInput( maxPower );\n p.style.display = \"inline\"\n const element = html`${n}${p}`;\n element.oninput = () => element.value = grmul( [ n.value ], p.value );\n element.oninput();\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3139,"value":"viewof x = numberInput( 4, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3193,"value":"x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3127,"value":"function vectorInput( max, value=[1,0,0] ) {\n const x = numberInput( max, value[0] );\n const y = numberInput( max, value[1] );\n const z = numberInput( max, value[2] );\n const element = html`

${x}

${y}

${z}

`;\n element.oninput = () => element.value = [ x.value, y.value, z.value ];\n element.oninput();\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3129,"value":"function quaternionInput( max, title=\"\", value=[1,0,0,0] ) {\n const w = numberInput( max, value[0] );\n const x = numberInput( max, value[1] );\n const y = numberInput( max, value[2] );\n const z = numberInput( max, value[3] );\n const element = html`

${title}

${w}

${x}

${y}

${z}

`;\n element.oninput = () => element.value = [ w.value, x.value, y.value, z.value ];\n element.oninput();\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3166,"value":"quaternionInput( 3, \"Enter a quaternion:\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2161,"value":"md`## Model Resolution\n\nWe use the term *resolve* to refer to the process of taking a list\nof line segments (as pairs of vectors), and associating a strut shape,\nlength, and orientation with each.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2992,"value":"function newModel() {\n return {\n vertices: new IndexedSet,\n quaternions: new IndexedSet,\n balls: new IndexedSet,\n struts: [],\n panels: []\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2985,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2983,"value":"class IndexedSet {\n constructor() {\n this.contents = [];\n this.map = new Map;\n }\n add(item) {\n const itemhash = JSON.stringify(item);\n let index = this.map.get(itemhash);\n if (index == null) {\n index = this.contents.length;\n this.contents.push(item);\n this.map.set(itemhash, index);\n }\n return index;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"testResolve = {\n const v0 = scalarmul( [1, 2], [[1, 2], [0, 1], [0, 0]] ); // purple\n const vs = icosahedral_quaternions_vzome.map(q => quattransform(q, v0))\n const model = resolveSegments( vs.map(v => [[[0],[0],[0]], v]) );\n model.panels.push( { vertices: [3, 5, 7], color: colors[ \"yellow\" ] } );\n return model;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"colors = ({\n red: \"#c52431\",\n yellow: \"#f0a901\",\n blue: \"#06608d\",\n green: \"#088d32\",\n orange: \"#e76500\",\n purple: \"#7a42ab\",\n black: \"#28282a\",\n white: \"#eef1f7\",\n olive: \"#746801\",\n lavender: \"#907fe3\",\n maroon: \"#831147\",\n rose: \"#fc6aab\",\n navy: \"#343088\",\n brown: \"#693601\",\n apple: \"#81bf1e\",\n sand: \"#bb9055\",\n turquoise: \"#2fae97\",\n coral: \"#fe8c8b\",\n sulfur: \"#e3f02d\",\n cinnamon: \"#90380e\",\n spruce: \"#0c5437\",\n magenta: \"#db2976\",\n slate: \"#667e99\",\n mauve: \"#925283\",\n ivory: \"#e5ddb9\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2791,"value":"import {icosahedral_solid_connectors_shapes, icosahedral_lifelike_connectors_shapes} from '@vorth/wip-importing-vzome-shapes'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1866,"value":"import {\n vectoradd,\n grneg, grfloat, grmul, grdiv, grsub, simplify3,\n grpow,\n scalarmul, spread, vectorsub,\n icosahedral_quaternions_vzome,\n orbit2, range, deduplicate,\n quattransform, quatconj\n}\nfrom '@jrus/zome-arithmetic'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3074,"value":"import {select, slider, color, number} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"