Compare commits
	
		
			No commits in common. "main" and "feature-descriptions" have entirely different histories.
		
	
	
		
			main
			...
			feature-de
		
	
		
| @ -2,7 +2,7 @@ import * as THREE from 'three'; | |||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| const HYPERPLANE = 2.0; | const HYPERPLANE = 2.0; | ||||||
| const W_FORESHORTENING = 0.04; | 
 | ||||||
| 
 | 
 | ||||||
| class FourDShape extends THREE.Group { | class FourDShape extends THREE.Group { | ||||||
| 
 | 
 | ||||||
| @ -15,10 +15,11 @@ class FourDShape extends THREE.Group { | |||||||
| 		this.nodes3 = {}; | 		this.nodes3 = {}; | ||||||
| 		this.links = structure.links; | 		this.links = structure.links; | ||||||
| 		this.faces = ( "faces" in structure ) ? structure.faces : []; | 		this.faces = ( "faces" in structure ) ? structure.faces : []; | ||||||
|  | 		this.node_size = structure.geometry.node_size; | ||||||
|  | 		this.link_size = structure.geometry.link_size; | ||||||
| 		this.node_scale = 1; | 		this.node_scale = 1; | ||||||
| 		this.link_scale = 1; | 		this.link_scale = 1; | ||||||
| 		this.hyperplane = HYPERPLANE; | 		this.hyperplane = HYPERPLANE; | ||||||
| 		this.foreshortening = W_FORESHORTENING; |  | ||||||
| 		this.initShapes(); | 		this.initShapes(); | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| @ -34,7 +35,7 @@ class FourDShape extends THREE.Group { | |||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	makeNode(material, v3, scale) { | 	makeNode(material, v3) { | ||||||
| 		const geometry = new THREE.SphereGeometry(this.node_size); | 		const geometry = new THREE.SphereGeometry(this.node_size); | ||||||
| 		const sphere = new THREE.Mesh(geometry, material); | 		const sphere = new THREE.Mesh(geometry, material); | ||||||
| 		sphere.position.copy(v3); | 		sphere.position.copy(v3); | ||||||
| @ -43,43 +44,32 @@ class FourDShape extends THREE.Group { | |||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	makeLink(material, link) { | 	makeLink(material, link) { | ||||||
| 		const n1 = this.nodes3[link.source]; | 		const n1 = this.nodes3[link.source].v3; | ||||||
| 		const n2 = this.nodes3[link.target]; | 		const n2 = this.nodes3[link.target].v3; | ||||||
| 		const s1 = n1.scale; | 		const length = n1.distanceTo(n2); | ||||||
| 		const s2 = n2.scale; |  | ||||||
| 		const length = n1.v3.distanceTo(n2.v3); |  | ||||||
| 		const centre = new THREE.Vector3(); | 		const centre = new THREE.Vector3(); | ||||||
| 		centre.lerpVectors(n1.v3, n2.v3, 0.5); | 		centre.lerpVectors(n1, n2, 0.5); | ||||||
| 		const geometry = new THREE.CylinderGeometry( | 		const geometry = new THREE.CylinderGeometry(this.link_size, this.link_size, 1); | ||||||
| 			this.link_scale * s2, this.link_scale * s1, 1, |  | ||||||
| 			16, 1, true |  | ||||||
| 		); |  | ||||||
| 		const cyl = new THREE.Mesh(geometry, material); | 		const cyl = new THREE.Mesh(geometry, material); | ||||||
| 		const edge = new THREE.Group(); | 		const edge = new THREE.Group(); | ||||||
| 		edge.add(cyl); | 		edge.add(cyl); | ||||||
| 		edge.position.copy(centre); | 		edge.position.copy(centre); | ||||||
| 		edge.scale.copy(new THREE.Vector3(1, 1, length)); | 		edge.scale.copy(new THREE.Vector3(1, 1, length)); | ||||||
| 		edge.lookAt(n2.v3); | 		edge.lookAt(n2); | ||||||
| 		cyl.rotation.x = Math.PI / 2.0; | 		cyl.rotation.x = Math.PI / 2.0; | ||||||
| 		this.add(edge); | 		this.add(edge); | ||||||
| 		return edge; | 		return edge; | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	updateLink(link, links_show) { | 	updateLink(link, links_show) { | ||||||
| 		const n1 = this.nodes3[link.source]; | 		const n1 = this.nodes3[link.source].v3; | ||||||
| 		const n2 = this.nodes3[link.target]; | 		const n2 = this.nodes3[link.target].v3; | ||||||
| 		const s1 = n1.scale; | 		const length = n1.distanceTo(n2); | ||||||
| 		const s2 = n2.scale; |  | ||||||
| 		const length = n1.v3.distanceTo(n2.v3); |  | ||||||
| 		const centre = new THREE.Vector3(); | 		const centre = new THREE.Vector3(); | ||||||
| 		centre.lerpVectors(n1.v3, n2.v3, 0.5); | 		centre.lerpVectors(n1, n2, 0.5); | ||||||
| 		// take the average of the ends as the thickness - as a workaround,
 | 		link.object.scale.copy(new THREE.Vector3(this.link_scale, this.link_scale, length)); | ||||||
| 		// because I haven't worked out how to reshape tapered links without
 |  | ||||||
| 		// having to reassign a new geometry to every link
 |  | ||||||
| 		const link_mean = this.link_scale * (s1 + s2) * 0.5;		 |  | ||||||
| 		link.object.scale.copy(new THREE.Vector3(link_mean, link_mean, length)); |  | ||||||
| 		link.object.position.copy(centre); | 		link.object.position.copy(centre); | ||||||
| 		link.object.lookAt(n2.v3); | 		link.object.lookAt(n2); | ||||||
| 		link.object.children[0].rotation.x = Math.PI / 2.0; | 		link.object.children[0].rotation.x = Math.PI / 2.0; | ||||||
| 		link.object.visible = (!links_show || link.label in links_show);  | 		link.object.visible = (!links_show || link.label in links_show);  | ||||||
| 	} | 	} | ||||||
| @ -110,42 +100,24 @@ class FourDShape extends THREE.Group { | |||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 	fourDtoV3_old(x, y, z, w, rotations) { | 	fourDtoV3(x, y, z, w, rotations) { | ||||||
| 		const v4 = new THREE.Vector4(x, y, z, w); | 		const v4 = new THREE.Vector4(x, y, z, w); | ||||||
| 		for ( const m4 of rotations ) { | 		for ( const m4 of rotations ) { | ||||||
| 			v4.applyMatrix4(m4); | 			v4.applyMatrix4(m4); | ||||||
| 		} | 		} | ||||||
| 		const k = this.fourDscale(v4.w); | 		const k = this.hyperplane / (this.hyperplane + v4.w); | ||||||
| 		return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); | 		return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	fourDscale(w) { |  | ||||||
| 		return this.hyperplane / ( this.hyperplane + w ); |  | ||||||
| 	} |  | ||||||
| 	 |  | ||||||
| 	fourDrotate(x, y, z, w, rotations) { |  | ||||||
| 		const v4 = new THREE.Vector4(x, y, z, w); |  | ||||||
| 		for ( const m4 of rotations ) { |  | ||||||
| 			v4.applyMatrix4(m4); |  | ||||||
| 		} |  | ||||||
| 		return v4; |  | ||||||
| 	} |  | ||||||
| 
 |  | ||||||
| 	fourDtoV3(v4) { |  | ||||||
| 		const k = this.fourDscale(v4.w); |  | ||||||
| 		return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);		 |  | ||||||
| 	} |  | ||||||
| 
 | 
 | ||||||
| 	initShapes() { | 	initShapes() { | ||||||
| 		for( const n of this.nodes4 ) { | 		for( const n of this.nodes4 ) { | ||||||
| 			const k = this.fourDscale(n.w); | 			const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, []); | ||||||
| 			const v3 = new THREE.Vector3(n.x * k, n.y * k, n.z * k); |  | ||||||
| 			const material = this.getMaterial(n, this.node_ms); | 			const material = this.getMaterial(n, this.node_ms); | ||||||
| 			this.nodes3[n.id] = { | 			this.nodes3[n.id] = { | ||||||
| 				v3: v3, | 				v3: v3, | ||||||
| 				scale: k, |  | ||||||
| 				label: n.label, | 				label: n.label, | ||||||
| 				object: this.makeNode(material, v3, k) | 				object: this.makeNode(material, v3) | ||||||
| 			}; | 			}; | ||||||
| 		} | 		} | ||||||
| 		for( const l of this.links ) { | 		for( const l of this.links ) { | ||||||
| @ -162,15 +134,10 @@ class FourDShape extends THREE.Group { | |||||||
| 	render3(rotations, nodes_show, links_show) { | 	render3(rotations, nodes_show, links_show) { | ||||||
| 		this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale); | 		this.scalev3 = new THREE.Vector3(this.node_scale, this.node_scale, this.node_scale); | ||||||
| 		for( const n of this.nodes4 ) { | 		for( const n of this.nodes4 ) { | ||||||
| 			const v4 = this.fourDrotate(n.x, n.y, n.z, n.w,  rotations); | 			const v3 = this.fourDtoV3(n.x, n.y, n.z, n.w, rotations); | ||||||
| 			const k = this.fourDscale(v4.w); |  | ||||||
| 			const v3 = new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k); |  | ||||||
| 			const s4 = k * this.node_scale * this.foreshortening; |  | ||||||
| 			const s3 = new THREE.Vector3(s4, s4, s4); |  | ||||||
| 			this.nodes3[n.id].v3 = v3; | 			this.nodes3[n.id].v3 = v3; | ||||||
| 			this.nodes3[n.id].scale = k * this.foreshortening; |  | ||||||
| 			this.nodes3[n.id].object.position.copy(v3); | 			this.nodes3[n.id].object.position.copy(v3); | ||||||
| 			this.nodes3[n.id].object.scale.copy(s3); | 			this.nodes3[n.id].object.scale.copy(this.scalev3); | ||||||
| 			this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show ); | 			this.nodes3[n.id].object.visible = ( !nodes_show || n.label in nodes_show ); | ||||||
| 		} | 		} | ||||||
| 		for( const l of this.links ) { | 		for( const l of this.links ) { | ||||||
|  | |||||||
							
								
								
									
										39
									
								
								gui.js
									
									
									
									
									
								
							
							
						
						
									
										39
									
								
								gui.js
									
									
									
									
									
								
							| @ -2,11 +2,10 @@ import { GUI } from 'lil-gui'; | |||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| const DEFAULTS = { | const DEFAULTS = { | ||||||
| 	nodesize: 0.25, | 	thickness: 1.0, | ||||||
| 	nodeopacity: 1, | 	nodesize: 2.0, | ||||||
| 	linksize: 0.2, | 	linkopacity: 0.5, | ||||||
| 	linkopacity: 0.75, | 	link2opacity: 0.5, | ||||||
| 	link2opacity: 0.75, |  | ||||||
| 	shape: '120-cell', | 	shape: '120-cell', | ||||||
| 	option: 'none', | 	option: 'none', | ||||||
| 	visibility: 5, | 	visibility: 5, | ||||||
| @ -14,13 +13,11 @@ const DEFAULTS = { | |||||||
| 	inscribe_all: false, | 	inscribe_all: false, | ||||||
| 	color: 0x3293a9, | 	color: 0x3293a9, | ||||||
| 	background: 0xd4d4d4, | 	background: 0xd4d4d4, | ||||||
| 	hyperplane: 0.93, | 	hyperplane: 1.5, | ||||||
| 	zoom: 1, | 	zoom: 1, | ||||||
| 	xRotate: 'YW', | 	xRotate: 'YW', | ||||||
| 	yRotate: 'XW', | 	yRotate: 'XZ', | ||||||
| 	dtheta: 0, | 	dtheta: 0, | ||||||
| 	damping: false, |  | ||||||
| 	captions: true, |  | ||||||
| 	dpsi: 0, | 	dpsi: 0, | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @ -28,7 +25,7 @@ const DEFAULTS = { | |||||||
| 
 | 
 | ||||||
| class FourDGUI { | class FourDGUI { | ||||||
| 
 | 
 | ||||||
| 	constructor(shapes, changeShape, setColor, setBackground, setNodeOpacity,setLinkOpacity, setVisibility, showDocs) { | 	constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) { | ||||||
| 		this.gui = new GUI(); | 		this.gui = new GUI(); | ||||||
| 		const SHAPE_NAMES = shapes.map((s) => s.name); | 		const SHAPE_NAMES = shapes.map((s) => s.name); | ||||||
| 
 | 
 | ||||||
| @ -39,11 +36,10 @@ class FourDGUI { | |||||||
| 			option: this.link['option'], | 			option: this.link['option'], | ||||||
| 			inscribed: this.link['inscribed'], | 			inscribed: this.link['inscribed'], | ||||||
| 			inscribe_all: this.link['inscribe_all'], | 			inscribe_all: this.link['inscribe_all'], | ||||||
| 			linksize: this.link['linksize'], | 			thickness: this.link['thickness'], | ||||||
| 			linkopacity: this.link['linkopacity'], | 			linkopacity: this.link['linkopacity'], | ||||||
| 			link2opacity: this.link['linkopacity'], | 			link2opacity: this.link['linkopacity'], | ||||||
| 			nodesize: this.link['nodesize'], | 			nodesize: this.link['nodesize'], | ||||||
| 			nodeopacity: this.link['nodeopacity'], |  | ||||||
| 			depth: this.link['depth'], | 			depth: this.link['depth'], | ||||||
| 			color: this.link['color'], | 			color: this.link['color'], | ||||||
| 			background: this.link['background'], | 			background: this.link['background'], | ||||||
| @ -52,7 +48,6 @@ class FourDGUI { | |||||||
| 			xRotate: this.link['xRotate'], | 			xRotate: this.link['xRotate'], | ||||||
| 			yRotate: this.link['yRotate'], | 			yRotate: this.link['yRotate'], | ||||||
| 			damping: false, | 			damping: false, | ||||||
| 			captions: true, |  | ||||||
| 			dtheta: this.link['dtheta'], | 			dtheta: this.link['dtheta'], | ||||||
| 			dpsi: this.link['dpsi'], | 			dpsi: this.link['dpsi'], | ||||||
| 			"copy link": function () { guiObj.copyUrl() } | 			"copy link": function () { guiObj.copyUrl() } | ||||||
| @ -70,22 +65,20 @@ class FourDGUI { | |||||||
| 		options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => { | 		options_ctrl = this.gui.add(this.params, 'option').options(options).onChange((option) => { | ||||||
| 			setVisibility(option) | 			setVisibility(option) | ||||||
| 		}); | 		}); | ||||||
| 		this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8); | 		this.gui.add(this.params, 'hyperplane', 1.4, 2.0); | ||||||
| 		this.gui.add(this.params, 'zoom', 0.1, 2.0); | 		this.gui.add(this.params, 'zoom', 0.1, 2.0); | ||||||
| 		this.gui.add(this.params, 'nodesize', 0, 1); | 		this.gui.add(this.params, 'thickness', 0, 2); | ||||||
| 		this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity); |  | ||||||
| 		this.gui.add(this.params, 'linksize', 0, 1); |  | ||||||
| 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange( | 		this.gui.add(this.params, 'linkopacity', 0, 1).onChange( | ||||||
| 			(v) => setLinkOpacity(v, true) | 			(v) => setLinkOpacity(v, true) | ||||||
| 		); | 		); | ||||||
| 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange( | 		this.gui.add(this.params, 'link2opacity', 0, 1).onChange( | ||||||
| 			(v) => setLinkOpacity(v, false) | 			(v) => setLinkOpacity(v, false) | ||||||
| 		); | 		); | ||||||
|  | 		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); | ||||||
| 		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); | 		this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]); | ||||||
| 		this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]); | 		this.gui.add(this.params, 'yRotate', [ 'XZ', 'XY', 'XW' ]); | ||||||
| 		this.gui.add(this.params, 'captions').onChange(showDocs); |  | ||||||
| 		this.gui.add(this.params, 'damping'); | 		this.gui.add(this.params, 'damping'); | ||||||
| 		this.gui.add(this.params, 'copy link'); | 		this.gui.add(this.params, 'copy link'); | ||||||
| 
 | 
 | ||||||
| @ -141,11 +134,10 @@ class FourDGUI { | |||||||
| 		} | 		} | ||||||
| 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat); | 		this.link['hyperplane'] = this.numParam('hyperplane', parseFloat); | ||||||
| 		this.link['zoom'] = this.numParam('zoom', parseFloat); | 		this.link['zoom'] = this.numParam('zoom', parseFloat); | ||||||
| 		this.link['linksize'] = this.numParam('linksize', 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['link2opacity'] = this.numParam('link2opacity', parseFloat); | ||||||
| 		this.link['nodesize'] = this.numParam('nodesize', parseFloat); | 		this.link['nodesize'] = this.numParam('nodesize', parseFloat); | ||||||
| 		this.link['nodeopacity'] = this.numParam('nodeopacity', 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)); | ||||||
| 		this.link['dpsi'] = this.numParam('dpsi', parseFloat); | 		this.link['dpsi'] = this.numParam('dpsi', parseFloat); | ||||||
| @ -159,11 +151,10 @@ class FourDGUI { | |||||||
| 		url.searchParams.append("option", this.params.option); | 		url.searchParams.append("option", this.params.option); | ||||||
| 		url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n'); | 		url.searchParams.append("inscribed", this.params.inscribed ? 'y': 'n'); | ||||||
| 		url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n'); | 		url.searchParams.append("inscribe_all", this.params.inscribe_all ? 'y': 'n'); | ||||||
| 		url.searchParams.append("linksize", this.params.linksize.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("nodeopacity", this.params.nodesize.toString()); | 		url.searchParams.append("linkopacity", this.params.thickness.toString()); | ||||||
| 		url.searchParams.append("linkopacity", this.params.nodeopacity.toString()); | 		url.searchParams.append("link2opacity", this.params.nodesize.toString()); | ||||||
| 		url.searchParams.append("link2opacity", this.params.link2opacity.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()); | ||||||
|  | |||||||
							
								
								
									
										37
									
								
								main.js
									
									
									
									
									
								
							
							
						
						
									
										37
									
								
								main.js
									
									
									
									
									
								
							| @ -9,7 +9,7 @@ import { FourDShape } from './fourDShape.js'; | |||||||
| import { get_colours } from './colours.js'; | import { get_colours } from './colours.js'; | ||||||
| 
 | 
 | ||||||
| const FACE_OPACITY = 0.3; | const FACE_OPACITY = 0.3; | ||||||
| const CAMERA_K = 5; | const CAMERA_K = 10; | ||||||
| 
 | 
 | ||||||
| // scene, lights and camera
 | // scene, lights and camera
 | ||||||
| 
 | 
 | ||||||
| @ -47,19 +47,11 @@ material.opacity = 0.5; | |||||||
| const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); | const node_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); | ||||||
| const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); | const link_ms = node_colours.map((c) => new THREE.MeshStandardMaterial({color: c})); | ||||||
| 
 | 
 | ||||||
| node_ms.map((m) => { |  | ||||||
| 	m.transparent =  true; |  | ||||||
| 	m.opacity = 1.0; |  | ||||||
| 	} |  | ||||||
| ); |  | ||||||
| 
 |  | ||||||
| link_ms.map((m) => { | link_ms.map((m) => { | ||||||
| 	m.transparent =  true; | 	m.transparent =  true; | ||||||
| 	m.opacity = 0.5; | 	m.opacity = 0.5; | ||||||
| 	} | 	} | ||||||
| ); | ) | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 | 
 | ||||||
| const face_ms = [ | const face_ms = [ | ||||||
| 	new THREE.MeshLambertMaterial( { color: 0x44ff44 } ) | 	new THREE.MeshLambertMaterial( { color: 0x44ff44 } ) | ||||||
| @ -103,16 +95,6 @@ function displayDocs(name) { | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function showDocs(visible) { |  | ||||||
| 	console.log(`showDocs ${visible}`); |  | ||||||
| 	const docdiv = document.getElementById("description"); |  | ||||||
| 	if( visible ) { |  | ||||||
| 		docdiv.style.display = ''; |  | ||||||
| 	} else { |  | ||||||
| 		docdiv.style.display = 'none'; |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| // initialise gui and read params from URL
 | // initialise gui and read params from URL
 | ||||||
| 
 | 
 | ||||||
| // callbacks to do things which are triggered by controls: reset the shape,
 | // callbacks to do things which are triggered by controls: reset the shape,
 | ||||||
| @ -143,11 +125,6 @@ function setLinkOpacity(o, primary) { | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function setNodeOpacity(o) { |  | ||||||
| 	node_ms.map((nm) => nm.opacity = o); |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| let gui;  | let gui;  | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| @ -172,10 +149,8 @@ gui = new FourDGUI( | |||||||
| 	changeShape, | 	changeShape, | ||||||
| 	setColors, | 	setColors, | ||||||
| 	setBackground, | 	setBackground, | ||||||
| 	setNodeOpacity, |  | ||||||
| 	setLinkOpacity, | 	setLinkOpacity, | ||||||
| 	setVisibility, | 	setVisibility | ||||||
| 	showDocs |  | ||||||
| ); | ); | ||||||
| 
 | 
 | ||||||
| // these are here to pick up colour settings from the URL params
 | // these are here to pick up colour settings from the URL params
 | ||||||
| @ -238,11 +213,11 @@ function animate() { | |||||||
| 		rotfn[gui.params.xRotate](theta),  | 		rotfn[gui.params.xRotate](theta),  | ||||||
| 		rotfn[gui.params.yRotate](psi) | 		rotfn[gui.params.yRotate](psi) | ||||||
| 	]; | 	]; | ||||||
| 	shape.hyperplane = 1 / gui.params.hyperplane; | 	shape.hyperplane = gui.params.hyperplane; | ||||||
| 	camera.position.set(0, 0, gui.params.zoom * CAMERA_K * gui.params.hyperplane); | 	camera.position.set(0, 0, gui.params.zoom * CAMERA_K / gui.params.hyperplane); | ||||||
| 
 | 
 | ||||||
|  | 	shape.link_scale = gui.params.thickness; | ||||||
| 	shape.node_scale = gui.params.nodesize; | 	shape.node_scale = gui.params.nodesize; | ||||||
| 	shape.link_scale = gui.params.linksize * gui.params.nodesize * 0.5; |  | ||||||
| 	shape.render3(rotations, node_show, link_show); | 	shape.render3(rotations, node_show, link_show); | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | |||||||
							
								
								
									
										198
									
								
								polytopes.js
									
									
									
									
									
								
							
							
						
						
									
										198
									
								
								polytopes.js
									
									
									
									
									
								
							| @ -58,15 +58,16 @@ export function auto_detect_edges(nodes, neighbours, debug=false) { | |||||||
| // too small and simple to calculate
 | // too small and simple to calculate
 | ||||||
| 
 | 
 | ||||||
| export const cell5 = () => { | export const cell5 = () => { | ||||||
| 	const c1 = Math.sqrt(5) / 4; | 	const r5 = Math.sqrt(5); | ||||||
|  | 	const r2 = Math.sqrt(2) / 2; | ||||||
| 	return { | 	return { | ||||||
| 		name: '5-cell', | 		name: '5-cell', | ||||||
| 		nodes: [ | 		nodes: [ | ||||||
| 	      {id:1, label: 1, x: c1, y: c1, z: c1, w: -0.25 }, | 	      {id:1, label: 1, x: r2, y: r2, z: r2, w: -r2 / r5 }, | ||||||
| 	      {id:2, label: 2, x: c1, y: -c1, z: -c1, w: -0.25 }, | 	      {id:2, label: 2, x: r2, y: -r2, z: -r2, w: -r2 / r5 }, | ||||||
| 	      {id:3, label: 3, x: -c1, y: c1, z: -c1, w: -0.25 }, | 	      {id:3, label: 3, x: -r2, y: r2, z: -r2, w: -r2 / r5 }, | ||||||
| 	      {id:4, label: 4, x: -c1, y: -c1, z: c1, w: -0.25 }, | 	      {id:4, label: 4, x: -r2, y: -r2, z: r2, w: -r2 / r5 }, | ||||||
| 	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 1 }, | 	      {id:5, label: 5, x: 0, y: 0, z: 0, w: 4 * r2 / r5 }, | ||||||
| 		], | 		], | ||||||
| 		links: [ | 		links: [ | ||||||
| 			{ id:1, source:1, target: 2}, | 			{ id:1, source:1, target: 2}, | ||||||
| @ -80,6 +81,10 @@ export const cell5 = () => { | |||||||
| 			{ id:9, source:3, target: 5}, | 			{ id:9, source:3, target: 5}, | ||||||
| 			{ id:10, source:4, target: 5}, | 			{ id:10, source:4, target: 5}, | ||||||
| 		], | 		], | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ { name: '--' }], | 		options: [ { name: '--' }], | ||||||
| 		description: `Five tetrahedra joined at ten faces with three
 | 		description: `Five tetrahedra joined at ten faces with three
 | ||||||
| 		tetrahedra around each edge. The 5-cell is the simplest regular | 		tetrahedra around each edge. The 5-cell is the simplest regular | ||||||
| @ -104,13 +109,17 @@ export const cell16 = () => { | |||||||
| 	nodes[1].label = 4; | 	nodes[1].label = 4; | ||||||
| 
 | 
 | ||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	scale_nodes(nodes, 0.5); | 	scale_nodes(nodes, 0.75); | ||||||
| 	const links = auto_detect_edges(nodes, 6); | 	const links = auto_detect_edges(nodes, 6); | ||||||
| 
 | 
 | ||||||
| 	return { | 	return { | ||||||
| 		name: '16-cell', | 		name: '16-cell', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ { name: '--' }], | 		options: [ { name: '--' }], | ||||||
| 		description: `Sixteen tetrahedra joined at 32 faces with four
 | 		description: `Sixteen tetrahedra joined at 32 faces with four
 | ||||||
| 		tetrahedra around each edge. The 16-cell is the four-dimensional | 		tetrahedra around each edge. The 16-cell is the four-dimensional | ||||||
| @ -133,7 +142,7 @@ export const tesseract = () => { | |||||||
| 		} | 		} | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	scale_nodes(nodes, 0.5); | 	scale_nodes(nodes, Math.sqrt(2) / 2); | ||||||
| 	const links = auto_detect_edges(nodes, 4); | 	const links = auto_detect_edges(nodes, 4); | ||||||
| 	links.map((l) => { l.label = 0 }); | 	links.map((l) => { l.label = 0 }); | ||||||
| 
 | 
 | ||||||
| @ -149,6 +158,10 @@ export const tesseract = () => { | |||||||
| 		name: 'Tesseract', | 		name: 'Tesseract', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ | 		options: [ | ||||||
| 			{ name: 'none', links: [ 0 ] }, | 			{ name: 'none', links: [ 0 ] }, | ||||||
| 			{ name: 'one 16-cell', links: [ 0, 1 ] }, | 			{ name: 'one 16-cell', links: [ 0, 1 ] }, | ||||||
| @ -185,7 +198,6 @@ export const cell24 = () => { | |||||||
| 		n.label = CELL24_INDEXING[axes[0]][axes[1]]; | 		n.label = CELL24_INDEXING[axes[0]][axes[1]]; | ||||||
| 	} | 	} | ||||||
| 
 | 
 | ||||||
| 	scale_nodes(nodes, Math.sqrt(2) / 2); |  | ||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	const links = auto_detect_edges(nodes, 8); | 	const links = auto_detect_edges(nodes, 8); | ||||||
| 	links.map((l) => l.label = 0); | 	links.map((l) => l.label = 0); | ||||||
| @ -209,6 +221,10 @@ export const cell24 = () => { | |||||||
| 		name: '24-cell', | 		name: '24-cell', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		base: {}, | 		base: {}, | ||||||
| 		options: [ | 		options: [ | ||||||
| 			{ name: 'none', links: [ 0 ] }, | 			{ name: 'none', links: [ 0 ] }, | ||||||
| @ -322,7 +338,7 @@ export function make_120cell_vertices() { | |||||||
| 		PERMUTE.coordinates([2, 1, phi, phiinv], 0, true), | 		PERMUTE.coordinates([2, 1, phi, phiinv], 0, true), | ||||||
| 		].flat(); | 		].flat(); | ||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	scale_nodes(nodes, 0.25 * Math.sqrt(2)); | 	scale_nodes(nodes, 0.5); | ||||||
| 	return nodes; | 	return nodes; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @ -396,6 +412,10 @@ export const cell120_layered = (max) => { | |||||||
| 		name: '120-cell layered', | 		name: '120-cell layered', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		nolink2opacity: true, | 		nolink2opacity: true, | ||||||
| 		options: options, | 		options: options, | ||||||
| 		description: `This version of the 120-cell lets you explore its
 | 		description: `This version of the 120-cell lets you explore its
 | ||||||
| @ -427,6 +447,10 @@ export const cell120_inscribed = () => { | |||||||
| 		name: '120-cell', | 		name: '120-cell', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ | 		options: [ | ||||||
| 			{ name: "none", links: [ 0 ]}, | 			{ name: "none", links: [ 0 ]}, | ||||||
| 			{ name: "one inscribed 600-cell", links: [ 0, 1 ] }, | 			{ name: "one inscribed 600-cell", links: [ 0, 1 ] }, | ||||||
| @ -516,7 +540,7 @@ export function make_600cell_vertices() { | |||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	scale_nodes(nodes, 0.5); | 	scale_nodes(nodes, 0.75); | ||||||
| 	return nodes; | 	return nodes; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| @ -558,6 +582,10 @@ export const cell600 = () => { | |||||||
| 		name: '600-cell', | 		name: '600-cell', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ | 		options: [ | ||||||
| 			{ name: "none", links: [ 0 ]}, | 			{ name: "none", links: [ 0 ]}, | ||||||
| 			{ name: "one 24-cell", links: [ 0, 1 ] }, | 			{ name: "one 24-cell", links: [ 0, 1 ] }, | ||||||
| @ -607,6 +635,10 @@ export const cell600_layered = () => { | |||||||
| 		name: '600-cell layered', | 		name: '600-cell layered', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		nolink2opacity: true, | 		nolink2opacity: true, | ||||||
| 		options: options, | 		options: options, | ||||||
| 		description: `This version of the 600-cell lets you explore its
 | 		description: `This version of the 600-cell lets you explore its
 | ||||||
| @ -634,6 +666,10 @@ export const snub24cell = () => { | |||||||
| 		name: 'Snub 24-cell', | 		name: 'Snub 24-cell', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ { name: "--" } ], | 		options: [ { name: "--" } ], | ||||||
| 		description: `The snub 24-cell is a semiregular polytope which
 | 		description: `The snub 24-cell is a semiregular polytope which
 | ||||||
| 		connects the 24-cell with the 600-cell. It consists of 24 icosahedra | 		connects the 24-cell with the 600-cell. It consists of 24 icosahedra | ||||||
| @ -679,7 +715,6 @@ function make_dodecahedron_vertices() { | |||||||
| 			{ x: -phi, y: phiinv, z:0, w: 0 , 	label: 4}, | 			{ x: -phi, y: phiinv, z:0, w: 0 , 	label: 4}, | ||||||
| 			{ x: -phi, y: -phiinv, z:0, w: 0 , 	label: 2}, | 			{ x: -phi, y: -phiinv, z:0, w: 0 , 	label: 2}, | ||||||
| 		]; | 		]; | ||||||
| 	scale_nodes(nodes, 1 / Math.sqrt(3)); |  | ||||||
| 	index_nodes(nodes); | 	index_nodes(nodes); | ||||||
| 	return nodes; | 	return nodes; | ||||||
| } | } | ||||||
| @ -700,6 +735,10 @@ export const dodecahedron = () => { | |||||||
| 		name: 'Dodecahedron', | 		name: 'Dodecahedron', | ||||||
| 		nodes: nodes, | 		nodes: nodes, | ||||||
| 		links: links, | 		links: links, | ||||||
|  | 		geometry: { | ||||||
|  | 			node_size: 0.02, | ||||||
|  | 			link_size: 0.02 | ||||||
|  | 		}, | ||||||
| 		options: [ | 		options: [ | ||||||
| 			{ name: "none", links: [ 0 ]}, | 			{ name: "none", links: [ 0 ]}, | ||||||
| 			{ name: "one tetrahedron", links: [ 0, 1 ] }, | 			{ name: "one tetrahedron", links: [ 0, 1 ] }, | ||||||
| @ -715,139 +754,8 @@ export const dodecahedron = () => { | |||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| export const tetrahedron = () => { |  | ||||||
| 	const r2 = Math.sqrt(2); |  | ||||||
| 	const r3 = Math.sqrt(3); |  | ||||||
| 	return { |  | ||||||
| 		name: 'Tetrahedron', |  | ||||||
| 		nodes: [ |  | ||||||
| 	      {id:1, label: 1, x: 2 * r2 / 3, y: 0, z: -1/3, w: 0 }, |  | ||||||
| 	      {id:2, label: 2, x: -r2 / 3, y: r2 / r3, z: -1/3, w: 0 }, |  | ||||||
| 	      {id:3, label: 3, x: -r2 / 3, y: -r2 / r3, z: -1/3, w: 0 }, |  | ||||||
| 	      {id:4, label: 4, x: 0, y: 0, z: 1, w: 0 }, |  | ||||||
| 		], |  | ||||||
| 		links: [ |  | ||||||
| 			{ id:1, source:1, target: 2}, |  | ||||||
| 			{ id:2, source:1, target: 3}, |  | ||||||
| 			{ id:3, source:1, target: 4}, |  | ||||||
| 			{ id:4, source:2, target: 3}, |  | ||||||
| 			{ id:5, source:2, target: 4}, |  | ||||||
| 			{ id:6, source:3, target: 4}, |  | ||||||
| 		], |  | ||||||
| 		options: [ { name: '--' }], |  | ||||||
| 		description: `The simplest three-dimensional polytope, consisting of four triangles joined at six edges. The 5-cell is its four-dimensional analogue.`, |  | ||||||
| 	}; |  | ||||||
| }; |  | ||||||
| 
 |  | ||||||
| export const octahedron = () => { |  | ||||||
| 	const nodes = [ |  | ||||||
| 		{id: 1, label: 1, x: 1, y: 0, z: 0, w: 0}, |  | ||||||
| 		{id: 2, label: 1, x: -1, y: 0, z: 0, w: 0}, |  | ||||||
| 		{id: 3, label: 2, x: 0, y: 1, z: 0, w: 0}, |  | ||||||
| 		{id: 4, label: 2, x: 0, y: -1, z: 0, w: 0}, |  | ||||||
| 		{id: 5, label: 3, x: 0, y: 0, z: 1, w: 0}, |  | ||||||
| 		{id: 6, label: 3, x: 0, y: 0, z: -1, w: 0}, |  | ||||||
| 	]; |  | ||||||
| 	const links = [ |  | ||||||
| 		{id:1, source: 1, target: 3}, |  | ||||||
| 		{id:2, source: 1, target: 4}, |  | ||||||
| 		{id:3, source: 1, target: 5}, |  | ||||||
| 		{id:4, source: 1, target: 6}, |  | ||||||
| 		{id:5, source: 2, target: 3}, |  | ||||||
| 		{id:6, source: 2, target: 4}, |  | ||||||
| 		{id:7, source: 2, target: 5}, |  | ||||||
| 		{id:8, source: 2, target: 6}, |  | ||||||
| 		{id:9, source: 3, target: 5}, |  | ||||||
| 		{id:10, source: 3, target: 6}, |  | ||||||
| 		{id:11, source: 4, target: 5}, |  | ||||||
| 		{id:12, source: 4, target: 6}, |  | ||||||
| 	] |  | ||||||
| 	links.map((l) => { l.label = 0 }); |  | ||||||
| 	return { |  | ||||||
| 		name: 'Octahedron', |  | ||||||
| 		nodes: nodes, |  | ||||||
| 		links: links, |  | ||||||
| 		options: [ { name: '--' }], |  | ||||||
| 		description: `The three-dimensional cross-polytope, the 16-cell is its four-dimensional analogue.`, |  | ||||||
| 	}; |  | ||||||
| 
 |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| export const cube = () => { |  | ||||||
| 	const nodes = [ |  | ||||||
| 		{id: 1, label: 1, x: 1, y: 1, z: 1, w: 0}, |  | ||||||
| 		{id: 2, label: 2, x: -1, y: 1, z: 1, w: 0}, |  | ||||||
| 		{id: 3, label: 2, x: 1, y: -1, z: 1, w: 0}, |  | ||||||
| 		{id: 4, label: 1, x: -1, y: -1, z: 1, w: 0}, |  | ||||||
| 		{id: 5, label: 2, x: 1, y: 1, z: -1, w: 0}, |  | ||||||
| 		{id: 6, label: 1, x: -1, y: 1, z: -1, w: 0}, |  | ||||||
| 		{id: 7, label: 1, x: 1, y: -1, z: -1, w: 0}, |  | ||||||
| 		{id: 8, label: 2, x: -1, y: -1, z: -1, w: 0}, |  | ||||||
| 	]; |  | ||||||
| 	scale_nodes(nodes, 1/Math.sqrt(3)); |  | ||||||
| 	const links = auto_detect_edges(nodes, 3); |  | ||||||
| 	links.map((l) => { l.label = 0 }); |  | ||||||
| 	return { |  | ||||||
| 		name: 'Cube', |  | ||||||
| 		nodes: nodes, |  | ||||||
| 		links: links, |  | ||||||
| 		options: [ { name: '--' }], |  | ||||||
| 		description: `The three-dimensional measure polytope, the tesseract is its four-dimensional analogue.`, |  | ||||||
| 	}; |  | ||||||
| 
 |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| function make_icosahedron_vertices() { |  | ||||||
| 	const phi = 0.5 * (1 + Math.sqrt(5));   |  | ||||||
| 
 |  | ||||||
| 	const nodes = [ |  | ||||||
| 		{ x: 0, y: 1, z: phi, w: 0, label: 1 }, |  | ||||||
| 		{ x: 0, y: -1, z: phi, w: 0, label: 1 }, |  | ||||||
| 		{ x: 0, y: 1, z: -phi, w: 0, label: 1 }, |  | ||||||
| 		{ x: 0, y: -1, z: -phi, w: 0, label: 1 }, |  | ||||||
| 		{ x: 1, y: phi, z: 0, w: 0, label: 2 }, |  | ||||||
| 		{ x: -1, y: phi, z: 0, w: 0, label: 2 }, |  | ||||||
| 		{ x: 1, y: -phi, z: 0, w: 0, label: 2 }, |  | ||||||
| 		{ x: -1, y: -phi, z: 0, w: 0, label: 2 }, |  | ||||||
| 		{ x: phi, y: 0, z: 1, w: 0, label: 3}, |  | ||||||
| 		{ x: phi, y: 0, z: -1, w: 0, label: 3}, |  | ||||||
| 		{ x: -phi, y: 0, z: 1, w: 0, label: 3}, |  | ||||||
| 		{ x: -phi, y: 0, z: -1, w: 0, label: 3}, |  | ||||||
| 		]; |  | ||||||
| 
 |  | ||||||
|    	scale_nodes(nodes, 1/Math.sqrt((5 + Math.sqrt(5)) / 2)); |  | ||||||
| 	index_nodes(nodes); |  | ||||||
| 	return nodes; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| export const icosahedron = () => { |  | ||||||
| 	const nodes  = make_icosahedron_vertices(); |  | ||||||
| 	const links = auto_detect_edges(nodes, 5); |  | ||||||
| 	links.map((l) => l.label = 0); |  | ||||||
| 
 |  | ||||||
| 	return { |  | ||||||
| 		name: 'Icosahedron', |  | ||||||
| 		nodes: nodes, |  | ||||||
| 		links: links, |  | ||||||
| 		options: [ |  | ||||||
| 			{ name: "--"}, |  | ||||||
| 		], |  | ||||||
| 		description: `The icosahedron is a twenty-sided polyhedron and is dual to the dodecahedron. Its four-dimensional analogue is the 600-cell.` |  | ||||||
| 
 |  | ||||||
| 	} |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| 
 |  | ||||||
| export const build_all = () => { | export const build_all = () => { | ||||||
| 	return [ | 	return [ | ||||||
| 		tetrahedron(), |  | ||||||
| 		octahedron(), |  | ||||||
| 		cube(), |  | ||||||
| 		icosahedron(), |  | ||||||
| 	 	dodecahedron(), | 	 	dodecahedron(), | ||||||
| 	 	cell5(), | 	 	cell5(), | ||||||
| 		cell16(), | 		cell16(), | ||||||
| @ -860,7 +768,3 @@ export const build_all = () => { | |||||||
| 	 	cell120_layered() | 	 	cell120_layered() | ||||||
| 	 	]; | 	 	]; | ||||||
| } | } | ||||||
| 
 |  | ||||||
| export const radii = (shape) => { |  | ||||||
| 	return shape.nodes.map(n => Math.sqrt(n.x * n.x + n.y * n.y + n.z * n.z + n.w * n.w)) |  | ||||||
| } |  | ||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user