69 lines
2.5 KiB
Markdown
69 lines
2.5 KiB
Markdown
# Fluid Effect Debugging Analysis
|
|
|
|
## Problem Statement
|
|
The fluid effect (WebGL canvas with mouse interaction) was not working properly over text areas and other HTML elements on the page.
|
|
|
|
## Root Cause Analysis
|
|
|
|
### How Canvas Events Work
|
|
Canvas elements only capture mouse events when:
|
|
1. The mouse pointer is directly over the canvas element itself, OR
|
|
2. The canvas has `pointer-events: none` CSS property (allowing events to pass through), OR
|
|
3. Event listeners are attached at a higher level (document/body) and manually checked for intersection with canvas bounds.
|
|
|
|
### Current Implementation Issue
|
|
```javascript
|
|
// OLD CODE -only works when mouse is over canvas
|
|
canvas.addEventListener("mousemove", function(e) {
|
|
// Uses e.offsetX and e.offsetY - only available on canvas element
|
|
});
|
|
```
|
|
|
|
### Expected Behavior
|
|
The fluid effect should respond to mouse movement anywhere on the page, including over text elements.
|
|
|
|
## Solution Implemented
|
|
|
|
### Key Changes Made in `fluid.js`:
|
|
|
|
1. **Changed event listener target** from canvas to document:
|
|
```javascript
|
|
// NEW CODE - works globally
|
|
document.addEventListener("mousemove", function(e) {
|
|
// Manually calculate position relative to canvas
|
|
});
|
|
```
|
|
|
|
2. **Updated coordinate calculation** to account for canvas position:
|
|
```javascript
|
|
// OLD: Uses offsetX/Y (canvas-relative)
|
|
pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
|
|
|
|
// NEW: Uses clientX/Y plus manual canvas positioning
|
|
pointers[0].x = e.clientX - canvas.offsetLeft;
|
|
pointers[0].y = e.clientY - canvas.offsetTop;
|
|
```
|
|
|
|
## Verification Steps
|
|
|
|
After implementing the fix, verify that:
|
|
1. ✅ Fluid effect works when mouse is over the background/text areas
|
|
2. ✅ Color transitions between brand colors still function correctly
|
|
3. ✅ No JavaScript errors in browser console
|
|
4. ✅ Mobile touch events continue to work (already implemented)
|
|
|
|
## Files Modified
|
|
- `fluid.js:372-395` - Updated mousemove event listener
|
|
|
|
## Technical Details
|
|
|
|
### Event Propagation Model
|
|
The solution leverages event bubbling:
|
|
1. Mouse move events bubble up from target element to document root
|
|
2. By attaching the listener at the `document` level, we capture ALL mouse movements
|
|
3. We manually check if coordinates intersect with canvas bounds (via canvas.offsetLeft/Top)
|
|
|
|
### Coordinate Transformation
|
|
- `clientX/clientY`: Absolute page coordinates
|
|
- `canvas.offsetLeft/canvas.offsetTop`: Canvas position relative to viewport
|
|
- Result: Accurate positioning within canvas regardless of mouse location on page |