feature-120-cell-layers #7
							
								
								
									
										15
									
								
								gui.js
									
									
									
									
									
								
							
							
						
						
									
										15
									
								
								gui.js
									
									
									
									
									
								
							| @ -6,7 +6,8 @@ const DEFAULTS = { | ||||
| 	nodesize: 1.25, | ||||
| 	linkopacity: 0.5, | ||||
| 	link2opacity: 0.5, | ||||
| 	shape: '120-cell inscribed', | ||||
| 	shape: '', | ||||
| 	option: '', | ||||
| 	visibility: 5, | ||||
| 	inscribed: false, | ||||
| 	inscribe_all: false, | ||||
| @ -24,10 +25,16 @@ class FourDGUI { | ||||
| 
 | ||||
| 	constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { | ||||
| 		this.gui = new GUI(); | ||||
| 		const SHAPE_NAMES = shapes.map((s) => s.name); | ||||
| 		// set default shape + option from the first shape
 | ||||
| 		DEFAULTS.shape = shapes[0].name; | ||||
| 		DEFAULTS.option = shapes[0].options[0].name; | ||||
| 
 | ||||
| 		this.parseLinkParams(); | ||||
| 		const guiObj = this; | ||||
| 		this.params = { | ||||
| 			shape: this.link['shape'], | ||||
| 			option: this.link['option'], | ||||
| 			inscribed: this.link['inscribed'], | ||||
| 			inscribe_all: this.link['inscribe_all'], | ||||
| 			thickness: this.link['thickness'], | ||||
| @ -44,7 +51,6 @@ class FourDGUI { | ||||
| 			dpsi: this.link['dpsi'], | ||||
| 			"copy link": function () { guiObj.copyUrl() } | ||||
| 		}; | ||||
| 		const SHAPE_NAMES = shapes.map((s) => s.name); | ||||
| 		let options_ctrl; | ||||
| 		this.gui.add(this.params, 'shape', SHAPE_NAMES).onChange((shape) => { | ||||
| 			const options = this.getShapeOptions(shapes, shape); | ||||
| @ -54,7 +60,7 @@ class FourDGUI { | ||||
| 			changeShape(shape) | ||||
| 		}); | ||||
| 		const options = this.getShapeOptions(shapes, this.params['shape']); | ||||
| 		options_ctrl = this.gui.add(this.params, 'options', options).onChange((option) => { | ||||
| 		options_ctrl = this.gui.add(this.params, 'option', options).onChange((option) => { | ||||
| 			setVisibility(option) | ||||
| 		}); | ||||
| 		this.gui.add(this.params, 'hyperplane', 1.5, 2.25); | ||||
| @ -111,7 +117,7 @@ class FourDGUI { | ||||
| 		const guiObj = this; | ||||
| 
 | ||||
| 		this.urlParams = this.linkUrl.searchParams; | ||||
| 		for( const param of [ "shape", "rotation", "visiblity" ]) { | ||||
| 		for( const param of [ "shape", "rotation", "option" ]) { | ||||
| 			const value = this.urlParams.get(param); | ||||
| 			if( value ) { | ||||
| 				this.link[param] = value; | ||||
| @ -137,6 +143,7 @@ class FourDGUI { | ||||
| 	copyUrl() { | ||||
| 		const url = new URL(this.linkUrl.origin + this.linkUrl.pathname); | ||||
| 		url.searchParams.append("shape", this.params.shape); | ||||
| 		url.searchParams.append("option", this.params.option); | ||||
| 		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()); | ||||
|  | ||||
							
								
								
									
										6
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										6
									
								
								main.js
									
									
									
									
									
								
							| @ -74,14 +74,14 @@ let node_show = []; | ||||
| let link_show = [];  | ||||
| 
 | ||||
| 
 | ||||
| function createShape(name) { | ||||
| function createShape(name, option) { | ||||
| 	if( shape ) { | ||||
| 		scene.remove(shape); | ||||
| 	} | ||||
| 	structure = STRUCTURES_BY_NAME[name]; | ||||
| 	shape = new FourDShape(node_ms, link_ms, face_ms, structure); | ||||
| 	scene.add(shape); | ||||
| 	setVisibility(structure.options[0].name); | ||||
| 	setVisibility(option ? option : structure.options[0].name); | ||||
| } | ||||
| 
 | ||||
| // initialise gui and read params from URL
 | ||||
| @ -177,7 +177,7 @@ renderer.domElement.addEventListener("pointerup", (event) => { | ||||
| 	dragging = false; | ||||
| }) | ||||
| 
 | ||||
| createShape(gui.params.shape); | ||||
| createShape(gui.params.shape, gui.params.option); | ||||
| 
 | ||||
| function animate() { | ||||
| 	requestAnimationFrame( animate ); | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user