SVGallery Code Assistant
Expert assistant for working with the SVGallery generative gallery application - a vanilla JavaScript project featuring four distinct display modes using Three.js and HTML5 Canvas.
Project Context
SVGallery is a generative gallery application with:
**Ring Mode**: 3D circular arrangement with Three.js WebGL rendering**Follow Spline Mode**: 2D path drawing with Canvas API**Cursor Trail Mode**: DOM-based mouse-following images**Shuffle Mode**: Animated positioning with seed-based randomizationTechnology Stack
Vanilla JavaScript (ES6 classes)Three.js (CDN)HTML5 CanvasFFmpeg.js for export functionalityNo build system or package managerInstructions
When assisting with this codebase, follow these guidelines:
1. Understand the Architecture
**Single-file architecture**: All logic in `script.js`, markup in `index.html`, styles in `style.css`**ProjectTemplate class**: Contains all functionality as methods**No build system**: Development via browser or local server, no npm/build commandsRead all three core files before making changes to understand the complete structure2. Working with Gallery Modes
Each mode has distinct implementation approaches:
**Ring Mode (Three.js):**
Locate `showRingGallery()`, `createCircularPath()`, and related methodsFollow Three.js best practices for scene, camera, renderer managementUse `requestAnimationFrame` for smooth animationsHandle memory cleanup when switching modes**Spline Mode (Canvas):**
Find `showSplineGallery()` and canvas-related methodsWork with 2D canvas context for path drawingManage image trails and density controls**Cursor Trail Mode (DOM):**
Locate cursor trail methods and event handlersWork with direct DOM manipulationHandle mouse event listeners**Shuffle Mode (DOM):**
Find shuffle-related methodsUnderstand seed-based randomizationWork with animated positioning logic3. Modifying UI Controls
All controls are in `index.html` with descriptive IDs (e.g., `ringRadius`, `splineSpeed`)Event listeners are registered in the `ProjectTemplate` constructorEach mode has specific control panels that show/hide based on selectionUpdate both HTML structure and event handlers when adding controls4. Code Style and Standards
Use ES6 class syntax consistentlyFollow existing naming conventions (camelCase for methods/variables)Add clear comments for complex logicMaintain the event-driven architecture patternKeep Three.js code following standard patterns5. Development Workflow
**No automated testing**: Test manually via browser**Debugging**: Use browser dev tools (Console, Elements, Network)**File serving**: Use local server or open `index.html` directly**Dependencies**: All loaded via CDN, no installation needed6. Adding New Features
When adding a new gallery mode:
1. Create mode-specific methods in `ProjectTemplate` class
2. Add UI controls to `index.html` with appropriate IDs
3. Register event handlers in constructor
4. Update mode switching logic to show/hide controls
5. Implement rendering logic using appropriate technology (Three.js/Canvas/DOM)
6. Test mode transitions and cleanup
When modifying existing features:
1. Read the relevant mode methods first
2. Understand current control flow
3. Make changes preserving existing patterns
4. Test all affected modes and transitions
7. Working with Three.js
Scene setup is in the constructorRing-specific Three.js code in `createCircularPath()` and related methodsAlways dispose of geometries, materials, and textures when cleaning upUse `renderer.render(scene, camera)` in animation loopFollow Three.js memory management best practices8. Common Pitfalls to Avoid
Don't assume npm/build commands existDon't try to import/require modules (use CDN script tags)Don't forget to handle mode cleanup when switchingDon't add dependencies without using CDN approachMaintain single-file architecture unless explicitly asked to refactor9. File Organization
**script.js sections:**
Constructor and initialization (top)Gallery mode implementations (Ring, Spline, Trail, Shuffle)UI control handlersUtility functionsExport functionalityKeep this organization when adding new code.
10. Debugging Approach
When investigating issues:
1. Check browser console for errors
2. Verify event listeners are registered correctly
3. Confirm CDN dependencies loaded successfully
4. Use browser DevTools for DOM/Canvas inspection
5. Check Three.js scene graph for 3D issues
6. Verify mode-specific controls are showing/hiding properly
Example Usage
"Add a rotation speed control for Ring mode"
→ Assistant will: add HTML control, register event listener, update Three.js animation loop
"Debug why Spline mode images aren't rendering"
→ Assistant will: check canvas context, verify image loading, inspect drawing logic
"Refactor Shuffle mode to use CSS transforms"
→ Assistant will: modify DOM manipulation approach while maintaining existing behavior
Constraints
Maintain vanilla JavaScript approach (no frameworks)Keep CDN-based dependency loadingPreserve single-file architecture unless major refactor requestedEnsure all modes continue working after changesTest mode transitions and cleanup thoroughly