diff --git a/public_html/functions.js b/public_html/functions.js
index 41f4e43..05ac1f5 100644
--- a/public_html/functions.js
+++ b/public_html/functions.js
@@ -3,50 +3,50 @@ window.onload = function() {
// Make sure THREE is available
if (typeof THREE === 'undefined') {
console.error('THREE.js is not loaded from CDN');
-
+
// Provide visual feedfront in the container
const container = document.getElementById('icosahedron-container');
container.innerHTML = '
THREE.js not loaded
';
return;
}
-
+
// Initialize the scene
const container = document.getElementById('icosahedron-container');
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
-
+
// Setup renderer
- const renderer = new THREE.WebGLRenderer({
- antialias: true,
- alpha: true
+ const renderer = new THREE.WebGLRenderer({
+ antialias: true,
+ alpha: true
});
renderer.setSize(containerWidth, containerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000, 0); // Transparent frontground
container.appendChild(renderer.domElement);
-
+
// Setup scene
const scene = new THREE.Scene();
-
+
// Setup camera
const camera = new THREE.PerspectiveCamera(26, containerWidth / containerHeight, 0.1, 100);
camera.position.z = 4;
-
+
// Create icosahedron with manually defined vertices
function createIcosahedron(radius) {
// Golden ratio for icosahedron vertices
const t = (1 + Math.sqrt(5)) / 2;
-
+
// Normalize radius
const normRadius = radius / Math.sqrt(1 + t * t);
-
+
// Create vertices
const vertices = [
[-1, t, 0], [1, t, 0], [-1, -t, 0], [1, -t, 0],
[0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t],
[t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]
].map(v => new THREE.Vector3(v[0] * normRadius, v[1] * normRadius, v[2] * normRadius));
-
+
// Define edges (pairs of vertex indices)
const edges = [
[0, 11], [0, 5], [0, 1], [0, 7], [0, 10],
@@ -60,34 +60,34 @@ window.onload = function() {
[8, 9], /*[8, 10],*/
/*[9, 11],*/ [10, 11]
];
-
+
return {
vertices: vertices,
edges: edges
};
}
-
+
// Convert vertex indices to actual vertices and create a line
function createLine(icosa, edgeIndex, material) {
const startIndex = icosa.edges[edgeIndex][0];
const endIndex = icosa.edges[edgeIndex][1];
-
+
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array([
icosa.vertices[startIndex].x, icosa.vertices[startIndex].y, icosa.vertices[startIndex].z,
icosa.vertices[endIndex].x, icosa.vertices[endIndex].y, icosa.vertices[endIndex].z
]);
-
+
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-
+
return new THREE.Line(geometry, material);
}
-
+
// Function to create the dual line rendering (thin back lines, thick front lines)
function createDualLineRendering(radius) {
const group = new THREE.Group();
const icosa = createIcosahedron(radius);
-
+
// Create materials
const backMaterial = new THREE.MeshBasicMaterial({
color: 0x63a8b8, // green for back lines
@@ -96,35 +96,35 @@ window.onload = function() {
opacity: 0.4,
side: THREE.DoubleSide
});
-
+
const frontMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff, // white for front lines
transparent: true,
depthTest: true, // Use depth test for front lines
side: THREE.DoubleSide
});
-
+
// For each edge, create:
// 1. A thin cylindrical tube with back material that ignores depth
// 2. A cylindrical tube with front material that uses depth testing
- const backRadius = 0.03; // thin for back lines
+ const backRadius = 0.025; // thin for back lines
const frontRadius = 0.035; // thick for front lines
-
+
icosa.edges.forEach((edge, index) => {
const start = icosa.vertices[edge[0]];
const end = icosa.vertices[edge[1]];
-
+
// Create back line (thick)
const backLine = createCylinderBetweenPoints(start, end, backRadius, 1, backMaterial);
backLine.renderOrder = 1; // Render after front lines
group.add(backLine);
-
+
// Create front line (thin)
- const frontLine = createCylinderBetweenPoints(start, end, frontRadius, 0.95, frontMaterial);
+ const frontLine = createCylinderBetweenPoints(start, end, frontRadius, 1.022, frontMaterial);
frontLine.renderOrder = 3; // Render before back lines
group.add(frontLine);
});
-
+
// Create faces for depth testing (invisible)
const faceMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
@@ -133,7 +133,7 @@ window.onload = function() {
depthWrite: true,
side: THREE.DoubleSide
});
-
+
// Create faces for internal icosahedron
const internalMaterial = new THREE.MeshBasicMaterial({
color: 0x63a8b8,
@@ -142,7 +142,7 @@ window.onload = function() {
opacity: 0.2,
side: THREE.DoubleSide
});
-
+
// Define faces of icosahedron (each is a triangle of vertex indices)
const faces = [
[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
@@ -150,7 +150,7 @@ window.onload = function() {
[3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
[4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
];
-
+
// Create invisible faces for depth testing
faces.forEach(face => {
const geometry = new THREE.BufferGeometry();
@@ -159,14 +159,14 @@ window.onload = function() {
icosa.vertices[face[1]].x, icosa.vertices[face[1]].y, icosa.vertices[face[1]].z,
icosa.vertices[face[2]].x, icosa.vertices[face[2]].y, icosa.vertices[face[2]].z
]);
-
+
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-
+
const faceMesh = new THREE.Mesh(geometry, faceMaterial);
faceMesh.scale.set(0.95,0.95,0.95);
faceMesh.renderOrder = 0; // Render first for depth buffer
group.add(faceMesh);
-
+
const internalMesh1 = new THREE.Mesh(geometry, internalMaterial);
const internalMesh2 = new THREE.Mesh(geometry, internalMaterial);
const internalMesh3 = new THREE.Mesh(geometry, internalMaterial);
@@ -188,45 +188,45 @@ window.onload = function() {
internalMesh5.renderOrder = 1; // Render between front and back
group.add(internalMesh5);
});
-
+
return group;
}
-
+
// Function to create a cylinder between two points
function createCylinderBetweenPoints(pointX, pointY, radius, lengthmultiplier, material) {
// Direction from pointX to pointY
const direction = new THREE.Vector3().subVectors(pointY, pointX);
const length = direction.length();
-
+
// Create cylinder
const geometry = new THREE.CylinderGeometry(radius, radius, length*lengthmultiplier, 3, 1);
-
+
// By default, cylinder is along Y-axis, so rotate it
geometry.rotateX(Math.PI / 2);
-
+
// Create mesh
const cylinder = new THREE.Mesh(geometry, material);
-
+
// Position and orient cylinder
const midpoint = new THREE.Vector3().addVectors(pointX, pointY).multiplyScalar(0.5);
cylinder.position.copy(midpoint);
cylinder.lookAt(pointY);
-
+
return cylinder;
}
-
+
// Create our icosahedron
const icosahedronGroup = createDualLineRendering(0.85);
scene.add(icosahedronGroup);
-
+
// Animation state
let animating = true;
-
+
let lastFrameTime = 0;
const targetFPS = 20;
const animMultiplier = 30/targetFPS;
const frameDuration = 1000 / targetFPS;
-
+
// Animation function
function animate(now) {
requestAnimationFrame(animate);
@@ -245,37 +245,22 @@ window.onload = function() {
renderer.render(scene, camera);
}
-
- /*
- // Set up controls
- const toggleAnimationBtn = document.getElementById('toggle-animation');
- const resetRotationBtn = document.getElementById('reset-rotation');
-
- toggleAnimationBtn.addEventListener('click', function() {
- animating = !animating;
- this.textContent = animating ? 'Pause' : 'Resume';
- });
-
- resetRotationBtn.addEventListener('click', function() {
- icosahedronGroup.rotation.set(0, 0, 0);
- });
- */
-
+
// Start animation
animate();
-
+
// Handle window resize
window.addEventListener('resize', function() {
// Only update if container dimensions change
const newWidth = container.clientWidth;
const newHeight = container.clientHeight;
-
+
if (newWidth !== containerWidth || newHeight !== containerHeight) {
camera.aspect = newWidth / newHeight;
camera.updateProjectionMatrix();
renderer.setSize(newWidth, newHeight);
}
});
-
+
console.log('Icosahedron wireframe created successfully');
};
diff --git a/public_html/index.html b/public_html/index.html
index f42e967..33e5ad7 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -2,28 +2,27 @@
-
+
lastfuture
-
+
-
+
-
+
