Sorted out a few more interface niggles and added release notes to the interface
This commit is contained in:
Mike Lynch
parent
6019237e31
commit
9bc23fdeeb
12
CHANGELOG.md
Normal file
12
CHANGELOG.md
Normal file
@ -0,0 +1,12 @@
|
||||
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.
|
||||
`
|
||||
@ -29,12 +29,12 @@ class FourDShape extends THREE.Group {
|
||||
|
||||
// if a node/link has no label, use the 0th material
|
||||
|
||||
getMaterial(entity, materials) {
|
||||
if( "label" in entity ) {
|
||||
return materials[entity.label];
|
||||
} else {
|
||||
return materials[0];
|
||||
}
|
||||
getMaterialLabel(entity) {
|
||||
if( "label" in entity ) {
|
||||
return entity.label
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
makeNode(material, v3, scale) {
|
||||
@ -45,25 +45,15 @@ class FourDShape extends THREE.Group {
|
||||
return sphere;
|
||||
}
|
||||
|
||||
makeLink(basematerial, link) {
|
||||
makeLink(materialLabel, 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 edge = new TaperedLink(basematerial, n1, n2, s1, s2);
|
||||
const basematerial = this.link_ms[materialLabel];
|
||||
const edge = new TaperedLink(basematerial, materialLabel, n1, n2, s1, s2);
|
||||
this.add( edge );
|
||||
return edge;
|
||||
// const length = n1.v3.distanceTo(n2.v3);
|
||||
// const centre = nfew THREE.Vector3();
|
||||
// centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
||||
|
||||
// const edge = new TaperedLink(basematerial);
|
||||
// edge.update(s1, s2, length);
|
||||
// edge.position.copy(centre);
|
||||
// edge.lookAt(n2.v3);
|
||||
// edge.children[0].rotation.x = Math.PI / 2.0;
|
||||
// this.add(edge);
|
||||
// return edge;
|
||||
}
|
||||
|
||||
updateLink(link, links_show) {
|
||||
@ -72,13 +62,6 @@ class FourDShape extends THREE.Group {
|
||||
const s1 = this.link_scale * n1.scale;
|
||||
const s2 = this.link_scale * n2.scale;
|
||||
link.object.update(n1, n2, s1, s2);
|
||||
// const length = n1.v3.distanceTo(n2.v3);
|
||||
// const centre = new THREE.Vector3();
|
||||
// centre.lerpVectors(n1.v3, n2.v3, 0.5);
|
||||
// link.object.update(s1, s2, length);
|
||||
// link.object.position.copy(n1.v3);
|
||||
// link.object.lookAt(n2.v3);
|
||||
// link.object.children[0].rotation.x = Math.PI / 2.0;
|
||||
link.object.visible = (!links_show || link.label in links_show);
|
||||
}
|
||||
|
||||
@ -108,15 +91,6 @@ 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 );
|
||||
}
|
||||
@ -138,7 +112,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.getMaterial(n, this.node_ms);
|
||||
const material = this.node_ms[this.getMaterialLabel(n)];
|
||||
this.nodes3[n.id] = {
|
||||
v3: v3,
|
||||
scale: k,
|
||||
@ -147,11 +121,11 @@ class FourDShape extends THREE.Group {
|
||||
};
|
||||
}
|
||||
for( const l of this.links ) {
|
||||
const material = this.getMaterial(l, this.link_ms);
|
||||
l.object = this.makeLink(material, l);
|
||||
const mLabel = this.getMaterialLabel(l);
|
||||
l.object = this.makeLink(mLabel, l);
|
||||
}
|
||||
for( const f of this.faces ) {
|
||||
const material = this.getMaterial(f, this.face_ms);
|
||||
const material = this.face_ms(this.getMaterialLabel(f));
|
||||
f.object = this.makeFace(material, f);
|
||||
}
|
||||
}
|
||||
|
||||
16
index.html
16
index.html
@ -14,6 +14,17 @@
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
}
|
||||
div#release_notes {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
font-family: sans-serif;
|
||||
padding: 1em;
|
||||
visibility: none;
|
||||
background: #ffffff;
|
||||
}
|
||||
div#info {
|
||||
position: fixed;
|
||||
bottom:0;
|
||||
@ -26,7 +37,10 @@
|
||||
<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> -
|
||||
<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> |
|
||||
<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
46
main.js
46
main.js
@ -1,5 +1,16 @@
|
||||
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';
|
||||
@ -102,7 +113,6 @@ function displayDocs(name) {
|
||||
}
|
||||
|
||||
function showDocs(visible) {
|
||||
console.log(`showDocs ${visible}`);
|
||||
const docdiv = document.getElementById("description");
|
||||
if( visible ) {
|
||||
docdiv.style.display = '';
|
||||
@ -111,18 +121,40 @@ function showDocs(visible) {
|
||||
}
|
||||
}
|
||||
|
||||
function releaseNotes() {
|
||||
showDocs(false);
|
||||
const docdiv = document.getElementById("release_notes");
|
||||
docdiv.style.display = '';
|
||||
docdiv.innerHTML = RELEASE_NOTES + '<p><a id="no_notes" href="#">[hide]</a>';
|
||||
const goaway = document.getElementById("no_notes");
|
||||
goaway.addEventListener('click', noNotes);
|
||||
}
|
||||
|
||||
function noNotes() {
|
||||
const docdiv = document.getElementById("release_notes");
|
||||
docdiv.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]);
|
||||
}
|
||||
//material.color = new THREE.Color(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));
|
||||
}
|
||||
}
|
||||
|
||||
function setBackground(c) {
|
||||
|
||||
@ -4,10 +4,11 @@ const EPSILON = 0.001;
|
||||
|
||||
class TaperedLink extends THREE.Group {
|
||||
|
||||
constructor(baseMaterial, n1, n2, r1, r2) {
|
||||
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 );
|
||||
@ -55,6 +56,10 @@ class TaperedLink extends THREE.Group {
|
||||
|
||||
}
|
||||
|
||||
set_color(colors) {
|
||||
this.material.color = new THREE.Color(colors[this.color_i]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user