diff options
| author | Yuval Adam <_@yuv.al> | 2025-02-27 11:15:18 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-02-27 11:15:18 +0100 |
| commit | 259befc9a58da44d82a3101504ba805a2957949e (patch) | |
| tree | 3cfdfb65669aca54f1ec1055c4ffb2affe058c33 /src/pages/isometric/index.astro | |
| parent | cb2359080afd64d7581f14693dc62f6744c33393 (diff) | |
Refactor but still no diceastro
Diffstat (limited to 'src/pages/isometric/index.astro')
| -rw-r--r-- | src/pages/isometric/index.astro | 100 |
1 files changed, 56 insertions, 44 deletions
diff --git a/src/pages/isometric/index.astro b/src/pages/isometric/index.astro index 649715e..cf627e3 100644 --- a/src/pages/isometric/index.astro +++ b/src/pages/isometric/index.astro @@ -1,5 +1,6 @@ --- // Isometric Triangles Experiment +import IsometricScript from '../../components/IsometricScript.astro'; --- <!doctype html> @@ -84,14 +85,20 @@ } </style> </head> - <body> <div class="content"> <h1>Isometric Triangles</h1> </div> <script is:inline> - document.addEventListener("DOMContentLoaded", function () { + // Wait for the page to be fully loaded + window.addEventListener('load', function() { + setTimeout(initializeTriangles, 100); + }); + + function initializeTriangles() { + console.log("Script running, creating triangles"); + const colors = [ "#FF0000", "#FF00FF", @@ -118,52 +125,13 @@ Math.floor((windowWidth * windowHeight) / 10000), ); + console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`); + // Create triangles using DOM elements with isometric perspective for (let i = 0; i < triangleCount; i++) { createIsometricTriangle(); } - function createIsometricTriangle() { - const triangle = document.createElement("div"); - triangle.className = "triangle isometric"; - - // Random size between 50 and 150 - const size = 50 + Math.random() * 100; - - // Random position - const left = Math.random() * windowWidth; - const top = Math.random() * windowHeight; - - // Random color - const color = - colors[Math.floor(Math.random() * colors.length)]; - - // Random rotation for isometric effect - const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees - const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees - const rotateZ = Math.random() * 360; // 0 to 360 degrees - - // Random animation duration - const duration = 10 + Math.random() * 40; - - // Random direction - const direction = - Math.random() > 0.5 ? "normal" : "reverse"; - - // Set triangle properties - triangle.style.left = `${left}px`; - triangle.style.top = `${top}px`; - triangle.style.width = `${size}px`; - triangle.style.height = `${size}px`; - triangle.style.backgroundColor = color; - triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; - triangle.style.animationDuration = `${duration}s`; - triangle.style.animationDirection = direction; - - // Add to body - document.body.appendChild(triangle); - } - // Add some triangles when mouse moves document.addEventListener("mousemove", function (e) { if (Math.random() < 0.05) { @@ -215,7 +183,51 @@ createIsometricTriangle(); } }); - }); + } + + function createIsometricTriangle() { + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + + const triangle = document.createElement("div"); + triangle.className = "triangle isometric"; + + // Random size between 50 and 150 + const size = 50 + Math.random() * 100; + + // Random position + const left = Math.random() * windowWidth; + const top = Math.random() * windowHeight; + + // Random color + const color = + colors[Math.floor(Math.random() * colors.length)]; + + // Random rotation for isometric effect + const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees + const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees + const rotateZ = Math.random() * 360; // 0 to 360 degrees + + // Random animation duration + const duration = 10 + Math.random() * 40; + + // Random direction + const direction = + Math.random() > 0.5 ? "normal" : "reverse"; + + // Set triangle properties + triangle.style.left = `${left}px`; + triangle.style.top = `${top}px`; + triangle.style.width = `${size}px`; + triangle.style.height = `${size}px`; + triangle.style.backgroundColor = color; + triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; + triangle.style.animationDuration = `${duration}s`; + triangle.style.animationDirection = direction; + + // Add to body + document.body.appendChild(triangle); + } </script> </body> </html> |