bombinans/fourdjs
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects Releases Wiki Activity

feature-tapered-links-2 #22

Merged
bombinans merged 13 commits from feature-tapered-links-2 into main 2025-11-16 04:34:22 +00:00
Conversation 0 Commits 13 Files Changed 8 +85 -48
5 changed files with 85 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9bc23fdeeb - Show all commits

12
CHANGELOG.md Normal file
View 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.
`

46
fourDShape.js
View File

@ -29,11 +29,11 @@ class FourDShape extends THREE.Group {
// if a node/link has no label, use the 0th material // if a node/link has no label, use the 0th material
getMaterial(entity, materials) { getMaterialLabel(entity) {
if( "label" in entity ) { if( "label" in entity ) {
return materials[entity.label]; return entity.label
} else { } else {
return materials[0]; return 0;
} }
} }
@ -45,25 +45,15 @@ class FourDShape extends THREE.Group {
return sphere; return sphere;
} }
makeLink(basematerial, link) { makeLink(materialLabel, link) {
const n1 = this.nodes3[link.source]; const n1 = this.nodes3[link.source];
const n2 = this.nodes3[link.target]; const n2 = this.nodes3[link.target];
const s1 = this.link_scale * n1.scale; const s1 = this.link_scale * n1.scale;
const s2 = this.link_scale * n2.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 ); this.add( edge );
return 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) { updateLink(link, links_show) {
@ -72,13 +62,6 @@ class FourDShape extends THREE.Group {
const s1 = this.link_scale * n1.scale; const s1 = this.link_scale * n1.scale;
const s2 = this.link_scale * n2.scale; const s2 = this.link_scale * n2.scale;
link.object.update(n1, n2, s1, s2); 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); 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) { fourDscale(w) {
return this.hyperplane / ( this.hyperplane + w ); return this.hyperplane / ( this.hyperplane + w );
} }
@ -138,7 +112,7 @@ class FourDShape extends THREE.Group {
for( const n of this.nodes4 ) { for( const n of this.nodes4 ) {
const k = this.fourDscale(n.w); const k = this.fourDscale(n.w);
const v3 = new THREE.Vector3(n.x * k, n.y * k, n.z * k); 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] = { this.nodes3[n.id] = {
v3: v3, v3: v3,
scale: k, scale: k,
@ -147,11 +121,11 @@ class FourDShape extends THREE.Group {
}; };
} }
for( const l of this.links ) { for( const l of this.links ) {
const material = this.getMaterial(l, this.link_ms); const mLabel = this.getMaterialLabel(l);
l.object = this.makeLink(material, l); l.object = this.makeLink(mLabel, l);
} }
for( const f of this.faces ) { 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); f.object = this.makeFace(material, f);
} }
} }

16
index.html
View File

@ -14,6 +14,17 @@
font-family: sans-serif; font-family: sans-serif;
padding: 1em; 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 { div#info {
position: fixed; position: fixed;
bottom:0; bottom:0;
@ -26,7 +37,10 @@
<body> <body>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
<div id="description"></div> <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> <a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
</body> </body>
</html> </html>

36
main.js
View File

@ -1,5 +1,16 @@
import * as THREE from 'three'; 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'; import * as POLYTOPES from './polytopes.js';
@ -102,7 +113,6 @@ function displayDocs(name) {
} }
function showDocs(visible) { function showDocs(visible) {
console.log(`showDocs ${visible}`);
const docdiv = document.getElementById("description"); const docdiv = document.getElementById("description");
if( visible ) { if( visible ) {
docdiv.style.display = ''; docdiv.style.display = '';
@ -111,6 +121,25 @@ 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 // 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,
@ -122,7 +151,10 @@ function setColors(c) {
node_ms[i].color = new THREE.Color(nc[i]); node_ms[i].color = new THREE.Color(nc[i]);
link_ms[i].color = new THREE.Color(nc[i]); link_ms[i].color = new THREE.Color(nc[i]);
} }
//material.color = new THREE.Color(c); if( shape ) {
// taperedLink.set_color updates according to the link index
shape.links.map((l) => l.object.set_color(nc));
}
} }
function setBackground(c) { function setBackground(c) {

7
taperedLink.js
View File

@ -4,10 +4,11 @@ const EPSILON = 0.001;
class TaperedLink extends THREE.Group { class TaperedLink extends THREE.Group {
constructor(baseMaterial, n1, n2, r1, r2) { constructor(baseMaterial, color_i, n1, n2, r1, r2) {
super(); super();
const geometry = new THREE.ConeGeometry( 1, 1, 16, true ); const geometry = new THREE.ConeGeometry( 1, 1, 16, true );
const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5); const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
this.color_i = color_i;
this.material = baseMaterial.clone(); this.material = baseMaterial.clone();
this.material.clippingPlanes = [ cplane ]; this.material.clippingPlanes = [ cplane ];
this.object = new THREE.Mesh( geometry, this.material ); 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]);
}
} }