got all the source up to date on main with the source on gh-pages

Author: MatthewSavitt

README.md

@@ -2,6 +2,8 @@
 
 **Parametrix** is a streamlined 3D animation software that works natively in your browser of choice. It offers support for moving, rotating, scaling, and changing the colors of objects animated in a scene according to a variety of mathematically constructed functions that the user can configure.
 
+The standalone website can be found here: https://matthewsavitt.github.io/Parametrix-CMSI-4072/
+
 ## How to Use
 
 1. Clone the repository:
@@ -19,4 +21,4 @@
 
 
 ## Credits
-Code by Matthew Savitt :D, open source or whatever.
+Code by Matthew Savitt :D, open source or whatever.

assets/gizmo.PNG

@@ -161,7 +161,7 @@ export function createPlaybackHUD(animationManager, scene) {
 
     // Create path icon image
     const pathIcon = document.createElement('img');
-    pathIcon.src = '/../assets/paths.png';
+    pathIcon.src = './paths.png';
     pathIcon.width = 20;
     pathIcon.height = 20;
     pathIcon.style.marginRight = '5px';
@@ -180,6 +180,21 @@ export function createPlaybackHUD(animationManager, scene) {
     pathToggleCheckbox.checked = true; // Default to showing paths
     pathToggleCheckbox.id = 'path-toggle';
 
+    // Listen for project loading to update UI state
+    window.addEventListener('project-loaded', (event) => {
+        if (event.detail && event.detail.showAnimationPaths !== undefined) {
+            window.showAnimationPaths = event.detail.showAnimationPaths;
+            togglePathsButton.textContent = window.showAnimationPaths ? '👁️ Paths: ON' : '👁️ Paths: OFF';
+            
+            // Update visibility of all paths
+            scene.traverse(obj => {
+                if (obj.isAnimationPath) {
+                    obj.visible = window.showAnimationPaths;
+                }
+            });
+        }
+    });
+
     // Add components to container in correct order
     pathToggleContainer.appendChild(pathLabelContent);
     pathToggleContainer.appendChild(pathToggleCheckbox);
@@ -194,11 +209,27 @@ export function createPlaybackHUD(animationManager, scene) {
     gizmoToggleCheckbox.id = 'gizmo-toggle';
     gizmoToggleCheckbox.checked = true; // Default to visible
 
+    //create gizmo icon image
+    const gizmoIcon = document.createElement('img');
+    gizmoIcon.src = './gizmo.PNG';
+    gizmoIcon.width = 20;
+    gizmoIcon.height = 20;
+    gizmoIcon.style.marginLeft = '5px';
+
     const gizmoToggleLabel = document.createElement('label');
     gizmoToggleLabel.htmlFor = 'gizmo-toggle';
     gizmoToggleLabel.textContent = 'Show Gizmo:';
     gizmoToggleLabel.style.marginRight = '10px';
 
+    // Create label container with icon and text
+    const gizmoLabelContent = document.createElement('div');
+    gizmoLabelContent.style.display = 'flex';
+    gizmoLabelContent.style.alignItems = 'right';
+    gizmoLabelContent.style.marginRight = '10px';
+    gizmoLabelContent.appendChild(gizmoIcon);
+    gizmoLabelContent.appendChild(gizmoToggleLabel);
+    gizmoToggleContainer.appendChild(gizmoLabelContent);
+    // Append the checkbox to the label container
     gizmoToggleContainer.appendChild(gizmoToggleLabel);
     gizmoToggleContainer.appendChild(gizmoToggleCheckbox);
 

assets/menuOpen.mp3

@@ -10,62 +10,75 @@ export class AnimationManager {
     }
 
     addAnimation(object, animationConfig) {
+        console.log("Adding animation:", animationConfig);
+        
         // Update start/end times of the timeline if needed
         this.startTime = Math.min(this.startTime, animationConfig.startT);
         this.endTime = Math.max(this.endTime, animationConfig.endT);
 
-        // Check if the object already has animations
+        // Initialize animations array if it doesn't exist
         if (!object.animations) {
             object.animations = [];
-            
-            // Add an update method to the object
-            object.update = (time) => {
-                // Apply all animations for this object, using the provided time
-                object.animations.forEach(anim => {
-                    const { property, axis, startT, endT, functions, loop } = anim;
-                    
-                    // Skip if outside time range and not looping
-                    if (time < startT) return;
-                    if (time > endT && !loop && !this.loop) return;
-                    
-                    // Calculate local time based on global time
-                    let localTime;
-                    if (loop || this.loop) {
-                        // Loop the animation (cycle between startT and endT)
-                        const duration = endT - startT;
-                        const elapsed = time - startT;
-                        localTime = startT + (elapsed % duration);
-                    } else {
-                        // Play once and clamp to endT
-                        localTime = Math.min(time, endT);
-                    }
-                    
-                    // Apply the function to the specified property and axis
-                    if (functions[axis]) {
-                        const { apply, params } = functions[axis];
-                        const value = apply(localTime, params);
-                        
-                        // Apply to the object
-                        if (property === 'position') {
-                            object.position[axis] = value;
-                        } else if (property === 'rotation') {
-                            object.rotation[axis] = value;
-                        } else if (property === 'scale') {
-                            object.scale[axis] = Math.max(0.01, value); // Prevent negative/zero scale
-                        }
-                    }
-                });
-            };
         }
+        // Remove any existing animation for the same property and axis
+        object.animations = object.animations.filter(anim => 
+            !(anim.property === animationConfig.property && anim.axis === animationConfig.axis)
+        );
+        
+        // Remove from global animations list too
+        this.animations = this.animations.filter(anim => 
+            !(anim.object === object && anim.property === animationConfig.property && anim.axis === animationConfig.axis)
+        );
 
         // Add this animation to the object's animations
         object.animations.push(animationConfig);
 
         // Add to global animations list
         this.animations.push({ object, ...animationConfig });
 
+        // Ensure the update method is created
+        object.update = (time) => {
+            if (!object.animations || object.animations.length === 0) return;
+            
+            object.animations.forEach(anim => {
+                const { property, axis, startT, endT, functions } = anim;
+                
+                if (time < startT) return;
+                
+                let localTime;
+                if (this.loop) {
+                    const duration = endT - startT;
+                    const elapsed = time - startT;
+                    localTime = startT + (elapsed % duration);
+                } else {
+                    localTime = Math.min(time, endT);
+                }
+                
+                if (functions[axis]) {
+                    const { apply, params } = functions[axis];
+                    const value = apply(localTime, params);
+                    
+                    if (property === 'position') {
+                        object.position[axis] = value;
+                    } else if (property === 'rotation') {
+                        object.rotation[axis] = value;
+                    } else if (property === 'scale') {
+                        object.scale[axis] = Math.max(0.01, value);
+                    } else if (property === 'color' && object.material && object.material.color) {
+                        // Color animation
+                        if (axis === 'r') object.material.color.r = value / 255;
+                        if (axis === 'g') object.material.color.g = value / 255;
+                        if (axis === 'b') object.material.color.b = value / 255;
+                    }
+                }
+            });
+        };
+        
         // Apply animation immediately with current time
         object.update(this.globalTime);
+        
+        // Debug log to verify the animation is added
+        console.log(`Animation added to ${object.uuid}, total animations: ${this.animations.length}`);
     }    addAnimation(object, animationConfig) {
         console.log("Adding animation:", animationConfig);