Compare commits
No commits in common. "main" and "broken-cursed-links" have entirely different histories.
main
...
broken-cur
12
CHANGELOG.md
12
CHANGELOG.md
@ -1,12 +0,0 @@
|
||||
CHANGELOG
|
||||
=========
|
||||
|
||||
## v1.0 - 16/11/2025
|
||||
|
||||
It's been [two years](https://mikelynch.org/2023/Sep/02/120-cell/)</a> since
|
||||
I first made this, and I haven't updated it in a while, but I got tapered links to
|
||||
work without too much performance overhead, so that seemed worth a version.
|
||||
|
||||
The results flicker a bit at low opacities but otherwise I'm pretty happy with
|
||||
it.
|
||||
`
|
||||
@ -1,11 +1,8 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
import { TaperedLink } from './taperedLink.js';
|
||||
|
||||
|
||||
const HYPERPLANE = 2.0;
|
||||
const W_FORESHORTENING = 0.04;
|
||||
|
||||
const W_FORESHORTENING = 0.4;
|
||||
|
||||
class FourDShape extends THREE.Group {
|
||||
|
||||
@ -29,12 +26,12 @@ class FourDShape extends THREE.Group {
|
||||
|
||||
// if a node/link has no label, use the 0th material
|
||||
|
||||
getMaterialLabel(entity) {
|
||||
if( "label" in entity ) {
|
||||
return entity.label
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
getMaterial(entity, materials) {
|
||||
if( "label" in entity ) {
|
||||
return materials[entity.label];
|
||||
} else {
|
||||
return materials[0];
|
||||
}
|
||||
}
|
||||
|
||||
makeNode(material, v3, scale) {
|
||||
@ -45,26 +42,64 @@ class FourDShape extends THREE.Group {
|
||||
return sphere;
|
||||
}
|
||||
|
||||
makeLink(materialLabel, link) {
|
||||
makeLink(material, link) {
|
||||
const n1 = this.nodes3[link.source];
|
||||
const n2 = this.nodes3[link.target];
|
||||
const s1 = this.link_scale * n1.scale;
|
||||
const s2 = this.link_scale * n2.scale;
|
||||
const basematerial = this.link_ms[materialLabel];
|
||||
const edge = new TaperedLink(basematerial, materialLabel, n1, n2, s1, s2);
|
||||
this.add( edge );
|
||||
const s1 = n1.scale;
|
||||
const s2 = n2.scale;
|
||||
const length = n1.v3.distanceTo(n2.v3);
|
||||
const centre = new THREE.Vector3();
|
||||
centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
||||
const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
|
||||
const cyl = new THREE.Mesh(geometry, material);
|
||||
const edge = new THREE.Group();
|
||||
edge.add(cyl);
|
||||
edge.position.copy(centre);
|
||||
edge.scale.copy(new THREE.Vector3(1, 1, length));
|
||||
edge.lookAt(n2.v3);
|
||||
cyl.rotation.x = Math.PI / 2.0;
|
||||
this.add(edge);
|
||||
return edge;
|
||||
}
|
||||
|
||||
updateLink(link, links_show) {
|
||||
const n1 = this.nodes3[link.source];
|
||||
const n2 = this.nodes3[link.target];
|
||||
const s1 = this.link_scale * n1.scale;
|
||||
const s2 = this.link_scale * n2.scale;
|
||||
link.object.update(n1, n2, s1, s2);
|
||||
const s1 = n1.scale;
|
||||
const s2 = n2.scale;
|
||||
const length = n1.v3.distanceTo(n2.v3);
|
||||
const centre = new THREE.Vector3();
|
||||
centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
||||
// is this really the only way to do this?
|
||||
//const geometry = new THREE.CylinderGeometry(this.link_scale * s2, this.link_scale * s1, 1);
|
||||
//link.object.children[0].geometry.dispose();
|
||||
this.forshortenLink(link.object.children[0].geometry, this.link_scale * s2, this.link_scale * s1);
|
||||
//const link_hack = this.link_scale * (s1 + s2) * 0.5;
|
||||
link.object.scale.copy(new THREE.Vector3(1, 1, length));
|
||||
link.object.position.copy(centre);
|
||||
link.object.lookAt(n2.v3);
|
||||
link.object.children[0].rotation.x = Math.PI / 2.0;
|
||||
// link.object.children[0].geometry.needsUpdate = true;
|
||||
// link.object.children[0].geometry.computeVertexNormals();
|
||||
link.object.visible = (!links_show || link.label in links_show);
|
||||
}
|
||||
|
||||
forshortenLink(geometry, top, bottom) {
|
||||
const count = geometry.attributes.position.count;
|
||||
for( let i = 0; i < count; i++ ) {
|
||||
const x = geometry.attributes.position.getX(i);
|
||||
const y = geometry.attributes.position.getY(i);
|
||||
const z = geometry.attributes.position.getZ(i);
|
||||
if( z == 0 ) {
|
||||
geometry.attributes.position.setX(i, x * top);
|
||||
geometry.attributes.position.setY(i, y * top);
|
||||
} else {
|
||||
geometry.attributes.position.setX(i, x * bottom);
|
||||
geometry.attributes.position.setY(i, y * bottom);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setFaceGeometry(face, geometry) {
|
||||
const values = [];
|
||||
@ -91,6 +126,15 @@ class FourDShape extends THREE.Group {
|
||||
}
|
||||
|
||||
|
||||
fourDtoV3_old(x, y, z, w, rotations) {
|
||||
const v4 = new THREE.Vector4(x, y, z, w);
|
||||
for ( const m4 of rotations ) {
|
||||
v4.applyMatrix4(m4);
|
||||
}
|
||||
const k = this.fourDscale(v4.w);
|
||||
return new THREE.Vector3(v4.x * k, v4.y * k, v4.z * k);
|
||||
}
|
||||
|
||||
fourDscale(w) {
|
||||
return this.hyperplane / ( this.hyperplane + w );
|
||||
}
|
||||
@ -112,7 +156,7 @@ class FourDShape extends THREE.Group {
|
||||
for( const n of this.nodes4 ) {
|
||||
const k = this.fourDscale(n.w);
|
||||
const v3 = new THREE.Vector3(n.x * k, n.y * k, n.z * k);
|
||||
const material = this.node_ms[this.getMaterialLabel(n)];
|
||||
const material = this.getMaterial(n, this.node_ms);
|
||||
this.nodes3[n.id] = {
|
||||
v3: v3,
|
||||
scale: k,
|
||||
@ -121,11 +165,11 @@ class FourDShape extends THREE.Group {
|
||||
};
|
||||
}
|
||||
for( const l of this.links ) {
|
||||
const mLabel = this.getMaterialLabel(l);
|
||||
l.object = this.makeLink(mLabel, l);
|
||||
const material = this.getMaterial(l, this.link_ms);
|
||||
l.object = this.makeLink(material, l);
|
||||
}
|
||||
for( const f of this.faces ) {
|
||||
const material = this.face_ms(this.getMaterialLabel(f));
|
||||
const material = this.getMaterial(f, this.face_ms);
|
||||
f.object = this.makeFace(material, f);
|
||||
}
|
||||
}
|
||||
|
||||
40
gui.js
40
gui.js
@ -2,10 +2,10 @@ import { GUI } from 'lil-gui';
|
||||
|
||||
|
||||
const DEFAULTS = {
|
||||
nodesize: 0.6,
|
||||
nodeopacity: 1,
|
||||
linksize: 1.0,
|
||||
linkopacity: 0.75,
|
||||
thickness: 0.02,
|
||||
nodesize: 0.02,
|
||||
linkopacity: 0.5,
|
||||
link2opacity: 0.5,
|
||||
shape: '120-cell',
|
||||
option: 'none',
|
||||
visibility: 5,
|
||||
@ -18,8 +18,6 @@ const DEFAULTS = {
|
||||
xRotate: 'YW',
|
||||
yRotate: 'XW',
|
||||
dtheta: 0,
|
||||
damping: false,
|
||||
captions: true,
|
||||
dpsi: 0,
|
||||
}
|
||||
|
||||
@ -27,7 +25,7 @@ const DEFAULTS = {
|
||||
|
||||
class FourDGUI {
|
||||
|
||||
constructor(shapes, changeShape, setColor, setBackground, setNodeOpacity,setLinkOpacity, setVisibility, showDocs) {
|
||||
constructor(shapes, changeShape, setColor, setBackground, setLinkOpacity, setVisibility) {
|
||||
this.gui = new GUI();
|
||||
const SHAPE_NAMES = shapes.map((s) => s.name);
|
||||
|
||||
@ -38,10 +36,10 @@ class FourDGUI {
|
||||
option: this.link['option'],
|
||||
inscribed: this.link['inscribed'],
|
||||
inscribe_all: this.link['inscribe_all'],
|
||||
linksize: this.link['linksize'],
|
||||
thickness: this.link['thickness'],
|
||||
linkopacity: this.link['linkopacity'],
|
||||
link2opacity: this.link['linkopacity'],
|
||||
nodesize: this.link['nodesize'],
|
||||
nodeopacity: this.link['nodeopacity'],
|
||||
depth: this.link['depth'],
|
||||
color: this.link['color'],
|
||||
background: this.link['background'],
|
||||
@ -50,7 +48,6 @@ class FourDGUI {
|
||||
xRotate: this.link['xRotate'],
|
||||
yRotate: this.link['yRotate'],
|
||||
damping: false,
|
||||
captions: true,
|
||||
dtheta: this.link['dtheta'],
|
||||
dpsi: this.link['dpsi'],
|
||||
"copy link": function () { guiObj.copyUrl() }
|
||||
@ -70,15 +67,18 @@ class FourDGUI {
|
||||
});
|
||||
this.gui.add(this.params, 'hyperplane', 0.5, 1 / 0.8);
|
||||
this.gui.add(this.params, 'zoom', 0.1, 2.0);
|
||||
this.gui.add(this.params, 'nodesize', 0, 1.5);
|
||||
this.gui.add(this.params, 'nodeopacity', 0, 1).onChange(setNodeOpacity);
|
||||
this.gui.add(this.params, 'linksize', 0, 2);
|
||||
this.gui.add(this.params, 'linkopacity', 0, 1).onChange(setLinkOpacity);
|
||||
this.gui.add(this.params, 'thickness', 0, 0.1);
|
||||
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, 0.1);
|
||||
this.gui.addColor(this.params, 'color').onChange(setColor);
|
||||
this.gui.addColor(this.params, 'background').onChange(setBackground);
|
||||
this.gui.add(this.params, 'xRotate', [ 'YW', 'YZ', 'ZW' ]);
|
||||
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, 'copy link');
|
||||
|
||||
@ -134,10 +134,10 @@ class FourDGUI {
|
||||
}
|
||||
this.link['hyperplane'] = this.numParam('hyperplane', 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['link2opacity'] = this.numParam('link2opacity', 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['background'] = this.numParam('background', (s) => guiObj.stringToHex(s));
|
||||
this.link['dpsi'] = this.numParam('dpsi', parseFloat);
|
||||
@ -151,10 +151,10 @@ class FourDGUI {
|
||||
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("linksize", this.params.linksize.toString());
|
||||
url.searchParams.append("thickness", this.params.thickness.toString());
|
||||
url.searchParams.append("nodesize", this.params.nodesize.toString());
|
||||
url.searchParams.append("nodeopacity", this.params.nodesize.toString());
|
||||
url.searchParams.append("linkopacity", this.params.nodeopacity.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("background", this.hexToString(this.params.background));
|
||||
url.searchParams.append("hyperplane", this.params.hyperplane.toString());
|
||||
|
||||
16
index.html
16
index.html
@ -14,15 +14,6 @@
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
}
|
||||
div#release_notes {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20%;
|
||||
z-index: 2;
|
||||
padding: 1em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
div#info {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
@ -35,10 +26,7 @@
|
||||
<body>
|
||||
<script type="module" src="/main.js"></script>
|
||||
<div id="description"></div>
|
||||
<div id="release_notes"></div>
|
||||
<div id="info"><a href="#" id="show_notes">release 1.0</a> |
|
||||
|
||||
by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> |
|
||||
<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>
|
||||
</html>
|
||||
</html>
|
||||
119
linktest.js
119
linktest.js
@ -1,119 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { GUI } from 'lil-gui';
|
||||
|
||||
import { TaperedLink } from './taperedLink.js';
|
||||
|
||||
const FACE_OPACITY = 0.3;
|
||||
const CAMERA_K = 5;
|
||||
|
||||
// scene, lights and camera
|
||||
|
||||
|
||||
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
||||
const light = new THREE.PointLight(0xffffff, 2);
|
||||
light.position.set(10, 10, 10);
|
||||
scene.add(light);
|
||||
const light2 = new THREE.PointLight(0xffffff, 2);
|
||||
light2.position.set(-10, 5, 10);
|
||||
scene.add(light);
|
||||
const amblight = new THREE.AmbientLight(0xffffff, 0.5);
|
||||
scene.add(amblight);
|
||||
|
||||
camera.position.set(0, 0, CAMERA_K / 2);
|
||||
|
||||
camera.lookAt(0, 0, 0);
|
||||
camera.position.z = 8;
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({antialias: true});
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
renderer.localClippingEnabled = true;
|
||||
|
||||
const controls = new OrbitControls( camera, renderer.domElement );
|
||||
|
||||
|
||||
controls.autoRotate = true;
|
||||
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
const NODEC = 0x3293a9;
|
||||
const LINKC = 0x00ff88;
|
||||
const BACKGROUNDC = 0xd4d4d4;
|
||||
|
||||
scene.background = new THREE.Color(BACKGROUNDC);
|
||||
const material = new THREE.MeshStandardMaterial({ color: LINKC });
|
||||
|
||||
material.transparent = true;
|
||||
material.opacity = 0.7;
|
||||
|
||||
const node_mat = new THREE.MeshStandardMaterial({ color: NODEC });
|
||||
|
||||
node_mat.transparent = true;
|
||||
node_mat.opacity = 0.5;
|
||||
|
||||
const params = {
|
||||
r1: 0.5,
|
||||
r2: 0.6,
|
||||
sync: false,
|
||||
l: 9,
|
||||
rotx: 1,
|
||||
roty: 0,
|
||||
rotz: 0,
|
||||
};
|
||||
|
||||
const gui = new GUI();
|
||||
|
||||
gui.add(params, "r1", 0.01, 1.5);
|
||||
gui.add(params, "r2", 0.01, 1.5);
|
||||
gui.add(params, "sync");
|
||||
gui.add(params, "l", 0, 10);
|
||||
gui.add(params, "rotx", 0, 4);
|
||||
gui.add(params, "roty", 0, 4);
|
||||
gui.add(params, "rotz", 0, 4);
|
||||
|
||||
function makeNode(material, pos, r) {
|
||||
const geometry = new THREE.SphereGeometry(1);
|
||||
const sphere = new THREE.Mesh(geometry, material);
|
||||
const node = {
|
||||
v3: pos,
|
||||
object: sphere
|
||||
};
|
||||
updateNode(node, pos, r);
|
||||
return node;
|
||||
}
|
||||
|
||||
function updateNode(node, pos, r) {
|
||||
node.v3 = pos;
|
||||
node.object.scale.copy(new THREE.Vector3(r, r, r));
|
||||
node.object.position.copy(pos);
|
||||
}
|
||||
|
||||
|
||||
const n1 = makeNode(node_mat, new THREE.Vector3(-params["l"], -1, -1), params["r1"]);
|
||||
const n2 = makeNode(node_mat, new THREE.Vector3(params["l"], 1, 1), params["r2"]);
|
||||
|
||||
const tl = new TaperedLink(material, n1, n2, params["r1"], params["r2"]);
|
||||
|
||||
scene.add(n1.object);
|
||||
scene.add(n2.object);
|
||||
|
||||
scene.add(tl);
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
const r1 = params["r1"];
|
||||
const r2 = params["sync"] ? r1 : params["r2"]
|
||||
|
||||
updateNode(n1, new THREE.Vector3(- params["l"], -1, -1), r1);
|
||||
updateNode(n2, new THREE.Vector3(params["l"], 1, 1), r2);
|
||||
tl.update(n1, n2, r1, r2, params["rotx"], params["roty"], params["rotz"]);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
animate();
|
||||
104
main.js
104
main.js
@ -1,16 +1,5 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
const RELEASE_NOTES = `
|
||||
<p><b>v1.0 - 16/11/2025</b></p>
|
||||
|
||||
<p>It's been <a target="_blank" href="https://mikelynch.org/2023/Sep/02/120-cell/">two years</a> since
|
||||
I first made this, and I haven't updated it in a while, but I got tapered links to
|
||||
work without too much performance overhead, so that seemed worth a version.</p>
|
||||
|
||||
<p>The results flicker a bit at low opacities but otherwise I'm pretty happy with
|
||||
it.</p>
|
||||
`;
|
||||
|
||||
|
||||
|
||||
import * as POLYTOPES from './polytopes.js';
|
||||
@ -42,36 +31,30 @@ camera.lookAt(0, 0, 0);
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({antialias: true});
|
||||
renderer.setSize( window.innerWidth, window.innerHeight );
|
||||
|
||||
renderer.localClippingEnabled = true;
|
||||
|
||||
|
||||
document.body.appendChild( renderer.domElement );
|
||||
|
||||
// set up colours and materials for gui callbacks
|
||||
|
||||
scene.background = new THREE.Color(DEFAULTS.background);
|
||||
const material = new THREE.MeshStandardMaterial({ color: DEFAULTS.color });
|
||||
const node_colours = get_colours(DEFAULTS.color);
|
||||
|
||||
|
||||
material.transparent = true;
|
||||
material.opacity = 0.5;
|
||||
|
||||
|
||||
const node_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) => {
|
||||
m.transparent = true;
|
||||
m.opacity = 0.5;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
)
|
||||
|
||||
const face_ms = [
|
||||
new THREE.MeshStandardMaterial( { color: 0x44ff44 } )
|
||||
new THREE.MeshLambertMaterial( { color: 0x44ff44 } )
|
||||
];
|
||||
|
||||
for( const face_m of face_ms ) {
|
||||
@ -112,71 +95,36 @@ function displayDocs(name) {
|
||||
}
|
||||
}
|
||||
|
||||
function showDocs(visible) {
|
||||
const docdiv = document.getElementById("description");
|
||||
if( visible ) {
|
||||
docdiv.style.display = '';
|
||||
} else {
|
||||
docdiv.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function releaseNotes() {
|
||||
showDocs(false);
|
||||
const reldiv = document.getElementById("release_notes");
|
||||
reldiv.style.display = '';
|
||||
reldiv.innerHTML = RELEASE_NOTES + '<p><a id="no_notes" href="#">[hide]</a>';
|
||||
const goaway = document.getElementById("no_notes");
|
||||
goaway.addEventListener('click', noNotes);
|
||||
}
|
||||
|
||||
function noNotes() {
|
||||
const reldiv = document.getElementById("release_notes");
|
||||
reldiv.style.display = 'none';
|
||||
}
|
||||
|
||||
const relnotes = document.getElementById('show_notes');
|
||||
|
||||
relnotes.addEventListener('click', releaseNotes);
|
||||
|
||||
|
||||
// initialise gui and read params from URL
|
||||
|
||||
// callbacks to do things which are triggered by controls: reset the shape,
|
||||
// change the colors. Otherwise we just read stuff from gui.params.
|
||||
|
||||
function setColors(c) {
|
||||
const nc = get_colours(c);
|
||||
for( let i = 0; i < node_ms.length; i++ ) {
|
||||
node_ms[i].color = new THREE.Color(nc[i]);
|
||||
link_ms[i].color = new THREE.Color(nc[i]);
|
||||
}
|
||||
if( shape ) {
|
||||
// taperedLink.set_color updates according to the link index
|
||||
shape.links.map((l) => l.object.set_color(nc));
|
||||
}
|
||||
const nc = get_colours(c);
|
||||
for( let i = 0; i < node_ms.length; i++ ) {
|
||||
node_ms[i].color = new THREE.Color(nc[i]);
|
||||
link_ms[i].color = new THREE.Color(nc[i]);
|
||||
}
|
||||
material.color = new THREE.Color(c);
|
||||
}
|
||||
|
||||
function setBackground(c) {
|
||||
scene.background = new THREE.Color(c)
|
||||
}
|
||||
|
||||
// taperedLinks have their own materials so we have to set opacity
|
||||
// on them individually. And also set the base materials as they
|
||||
// will get updated from it when the shape changes
|
||||
|
||||
function setLinkOpacity(o, primary) {
|
||||
link_ms.map((lm) => lm.opacity = o);
|
||||
if( shape ) {
|
||||
shape.links.map((l) => l.object.material.opacity = o);
|
||||
}
|
||||
if( structure.nolink2opacity ) {
|
||||
link_ms.map((lm) => lm.opacity = o);
|
||||
} else {
|
||||
if( primary ) {
|
||||
link_ms[0].opacity = o;
|
||||
} else {
|
||||
link_ms.slice(1).map((lm) => lm.opacity = o);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setNodeOpacity(o) {
|
||||
node_ms.map((nm) => nm.opacity = o);
|
||||
}
|
||||
|
||||
|
||||
let gui;
|
||||
|
||||
|
||||
@ -201,10 +149,8 @@ gui = new FourDGUI(
|
||||
changeShape,
|
||||
setColors,
|
||||
setBackground,
|
||||
setNodeOpacity,
|
||||
setLinkOpacity,
|
||||
setVisibility,
|
||||
showDocs
|
||||
setVisibility
|
||||
);
|
||||
|
||||
// these are here to pick up colour settings from the URL params
|
||||
@ -270,8 +216,8 @@ function animate() {
|
||||
shape.hyperplane = 1 / 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.link_scale = gui.params.linksize * gui.params.nodesize * 0.5;
|
||||
shape.render3(rotations, node_show, link_show);
|
||||
|
||||
|
||||
|
||||
23
polytopes.js
23
polytopes.js
@ -55,28 +55,8 @@ export function auto_detect_edges(nodes, neighbours, debug=false) {
|
||||
return links;
|
||||
}
|
||||
|
||||
|
||||
export const linkTest = () => {
|
||||
return {
|
||||
name: 'linky',
|
||||
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 },
|
||||
],
|
||||
links: [
|
||||
{ id: 1, source: 1, target: 2 }
|
||||
],
|
||||
options: [ { name: '--' }],
|
||||
description: `link`,
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// too small and simple to calculate
|
||||
|
||||
|
||||
|
||||
export const cell5 = () => {
|
||||
const c1 = Math.sqrt(5) / 4;
|
||||
return {
|
||||
@ -864,7 +844,6 @@ export const icosahedron = () => {
|
||||
|
||||
export const build_all = () => {
|
||||
return [
|
||||
linkTest(),
|
||||
tetrahedron(),
|
||||
octahedron(),
|
||||
cube(),
|
||||
@ -884,4 +863,4 @@ export const build_all = () => {
|
||||
|
||||
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))
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
|
||||
const EPSILON = 0.001;
|
||||
|
||||
class TaperedLink extends THREE.Group {
|
||||
|
||||
constructor(baseMaterial, color_i, n1, n2, r1, r2) {
|
||||
super();
|
||||
const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
|
||||
const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
|
||||
this.color_i = color_i;
|
||||
this.material = baseMaterial.clone();
|
||||
this.material.clippingPlanes = [ cplane ];
|
||||
this.object = new THREE.Mesh( geometry, this.material );
|
||||
this.add( this.object );
|
||||
this.update(n1, n2, r1, r2);
|
||||
}
|
||||
|
||||
update(n1, n2, r1, r2) {
|
||||
const kraw = r1 - r2;
|
||||
let k = ( Math.abs(kraw) < EPSILON ) ? EPSILON : kraw;
|
||||
let nbase = n1.v3;
|
||||
let napex = n2.v3;
|
||||
let rbase = r1;
|
||||
let rapex = r2;
|
||||
if( k < 0 ) {
|
||||
nbase = n2.v3;
|
||||
napex = n1.v3;
|
||||
rbase = r2;
|
||||
rapex = r1;
|
||||
k = -k;
|
||||
}
|
||||
|
||||
const l = nbase.distanceTo(napex);
|
||||
const lapex = l * rapex / k;
|
||||
const h = l + lapex;
|
||||
this.scale.copy(new THREE.Vector3(rbase, rbase, h));
|
||||
const h_offset = 0.5 * h / l;
|
||||
const pos = new THREE.Vector3();
|
||||
pos.lerpVectors(nbase, napex, h_offset);
|
||||
|
||||
this.position.copy(pos); // the group, not the cone!!
|
||||
|
||||
this.lookAt(nbase);
|
||||
this.children[0].rotation.x = 3 * Math.PI / 2.0;
|
||||
this.visible = true;
|
||||
const clipnorm = new THREE.Vector3();
|
||||
clipnorm.copy(napex);
|
||||
clipnorm.sub(nbase);
|
||||
clipnorm.negate();
|
||||
clipnorm.normalize();
|
||||
this.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
|
||||
clipnorm, napex
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
set_color(colors) {
|
||||
this.material.color = new THREE.Color(colors[this.color_i]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export { TaperedLink };
|
||||
Loading…
x
Reference in New Issue
Block a user