From e3692bf536ba1410664325f54ca840b9b1169683 Mon Sep 17 00:00:00 2001 From: Alina Marquardt Date: Tue, 13 May 2025 14:46:59 +0200 Subject: [PATCH] cleanup --- public_html/functions.js | 111 +++++++++++++++++---------------------- public_html/index.html | 66 ++++------------------- public_html/style.css | 8 +-- 3 files changed, 63 insertions(+), 122 deletions(-) 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 - + - + - +
-
hello! my name is @@ -33,36 +32,26 @@ -
- +
- +
- +

music releases

@@ -97,41 +86,8 @@
- -
- - +
diff --git a/public_html/style.css b/public_html/style.css index 26f24f6..9841ed8 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -169,7 +169,7 @@ body, select, input, textarea {color: var(--text-color);} /* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */ ::-moz-selection{background: var(--highlight-color); text-shadow: none;} -::selection {background: var(--highlight-color); text-shadow: none;} +::selection {background: var(--highlight-color); text-shadow: none;} /* j.mp/webkit-tap-highlight-color */ a:link {-webkit-tap-highlight-color: var(--highlight-color);} @@ -385,7 +385,7 @@ article.album a:hover { margin-left: 3rem; } -#base a, #base section.iam .line2 { +#base a, #base .bigline { font-size: 1.5rem; display: block; line-height: 1em; @@ -457,9 +457,9 @@ article.album a:hover { -------------------------------------------------------------------------------*/ @media screen and (max-width: 576px) { - + } @media print { - + }