Updates

mattrussell2 · Oct 1, 2024 · a3001e9 · a3001e9
1 parent 094caf8
commit a3001e9
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 0 deletions.
diff --git a/heap.js b/heap.js
@@ -9,6 +9,8 @@ import { GUI }          from 'three/addons/libs/lil-gui.module.min.js';
 import { Interaction }  from './three.interaction.js/src/index.js';
 import { TWEEN }        from 'tween';
 import _                from 'underscore';
+import { showLoading, hideLoading } from './loadingAnimation.js';
+
 
 // 'min' or 'max'
 var HEAP_TYPE   = "max";
@@ -852,8 +854,12 @@ function initGui() {
     HEAPSORT_START_BUTTON.domElement.addEventListener( 'click', colorButton );
 }
 
+
+await showLoading();
+await new Promise(resolve => setTimeout(resolve, 1000));
 initGui();
 initHeap();
+hideLoading();
 
 // Render the scene
 function render() {

diff --git a/index.html b/index.html
@@ -21,3 +21,8 @@
 <body style="background-color: #273135">
   <script src="heap.js" type="module"></script>
 </body>
+
+<div id="loading">
+  <canvas id="loadingCanvas"></canvas>
+  <p>Loading...</p>
+</div>
diff --git a/loadingAnimation.js b/loadingAnimation.js
@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+
+let loadingScene, loadingCamera, loadingRenderer, loadingCube;
+
+function initLoadingAnimation() {
+    loadingScene = new THREE.Scene();
+
+    // Get the loading div dimensions
+    const loadingDiv = document.getElementById('loading');
+    const width = loadingDiv.clientWidth;
+    const height = loadingDiv.clientHeight;
+
+    // Use the correct aspect ratio
+    loadingCamera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+    loadingRenderer = new THREE.WebGLRenderer({ canvas: document.getElementById('loadingCanvas'), alpha: true });
+    loadingRenderer.setSize(width, height);
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
+    loadingCube = new THREE.Mesh(geometry, material);
+    loadingScene.add(loadingCube);
+
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(0, 0, 10);
+    loadingScene.add(light);
+
+    // Add ambient light to better illuminate the cube
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    loadingScene.add(ambientLight);
+
+    loadingCamera.position.z = 5;
+}
+
+function animateLoading() {
+    requestAnimationFrame(animateLoading);
+
+    loadingCube.rotation.x += 0.01;
+    loadingCube.rotation.y += 0.01;
+
+    // Change color over time
+    const time = Date.now() * 0.001;
+    const r = Math.sin(time * 0.5) * 0.5 + 0.5;
+    const g = Math.sin(time * 0.3) * 0.5 + 0.5;
+    const b = Math.sin(time * 0.7) * 0.5 + 0.5;
+    loadingCube.material.color.setRGB(r, g, b);
+
+    loadingRenderer.render(loadingScene, loadingCamera);
+}
+
+export function showLoading() {
+    if (!loadingScene) {
+        initLoadingAnimation();
+        animateLoading();
+    }
+    document.getElementById('loading').style.display = 'flex';
+}
+
+export function hideLoading() {
+    document.getElementById('loading').style.display = 'none';
+}
+
+// Add window resize handler
+window.addEventListener('resize', onWindowResize, false);
+
+function onWindowResize() {
+    const loadingDiv = document.getElementById('loading');
+    const width = loadingDiv.clientWidth;
+    const height = loadingDiv.clientHeight;
+
+    loadingCamera.aspect = width / height;
+    loadingCamera.updateProjectionMatrix();
+
+    loadingRenderer.setSize(width, height);
+}
diff --git a/style.css b/style.css
@@ -9,3 +9,39 @@ canvas {
     top: 0;
     left: 0;
 }
+
+#loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(39, 49, 53, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+
+  #loadingCanvas {
+    width: 100%;
+    height: calc(100% - 60px); /* Reduced height to make room for text */
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  #loading p {
+    position: absolute;
+    bottom: 20px; /* Position text at the bottom */
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    margin: 0;
+    padding: 10px;
+    color: #f3f3f3;
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: rgba(39, 49, 53, 0.6); /* Semi-transparent background for better readability */
+  }