Added inscriptions for 600-cell, improved the gui, you can now see
all five 600-cells in the 120-cell for full mindbending
This commit is contained in:
		
							parent
							
								
									73c1cb0193
								
							
						
					
					
						commit
						fc5acaeda8
					
				
							
								
								
									
										33
									
								
								gui.js
									
									
									
									
									
								
							
							
						
						
									
										33
									
								
								gui.js
									
									
									
									
									
								
							| @ -6,7 +6,10 @@ const DEFAULTS = { | |||||||
| 	thickness: 0.25, | 	thickness: 0.25, | ||||||
| 	nodesize: 1.25, | 	nodesize: 1.25, | ||||||
| 	linkopacity: 0.5, | 	linkopacity: 0.5, | ||||||
|  | 	link2opacity: 0.5, | ||||||
| 	shape: '120-cell', | 	shape: '120-cell', | ||||||
|  | 	inscribed: false, | ||||||
|  | 	inscribe_all: false, | ||||||
| 	color: 0x3293a9, | 	color: 0x3293a9, | ||||||
| 	background: 0xd4d4d4, | 	background: 0xd4d4d4, | ||||||
| 	hyperplane: 2, | 	hyperplane: 2, | ||||||
| @ -19,14 +22,17 @@ const DEFAULTS = { | |||||||
| 
 | 
 | ||||||
| class FourDGUI { | class FourDGUI { | ||||||
| 
 | 
 | ||||||
| 	constructor(createShape, setColor, setBackground, setLinkOpacity) { | 	constructor(changeShape, setColor, setBackground, setLinkOpacity) { | ||||||
| 		this.gui = new GUI(); | 		this.gui = new GUI(); | ||||||
| 		this.parseLinkParams(); | 		this.parseLinkParams(); | ||||||
| 		const guiObj = this; | 		const guiObj = this; | ||||||
| 		this.params = { | 		this.params = { | ||||||
| 			shape: this.link['shape'], | 			shape: this.link['shape'], | ||||||
|  | 			inscribed: this.link['inscribed'], | ||||||
|  | 			inscribe_all: this.link['inscribe_all'], | ||||||
| 			thickness: this.link['thickness'], | 			thickness: this.link['thickness'], | ||||||
| 			linkopacity: this.link['linkopacity'], | 			linkopacity: this.link['linkopacity'], | ||||||
|  | 			link2opacity: this.link['linkopacity'], | ||||||
| 			nodesize: this.link['nodesize'], | 			nodesize: this.link['nodesize'], | ||||||
| 			color: this.link['color'], | 			color: this.link['color'], | ||||||
| 			background: this.link['background'], | 			background: this.link['background'], | ||||||
| @ -39,12 +45,19 @@ class FourDGUI { | |||||||
| 		}; | 		}; | ||||||
| 
 | 
 | ||||||
| 		this.gui.add(this.params, 'shape', | 		this.gui.add(this.params, 'shape', | ||||||
| 			[ '5-cell', '16-cell', 'tesseract', '24-cell', '600-cell', '120-cell', '120-cell-inscribed' ] | 			[ '5-cell', '16-cell', 'tesseract', | ||||||
| 		).onChange(createShape) | 				'24-cell', '600-cell', '120-cell' ] | ||||||
| 
 | 		).onChange(changeShape) | ||||||
|  | 		this.gui.add(this.params, 'inscribed').onChange(changeShape); | ||||||
|  | 		this.gui.add(this.params, 'inscribe_all').onChange(changeShape); | ||||||
| 		this.gui.add(this.params, 'hyperplane', 1.5, 2.25); | 		this.gui.add(this.params, 'hyperplane', 1.5, 2.25); | ||||||
| 		this.gui.add(this.params, 'thickness', 0.1, 2); | 		this.gui.add(this.params, 'thickness', 0.1, 2); | ||||||
| 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity); | 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange( | ||||||
|  | 			(v) => setLinkOpacity(v, true) | ||||||
|  | 		); | ||||||
|  | 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange( | ||||||
|  | 			(v) => setLinkOpacity(v, false) | ||||||
|  | 		); | ||||||
| 		this.gui.add(this.params, 'nodesize', 0.1, 4); | 		this.gui.add(this.params, 'nodesize', 0.1, 4); | ||||||
| 		this.gui.addColor(this.params, 'color').onChange(setColor); | 		this.gui.addColor(this.params, 'color').onChange(setColor); | ||||||
| 		this.gui.addColor(this.params, 'background').onChange(setBackground); | 		this.gui.addColor(this.params, 'background').onChange(setBackground); | ||||||
| @ -79,6 +92,7 @@ class FourDGUI { | |||||||
| 	parseLinkParams() { | 	parseLinkParams() { | ||||||
| 		this.linkUrl = new URL(window.location.toLocaleString()); | 		this.linkUrl = new URL(window.location.toLocaleString()); | ||||||
| 		this.link = {}; | 		this.link = {}; | ||||||
|  | 		const guiObj = this; | ||||||
| 
 | 
 | ||||||
| 		this.urlParams = this.linkUrl.searchParams; | 		this.urlParams = this.linkUrl.searchParams; | ||||||
| 		for( const param of [ "shape", "rotation" ]) { | 		for( const param of [ "shape", "rotation" ]) { | ||||||
| @ -89,10 +103,13 @@ class FourDGUI { | |||||||
| 				this.link[param] = DEFAULTS[param]; | 				this.link[param] = DEFAULTS[param]; | ||||||
| 			} | 			} | ||||||
| 		} | 		} | ||||||
| 		const guiObj = this; | 		for( const param of [ "inscribed", "inscribe_all"] ) { | ||||||
|  | 			this.link[param] = ( this.urlParams.get(param) === 'y' ); | ||||||
|  | 		} | ||||||
| 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat); | 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat); | ||||||
| 		this.link['thickness'] = this.numParam('thickness', parseFloat); | 		this.link['thickness'] = this.numParam('thickness', parseFloat); | ||||||
| 		this.link['linkopacity'] = this.numParam('linkopacity', parseFloat); | 		this.link['linkopacity'] = this.numParam('linkopacity', parseFloat); | ||||||
|  | 		this.link['link2opacity'] = this.numParam('link2opacity', parseFloat); | ||||||
| 		this.link['nodesize'] = this.numParam('nodesize', parseFloat); | 		this.link['nodesize'] = this.numParam('nodesize', parseFloat); | ||||||
| 		this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s)); | 		this.link['color'] = this.numParam('color', (s) => guiObj.stringToHex(s)); | ||||||
| 		this.link['background'] = this.numParam('background', (s) => guiObj.stringToHex(s)); | 		this.link['background'] = this.numParam('background', (s) => guiObj.stringToHex(s)); | ||||||
| @ -104,8 +121,12 @@ class FourDGUI { | |||||||
| 	copyUrl() { | 	copyUrl() { | ||||||
| 		const url = new URL(this.linkUrl.origin + this.linkUrl.pathname); | 		const url = new URL(this.linkUrl.origin + this.linkUrl.pathname); | ||||||
| 		url.searchParams.append("shape", this.params.shape); | 		url.searchParams.append("shape", this.params.shape); | ||||||
|  | 		url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n'); | ||||||
|  | 		url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n'); | ||||||
| 		url.searchParams.append("thickness", this.params.thickness.toString()); | 		url.searchParams.append("thickness", this.params.thickness.toString()); | ||||||
| 		url.searchParams.append("nodesize", this.params.nodesize.toString()); | 		url.searchParams.append("nodesize", this.params.nodesize.toString()); | ||||||
|  | 		url.searchParams.append("linkopacity", this.params.thickness.toString()); | ||||||
|  | 		url.searchParams.append("link2opacity", this.params.nodesize.toString()); | ||||||
| 		url.searchParams.append("color", this.hexToString(this.params.color)); | 		url.searchParams.append("color", this.hexToString(this.params.color)); | ||||||
| 		url.searchParams.append("background", this.hexToString(this.params.background)); | 		url.searchParams.append("background", this.hexToString(this.params.background)); | ||||||
| 		url.searchParams.append("hyperplane", this.params.hyperplane.toString()); | 		url.searchParams.append("hyperplane", this.params.hyperplane.toString()); | ||||||
|  | |||||||
							
								
								
									
										51
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										51
									
								
								main.js
									
									
									
									
									
								
							| @ -65,17 +65,39 @@ const STRUCTURES = { | |||||||
| 	'tesseract': POLYTOPES.tesseract(), | 	'tesseract': POLYTOPES.tesseract(), | ||||||
| 	'24-cell': POLYTOPES.cell24(), | 	'24-cell': POLYTOPES.cell24(), | ||||||
| 	'120-cell': POLYTOPES.cell120(), | 	'120-cell': POLYTOPES.cell120(), | ||||||
| 	'120-cell-inscribed': POLYTOPES.cell120_inscribed(), | 	'120-cell-all-inscribed': POLYTOPES.cell120_all_inscribed(), | ||||||
| 	'600-cell': POLYTOPES.cell600() | 	'600-cell': POLYTOPES.cell600(), | ||||||
|  | 	'600-cell-all-inscribed': POLYTOPES.cell600_all_inscribed(), | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
|  | const INSCRIBED = { | ||||||
|  | 	'120-cell': POLYTOPES.cell120_inscribed(), | ||||||
|  | 	'600-cell': POLYTOPES.cell600_inscribed(), | ||||||
|  | }; | ||||||
|  | 
 | ||||||
|  | const ALL_INSCRIBED = { | ||||||
|  | 	'120-cell': POLYTOPES.cell120_all_inscribed(), | ||||||
|  | 	'600-cell': POLYTOPES.cell600_all_inscribed(), | ||||||
|  | } | ||||||
|  | 
 | ||||||
| let shape = false; | let shape = false; | ||||||
| 
 | 
 | ||||||
| function createShape(name) { | function createShape(name, inscribed, all) { | ||||||
| 	if( shape ) { | 	if( shape ) { | ||||||
| 		scene.remove(shape); | 		scene.remove(shape); | ||||||
| 	} | 	} | ||||||
| 	shape = new FourDShape(node_ms, link_ms, face_ms, STRUCTURES[name]); | 	let structure = STRUCTURES[name]; | ||||||
|  | 	if( inscribed ) { | ||||||
|  | 		if( name in INSCRIBED ) { | ||||||
|  | 			if( all ) { | ||||||
|  | 				structure = ALL_INSCRIBED[name]; | ||||||
|  | 			} else { | ||||||
|  | 				structure = INSCRIBED[name]; | ||||||
|  | 			} | ||||||
|  | 		}  | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	shape = new FourDShape(node_ms, link_ms, face_ms, structure); | ||||||
| 	scene.add(shape); | 	scene.add(shape); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @ -97,13 +119,24 @@ function setBackground(c) { | |||||||
| 	scene.background = new THREE.Color(c) | 	scene.background = new THREE.Color(c) | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function setLinkOpacity(o) { | function setLinkOpacity(o, primary) { | ||||||
| 	for( const lm of link_ms ) { | 	if( primary ) { | ||||||
| 		lm.opacity = o; | 		link_ms[0].opacity = o; | ||||||
|  | 	} else { | ||||||
|  | 		for( const lm of link_ms.slice(1) ) { | ||||||
|  | 			lm.opacity = o; | ||||||
|  | 		} | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| const gui = new FourDGUI(createShape, setColors, setBackground, setLinkOpacity); | let gui; // 
 | ||||||
|  | 
 | ||||||
|  | function changeShape() { | ||||||
|  | 	console.log("change shape!") | ||||||
|  | 	createShape(gui.params.shape, gui.params.inscribed, gui.params.inscribe_all); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | gui = new FourDGUI(changeShape, setColors, setBackground, setLinkOpacity); | ||||||
| 
 | 
 | ||||||
| // these are here to pick up colour settings from the URL params
 | // these are here to pick up colour settings from the URL params
 | ||||||
| setColors(gui.params.color); | setColors(gui.params.color); | ||||||
| @ -146,7 +179,7 @@ renderer.domElement.addEventListener("pointerup", (event) => { | |||||||
| 	dragging = false; | 	dragging = false; | ||||||
| }) | }) | ||||||
| 
 | 
 | ||||||
| createShape(gui.params.shape); | createShape(gui.params.shape, gui.params.inscribed, gui.params.inscribe_all); | ||||||
| 
 | 
 | ||||||
| function animate() { | function animate() { | ||||||
| 	requestAnimationFrame( animate ); | 	requestAnimationFrame( animate ); | ||||||
|  | |||||||
							
								
								
									
										62
									
								
								polytopes.js
									
									
									
									
									
								
							
							
						
						
									
										62
									
								
								polytopes.js
									
									
									
									
									
								
							| @ -151,6 +151,11 @@ const CELL24_INDEXING = { | |||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | function node_by_id(nodes, nid) { | ||||||
|  | 	const ns = nodes.filter((n) => n.id === nid); | ||||||
|  | 	return ns[0]; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| 
 | 
 | ||||||
| export const cell24 = () => { | export const cell24 = () => { | ||||||
| 	const nodes = PERMUTE.coordinates([0, 0, 1, 1], 0); | 	const nodes = PERMUTE.coordinates([0, 0, 1, 1], 0); | ||||||
| @ -163,6 +168,15 @@ export const cell24 = () => { | |||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	const links = auto_detect_edges(nodes, 8); | 	const links = auto_detect_edges(nodes, 8); | ||||||
| 
 | 
 | ||||||
|  | 	links.map((l) => { | ||||||
|  | 		const ls = [ l.source, l.target ].map((nid) => node_by_id(nodes, nid).label); | ||||||
|  | 		for ( const c of [1, 2, 3] ) { | ||||||
|  | 			if( ! ls.includes(c) ) { | ||||||
|  | 				l.label = c | ||||||
|  | 			} | ||||||
|  | 		} | ||||||
|  | 	}); | ||||||
|  | 
 | ||||||
| 	return { | 	return { | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
| @ -357,7 +371,7 @@ export const cell120 = () => { | |||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| export const cell120_inscribed = () => { | const cell120_some_inscribed = (ps) => { | ||||||
| 	const nodes  = make_120cell_vertices(); | 	const nodes  = make_120cell_vertices(); | ||||||
| 	const links = auto_detect_edges(nodes, 4); | 	const links = auto_detect_edges(nodes, 4); | ||||||
| 
 | 
 | ||||||
| @ -366,7 +380,7 @@ export const cell120_inscribed = () => { | |||||||
| 	const all_links = links; | 	const all_links = links; | ||||||
| 	all_links.map((l) => l.label = 0); | 	all_links.map((l) => l.label = 0); | ||||||
| 
 | 
 | ||||||
| 	for( const p of [ 5 ]) { | 	for( const p of ps) { | ||||||
| 		const nodes600 = nodes.filter((n) => n.label === p); | 		const nodes600 = nodes.filter((n) => n.label === p); | ||||||
| 		const links600 = auto_detect_edges(nodes600, 12); | 		const links600 = auto_detect_edges(nodes600, 12); | ||||||
| 		links600.map((l) => l.label = p); | 		links600.map((l) => l.label = p); | ||||||
| @ -383,6 +397,9 @@ export const cell120_inscribed = () => { | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | export const cell120_inscribed = () => cell120_some_inscribed([5]); | ||||||
|  | export const cell120_all_inscribed = () => cell120_some_inscribed([1,2,3,4,5]); | ||||||
|  | 
 | ||||||
| 
 | 
 | ||||||
| // Schoute's partition via https://arxiv.org/abs/1010.4353
 | // Schoute's partition via https://arxiv.org/abs/1010.4353
 | ||||||
| 
 | 
 | ||||||
| @ -518,7 +535,7 @@ function make_600cell_vertices() { | |||||||
| 	].flat(); | 	].flat(); | ||||||
| 
 | 
 | ||||||
| 	for( const n of nodes ) { | 	for( const n of nodes ) { | ||||||
| 		n.label = label_vertex(n, coords, partition600) - 1; | 		n.label = label_vertex(n, coords, partition600); | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	for( const n of nodes ) { | 	for( const n of nodes ) { | ||||||
| @ -570,3 +587,42 @@ export const cell600 = () => { | |||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | 
 | ||||||
|  | const cell600_some_inscribed = (ps) => { | ||||||
|  | 	const nodes  = make_600cell_vertices(); | ||||||
|  | 	const links = auto_detect_edges(nodes, 12); | ||||||
|  | 
 | ||||||
|  | 	const all_links = links; | ||||||
|  | 	all_links.map((l) => l.label = 0); | ||||||
|  | 
 | ||||||
|  | 	for( const p of ps) { | ||||||
|  | 		const nodes24 = nodes.filter((n) => n.label === p); | ||||||
|  | 		const links24 = auto_detect_edges(nodes24, 8); | ||||||
|  | 		links24.map((l) => l.label = p); | ||||||
|  | 		all_links.push(...links24); | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 	return { | ||||||
|  | 		nodes: nodes, | ||||||
|  | 		links: all_links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
|  | 	} | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 	return { | ||||||
|  | 		nodes: nodes, | ||||||
|  | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		} | ||||||
|  | 	} | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | export const cell600_inscribed = () => cell600_some_inscribed([5]); | ||||||
|  | export const cell600_all_inscribed = () => cell600_some_inscribed([1,2,3,4,5]); | ||||||
|  | 
 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user