2b:null 2c:["$","title",null,{"children":"Observable vZome Rendering | Scott Vorthmann | Observable"}] 31:T48e,md`# Observable vZome Rendering This notebook represents a new embodiment of vZome, native to the web, and reimagined in Javascript. It is a collaborative effort between [Jacob Rus](https://beta.observablehq.com/@jrus) and [Scott Vorthmann](https://beta.observablehq.com/@vorth), with Jacob providing most of the fresh ideas and clever, clear implementation. For now, this notebook gives you a handy viewer for [vZome](http://vzome.com) models, based on [Three.js](https://threejs.org/), but no equivalent of the [desktop vZome](http://vzome.com/home/index/vzome-60/) application for interactively building models. However, we are providing a completely transparent set of APIs for generating models using Javascript code. Observable vZome is far more open-ended than the desktop application, which still has its place as a way to interactively create models. This notebook replaces an [earlier version][1]. It now supports a reusable 3d canvas that allows changes to the rendered model, without rebuilding the WebGL context. This is important if you want to have many such canvases on a page. [1]: https://beta.observablehq.com/@vorth/wip-observable-vzome `32:T5c3,function meshGroup( model, geometries=new Geometries( icosahedral_solid_connectors_shapes, colors ) ) { const group = new THREE.Object3D() model.balls.contents.forEach( (ball) => { const material = geometries .getMaterial( ball.color || geometries.ballColor ) const mesh = new THREE.Mesh( geometries.ballGeometry, material ) 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 = strut.color || geometries.strutColor( orbitName ) const material = geometries .getMaterial( 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 shape = createPanelShape( panel.vertices, model.vertices.contents ) const geometry = createShapeGeometry( embedShape( shape ) ) const material = geometries .getMaterial( panel.color || colors[ "red" ] ) const mesh = new THREE.Mesh( geometry, material ) group.add( mesh ) }); } return group; }33:T4f9,class Geometries { constructor( shapes, colors ) { this.colors = colors this.shapes = shapes this.cache = {} this.materials = {} this.ballColor = colors[ "white" ] this.ballGeometry = createShapeGeometry( embedShape( shapes.ballShape ) ) } strutGeometry( orbit, length ) { const key = orbit + ":" + length if (!this.cache[key]) { var shape = this.shapes.strutShapes[orbit] if ( ! shape ) { shape = getDefaultShape( JSON.parse( orbit ), [1,,2] ) shape.color = "#bdbdbd" this.shapes.strutShapes[ orbit ] = shape } this.cache[key] = createShapeGeometry( embedShape( resolveStrutShape( shape, length ) ) ) console.log("Cached geometry for " + key) } return this.cache[key] } getMaterial( color ) { if ( !this.materials[ color ] ) { var material = new THREE.MeshLambertMaterial({ color }) this .materials[ color ] = material } return this .materials[ color ] } strutColor( orbit ) { const shape = this.shapes.strutShapes[ orbit ]; if ( shape ) { var color = shape.color; if ( color .startsWith( "#" ) ) return color else return colors[ color ] } else { return "#aaaaaa"; } } }34:[] 2f:{"id":"c27ff4c9c29cd3fd","slug":"observable-vzome-rendering","title":"Observable vZome Rendering","thumbnail":"8969b92dd32d8f29d772c8c25b7050b3f87c0ed6a159381b2ee3cba9e06fa300","access_level":"public","create_time":"$D2019-01-01T23:19:48.333Z","update_time":"$D2021-06-02T22:26:17.159Z","view_time":null,"first_public_time":"$D2019-01-02T06:54:13.116Z","fork":{"id":"03d72a1e3a89df69","slug":"wip-observable-vzome","title":"WIP Observable vZome","owner":{"id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann","avatar_url":"https://avatars-next.observableusercontent.com/2f38be1791bd361c7d78e3163c0ba8ff19e87d0419eb72a6e479dacc410deb9a","tier":"starter_2024"},"version":3813,"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,"subscribed":null,"forks":0,"collection":{"id":"c6c505abda9887a4","slug":"vzome","title":"vZome","owner":{"id":"bd8d3517f25bb386","login":"vorth","name":"Scott Vorthmann"}},"type":"notebook","body":{"title":"Observable vZome Rendering","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3501,"value":" vZome.renderModel( this, testResolve, { renderWidth:900 } )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3574,"value":"md`\nYou can experiment with several changes. First, rotate, pan, or zoom\nin the canvas above, using your mouse. Then, as you make changes below,\nyou'll see\nthat your camera position is not changing. This means that the canvas\nis not being discarded and recreated.\n\nThe *testResolve* model is generated in a cell below. It is applying\nicosahedral symmetry to a strut in the blue plane. You can control the\nY-axis coordinate here:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3563,"value":"viewof y = vZome.numberInput( 4 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3746,"value":"md`\nYou can control the length of the struts relative to the ball size here:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3739,"value":"viewof scale = vZome.numberInput( 4, 5 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3576,"value":"md`\nThe model also includes a panel joining three of the strut endpoints.\nYou can adjust the panel color with this color picker:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3567,"value":"viewof panelColor = color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3578,"value":"md`\nFinally, you can simply edit the code below, which generates the model being rendered above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"testResolve = {\n const v0 = scalarmul( scale, [[1, 0], y, [0]] );\n const q = icosahedral_quaternions_vzome[ 27 ]\n const vs = [ quattransform( q, v0 ) ]\n const model = resolveSegments( vs.map(v => [[[0],[0],[0]], v]) );\n // model.panels.push( { vertices: [5, 13, 14], color: panelColor } );\n return model;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3547,"value":"md`\nThe following cell, demonstrating a canvas inlined in HTML,\nuses a *non-reusable* canvas,\nuntil I can figure out how to access the canvas\nelement from \"this\", which is the table element.\nIt is disabled, since its presence will ruin the use of the other canvas.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2750,"value":"XXX html`\n\n\n

\n${\n vZome.reusable3dCanvas( this, meshGroup( testResolve ), { renderWidth:500 } )\n}\n

The shape models used to render these 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3214,"value":"md`\n## Public Functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3238,"value":"vZome = ({\n renderModel,\n meshGroup,\n createShapeGeometry,\n Geometries,\n numberInput,\n vectorInput,\n quaternionInput\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"function renderModel( existingCanvas, model, config ) {\n const { shapes=icosahedral_solid_connectors_shapes } = config\n const solidParts = new Geometries( shapes, colors )\n const group = meshGroup( model, solidParts )\n return reusable3dCanvas( existingCanvas, group, config )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2883,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2878,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3276,"value":"md`## Private Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3730,"value":"md`The embedShape function converts shape vertices from vectors over\nthe Golden field to vectors over the real numbers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3665,"value":"function embedShape( shape ){\n return { polygons: shape.polygons, vertices: shape.vertices.map( v => v.map(grfloat) ) }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3650,"value":"function resolveStrutShape(shape, length) {\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 return { polygons: shape.polygons, vertices }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3660,"value":"function createPanelShape( indices, allVertices ) {\n const vertices = indices.map( index => allVertices[ index ] )\n const list = [...range( indices.length )]\n const polygons = [ list.slice(), list.slice().reverse() ]\n return { vertices, polygons }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2302,"value":"function createShapeGeometry( shape ) {\n\n function triangulatePolygons( polygons ) {\n\n 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 }\n return polygons.reduce((triangles, polygon) => {\n return triangles.concat( triangulate( polygon ) )\n }, [] )\n }\n \n const geometry = new THREE.Geometry()\n geometry.vertices = shape.vertices.map( v => new THREE.Vector3(...v) )\n geometry.faces = triangulatePolygons( shape.polygons )\n geometry.computeFaceNormals()\n return geometry\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":3118,"value":"function phiPowerInput( max, config={} ) {\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 const sliderConfig = Object.assign( {}, config, {\n value: max,\n min: 0, max: 2*max, step: 1,\n getValue: n => powers[n.value],\n display: v => numberString( v )\n } )\n return slider( sliderConfig );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":3136,"value":"function numberInput( maxPower=4, 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","output":"$undefined","database":"$undefined"},{"id":3139,"value":"viewof x = numberInput( 4, 0 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":3166,"value":"quaternionInput( 3, \"Enter a quaternion:\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":3799,"value":"resolveSegment = function resolveSegment( startindex, endindex, model, color ) {\n const startpoint = model.vertices.contents[startindex]\n const endpoint = model.vertices.contents[endindex]\n const displacement = vectorsub( endpoint, startpoint )\n const [orbit, quaternion, reflected, length] = orbit2(displacement)\n const quatindex = model.quaternions.add(quaternion)\n model.struts.push({\n orbit: JSON.stringify(orbit), orientation: quatindex,\n start: reflected ? endindex : startindex, length: length, color })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2985,"value":"resolveSegments = function resolveSegments( segments, model=newModel(), scale=[2,3,1] ) {\n const struts = new IndexedSet;\n\n for (let segment of segments) {\n const startpoint = scalarmul(scale, segment[0]);\n const endpoint = scalarmul(scale, segment[1]);\n const startindex = model.vertices.add(startpoint);\n const endindex = model.vertices.add(endpoint);\n model.balls.add(startindex), model.balls.add(endindex);\n if (startindex != endindex) struts.add([startindex,endindex].sort());\n }\n\n for (let [startindex, endindex] of struts.contents) {\n resolveSegment( startindex, endindex, model )\n }\n\n return model;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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: \"#c4e751\",\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","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3606,"value":"import {getDefaultShape} from '@vorth/a-shape-for-white-struts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","output":"$undefined","database":"$undefined"},{"id":3750,"value":"import {reusable3dCanvas, reactive3dCanvas} from '@vorth/reusable-three-js-canvas'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"