Added descriptions for each of the shapes
parent
b22ac6546d
commit
680f9997f9
10
index.html
10
index.html
|
@ -5,6 +5,15 @@
|
|||
<title>FourD</title>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
div#description {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20%;
|
||||
z-index: 2;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
}
|
||||
div#info {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
|
@ -16,6 +25,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<div id="description"></div>
|
||||
<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
|
||||
<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
|
||||
</body>
|
||||
|
|
14
main.js
14
main.js
|
@ -85,6 +85,16 @@ function createShape(name, option) {
|
|||
setVisibility(option ? option : structure.options[0].name);
|
||||
}
|
||||
|
||||
function displayDocs(name) {
|
||||
const docdiv = document.getElementById("description");
|
||||
const description = STRUCTURES_BY_NAME[name].description;
|
||||
if( description ) {
|
||||
docdiv.innerHTML =`<p>${name}</p><p>${description}</p>`;
|
||||
} else {
|
||||
docdiv.innerHTML =`<p>${name}</p>`;
|
||||
}
|
||||
}
|
||||
|
||||
// initialise gui and read params from URL
|
||||
|
||||
// callbacks to do things which are triggered by controls: reset the shape,
|
||||
|
@ -119,7 +129,8 @@ let gui;
|
|||
|
||||
|
||||
function changeShape() {
|
||||
createShape(gui.params.shape);
|
||||
createShape(gui.params.shape);
|
||||
displayDocs(gui.params.shape);
|
||||
}
|
||||
|
||||
function setVisibility(option_name) {
|
||||
|
@ -184,6 +195,7 @@ renderer.domElement.addEventListener("pointerup", (event) => {
|
|||
})
|
||||
|
||||
createShape(gui.params.shape, gui.params.option);
|
||||
displayDocs(gui.params.shape);
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame( animate );
|
||||
|
|
64
polytopes.js
64
polytopes.js
|
@ -85,7 +85,12 @@ export const cell5 = () => {
|
|||
node_size: 0.02,
|
||||
link_size: 0.02
|
||||
},
|
||||
options: [ { name: '--' }]
|
||||
options: [ { name: '--' }],
|
||||
description: `Five tetrahedra joined at ten faces with three
|
||||
tetrahedra around each edge. The 5-cell is the simplest regular
|
||||
four-D polytope and the four-dimensional analogue of the tetrahedron.
|
||||
A corresponding polytope, or simplex, exists for every n-dimensional
|
||||
space.`,
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -115,7 +120,11 @@ export const cell16 = () => {
|
|||
node_size: 0.02,
|
||||
link_size: 0.02
|
||||
},
|
||||
options: [ { name: '--' }]
|
||||
options: [ { name: '--' }],
|
||||
description: `Sixteen tetrahedra joined at 32 faces with four
|
||||
tetrahedra around each edge. The 16-cell is the four-dimensional
|
||||
analogue of the octahedron and is dual to the tesseract. Every
|
||||
n-dimensional space has a corresponding polytope in this family.`,
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -146,7 +155,7 @@ export const tesseract = () => {
|
|||
|
||||
|
||||
return {
|
||||
name: 'tesseract',
|
||||
name: 'Tesseract',
|
||||
nodes: nodes,
|
||||
links: links,
|
||||
geometry: {
|
||||
|
@ -158,6 +167,12 @@ export const tesseract = () => {
|
|||
{ name: 'one 16-cell', links: [ 0, 1 ] },
|
||||
{ name: 'both 16-cells', links: [ 0, 1, 2 ] },
|
||||
],
|
||||
description: `The most well-known four-dimensional shape, the
|
||||
tesseract is analogous to the cube, and is constructed by placing two
|
||||
cubes in parallel hyperplanes and joining their corresponding
|
||||
vertices. It consists of eight cubes joined at 32 face with three
|
||||
cubes around each edge, and is dual to the 16-cell. Every
|
||||
n-dimensional space has a cube analogue or measure polytope.`,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -215,7 +230,11 @@ export const cell24 = () => {
|
|||
{ name: 'none', links: [ 0 ] },
|
||||
{ name: 'one 16-cell', links: [ 0, 1 ] },
|
||||
{ name: 'three 16-cells', links: [ 0, 1, 2, 3 ] }
|
||||
]
|
||||
],
|
||||
description: `A unique object without an exact analogue in higher
|
||||
or lower dimensions, the 24-cell is made of twenty-four octahedra
|
||||
joined at 96 faces, with three around each edge. The 24-cell is
|
||||
self-dual.`,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -398,7 +417,9 @@ export const cell120_layered = (max) => {
|
|||
link_size: 0.02
|
||||
},
|
||||
nolink2opacity: true,
|
||||
options: options
|
||||
options: options,
|
||||
description: `This version of the 120-cell lets you explore its
|
||||
structure by building each layer from the 'north pole' onwards.`,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -434,7 +455,11 @@ export const cell120_inscribed = () => {
|
|||
{ name: "none", links: [ 0 ]},
|
||||
{ name: "one inscribed 600-cell", links: [ 0, 1 ] },
|
||||
{ name: "five inscribed 600-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
|
||||
]
|
||||
],
|
||||
description: `The 120-cell is the four-dimensional analogue of the
|
||||
dodecahedron, and consists of 120 dodecahedra joined at 720 faces,
|
||||
with three dodecahedra around each edge. It is dual to the 600-cell,
|
||||
and five 600-cells can be inscribed in its vertices.`,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -565,7 +590,12 @@ export const cell600 = () => {
|
|||
{ name: "none", links: [ 0 ]},
|
||||
{ name: "one 24-cell", links: [ 0, 1 ] },
|
||||
{ name: "five 24-cells", links: [ 0, 1, 2, 3, 4, 5 ] }
|
||||
]
|
||||
],
|
||||
description: `The 600-cell is the four-dimensional analogue of the
|
||||
icosahedron, and consists of 600 tetrahedra joined at 1200 faces
|
||||
with five tetrahedra around each edge. It is dual to the 120-cell.
|
||||
Its 120 vertices can be partitioned into five sets which form the
|
||||
vertices of five inscribed 24-cells.`,
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -610,7 +640,9 @@ export const cell600_layered = () => {
|
|||
link_size: 0.02
|
||||
},
|
||||
nolink2opacity: true,
|
||||
options: options
|
||||
options: options,
|
||||
description: `This version of the 600-cell lets you explore its
|
||||
structure by building each layer from the 'north pole' onwards.`,
|
||||
}
|
||||
|
||||
|
||||
|
@ -631,7 +663,7 @@ export const snub24cell = () => {
|
|||
links.map((l) => l.label = 0);
|
||||
|
||||
return {
|
||||
name: 'snub 24-cell',
|
||||
name: 'Snub 24-cell',
|
||||
nodes: nodes,
|
||||
links: links,
|
||||
geometry: {
|
||||
|
@ -639,6 +671,11 @@ export const snub24cell = () => {
|
|||
link_size: 0.02
|
||||
},
|
||||
options: [ { name: "--" } ],
|
||||
description: `The snub 24-cell is a semiregular polytope which
|
||||
connects the 24-cell with the 600-cell. It consists of 24 icosahedra
|
||||
and 120 tetrahedra, and is constructed by removing one of the
|
||||
five inscribed 24-cells from a 600-cell.`
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
@ -695,7 +732,7 @@ export const dodecahedron = () => {
|
|||
}
|
||||
|
||||
return {
|
||||
name: 'dodecahedron',
|
||||
name: 'Dodecahedron',
|
||||
nodes: nodes,
|
||||
links: links,
|
||||
geometry: {
|
||||
|
@ -706,7 +743,12 @@ export const dodecahedron = () => {
|
|||
{ name: "none", links: [ 0 ]},
|
||||
{ name: "one tetrahedron", links: [ 0, 1 ] },
|
||||
{ name: "five tetrahedra", links: [ 0, 1, 2, 3, 4, 5 ] }
|
||||
]
|
||||
],
|
||||
description: `The dodecahedron is a three-dimensional polyhedron
|
||||
which is included here so that you can see the partition of its
|
||||
vertices into five interlocked tetrahedra. This structure is the
|
||||
basis for the partition of the 120-cell's vertices into five
|
||||
600-cells.`
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue