Added a testbed version of main to fiddle with tapered links

Not working but it looks good
Weirdness - the glitchiness is coming and going depending on whether
2025-11-15 14:43:51 +11:00 · 2025-11-09 17:41:37 +11:00 · 2025-11-09 11:20:16 +11:00 · 2025-11-09 08:43:04 +11:00
5 changed files with 131 additions and 20 deletions
--- a/gui.js
+++ b/gui.js
@ -2,12 +2,12 @@ import { GUI } from 'lil-gui';


 const DEFAULTS = {
-	nodesize: 4,
+	nodesize: 1,
 	nodeopacity: 1,
 	linksize: 1.0,
-	linkopacity: 0.75,
+	linkopacity: 1,
 	link2opacity: 0.75,
-	shape: 'linky',
+	shape: '5-cell',
 	option: 'none',
 	visibility: 5,
 	inscribed: false,
--- a/index.html
+++ b/index.html
@ -24,7 +24,7 @@
 		</style>
 	</head>
 	<body>
-		<script type="module" src="/main.js"></script>
+		<script type="module" src="/linktest.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>
--- a/linktest.js
+++ b/linktest.js
@ -0,0 +1,88 @@
+import * as THREE from 'three';
+
+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 = 4;
+
+const renderer = new THREE.WebGLRenderer({antialias: true});
+renderer.setSize( window.innerWidth, window.innerHeight );
+
+renderer.localClippingEnabled = true;
+
+
+document.body.appendChild( renderer.domElement );
+
+const NODEC = 0x3293a9;
+const BACKGROUNDC = 0xd4d4d4;
+	
+scene.background = new THREE.Color(BACKGROUNDC);
+const material = new THREE.MeshStandardMaterial({ color: NODEC });
+
+
+const params = {
+    r1: 0.5,
+    r2: 0.6,
+    l: 3,
+};
+
+const gui = new GUI();
+
+gui.add(params, "r1", 0.01, 1.5);
+gui.add(params, "r2", 0.01, 1.5);
+gui.add(params, "l", 0, 4);
+
+function makeNode(material, pos, r) {
+    const geometry = new THREE.SphereGeometry(1);
+    const sphere = new THREE.Mesh(geometry, material);
+    updateNode(sphere, pos, r);
+    return sphere;
+}
+
+function updateNode(node, pos, r) {
+    node.scale.copy(new THREE.Vector3(r, r, r));
+    node.position.copy(pos);
+}
+    
+
+const n1 = makeNode(material, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
+const n2 = makeNode(material, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"])
+
+//const tl = new TaperedLink(
+
+scene.add(n1);
+scene.add(n2);
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
+    updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]);
+    renderer.render(scene, camera);
+}
+animate();
--- a/polytopes.js
+++ b/polytopes.js
@ -865,7 +865,7 @@ export const icosahedron = () => {
 export const build_all = () => {
 	return [
 	        linkTest(),
-/*		tetrahedron(),
+		tetrahedron(),
 		octahedron(),
 		cube(),
 		icosahedron(),
@ -879,7 +879,7 @@ export const build_all = () => {
 		cell600_layered(),
 	 	cell120_inscribed(),
 	 	cell120_layered()
-	*/ 	];
+	 	];
 }

 export const radii = (shape) => {
--- a/taperedLink.js
+++ b/taperedLink.js
@ -1,21 +1,31 @@
 import * as THREE from 'three';

-
+// really stupid idea: add a cylinder as well!

 class TaperedLink extends THREE.Group {

  constructor(baseMaterial, n1, n2, r1, r2) {
    super();
-    const geometry = new THREE.ConeGeometry( 0.75, 1, 32, true );
+    const cone = new THREE.ConeGeometry( 0.75, 1, 32, true );
    const cplane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0.5);
    const material = baseMaterial.clone();
    material.clippingPlanes = [ cplane ];
-    this.cone = new THREE.Mesh( geometry, material );
+    this.cone = new THREE.Mesh( cone, material );
    this.add( this.cone );
+    const cylinder = new THREE.CylinderGeometry(1, 1, 1, 16, 1, true);
+    const cyl_material = baseMaterial.clone();
+    cyl_material.color = new THREE.Color(0xff0000); 
+    this.cylinder = new THREE.Mesh(cylinder, cyl_material);
+    this.add( this.cylinder );
    this.update(n1, n2, r1, r2);
-  }  
+   }

-  update(n1, n2, r1, r2) {
+   update(n1, n2, r1, r2) {
+       this.update_cone(n1, n2, r1, r2);
+   }
+
+
+  update_cone(n1, n2, r1, r2) {
    const kraw = r1 - r2;
    let k = ( kraw == 0 ) ? 0.001 : kraw;
    let nbase = n1.v3;
@ -30,9 +40,6 @@ class TaperedLink extends THREE.Group {
      k = -k;
    }

-    // FIXME - the problem is that when the h_offset > 1, the centroid
-    // of the cone is on the other side of napex, so it looks the wrong way
-
    const l = nbase.distanceTo(napex);
    const h = l * rbase / k;
    const h_offset = 0.5 * h / l;
@ -40,15 +47,19 @@ class TaperedLink extends THREE.Group {
    if( l > 0 ) {
      pos.lerpVectors(nbase, napex, h_offset);
    }
+    const rmean = 0.5 * (r1 + r2);
    if( h_offset < 1 ) { 
      this.cone.scale.copy(new THREE.Vector3(rbase, h, rbase));
+      this.cylinder.scale.copy(new THREE.Vector3(rmean, l, rmean));
    } else {
      // you're on the other side of napex so flip the cone
      this.cone.scale.copy(new THREE.Vector3(rbase, -h, rbase));
+      this.cylinder.scale.copy(new THREE.Vector3(rmean, -l, rmean));
    }
-    this.lookAt(napex);
-    this.position.copy(pos);
+    this.lookAt(napex);      // the group, not the cone!!
+    this.position.copy(pos); // the group, not the cone!! 
    this.cone.rotation.x = Math.PI / 2.0;
+    this.cylinder.rotation.x = Math.PI / 2.0;
    const clipnorm = new THREE.Vector3();
    clipnorm.copy(napex);
    clipnorm.sub(nbase);
@ -56,9 +67,21 @@ class TaperedLink extends THREE.Group {
    clipnorm.normalize();
    this.cone.material.clippingPlanes[0].setFromNormalAndCoplanarPoint(
      clipnorm, napex
-      );
+    );
+
+    
  }

-}
+    update_cylinder_busted(n1, n2, r1, r2) {
+        const length = n1.v3.distanceTo(n2.v3);
+        const centre = new THREE.Vector3();
+        centre.lerpVectors(n1.v3, n2.v3, 0.5);
+        const link_mean = (r1 + r2) * 0.5;		
+        this.cylinder.scale.copy(new THREE.Vector3(link_mean, link_mean, length));
+        this.cylinder.position.copy(centre);
+        //this.cylinder.lookAt(n2.v3);
+        this.cylinder.rotation.x = Math.PI / 2.0;
    	
+    }
+}
 export { TaperedLink };
Author	SHA1	Message	Date
Mike Lynch	43c85d0084	Added a testbed version of main to fiddle with tapered links	2025-11-15 14:43:51 +11:00
Mike Lynch	6c875dbda8	Not working but it looks good	2025-11-09 17:41:37 +11:00
Mike Lynch	4695423931	Weirdness - the glitchiness is coming and going depending on whether the clipping plane is enabled, or the cylinders added?	2025-11-09 11:20:16 +11:00
Mike Lynch	bf55db9f75	Comment about really silly idea	2025-11-09 08:43:04 +11:00