-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Daniele Ciminieri
committed
Sep 19, 2024
1 parent
3bb33b1
commit a2c1cc7
Showing
6 changed files
with
155 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // Configuration variables for the grid | ||
| const MIN_GRID_SIZE = 50; // Minimum size of each grid cell in pixels | ||
| const MAX_GRID_SIZE = 50; // Maximum size of each grid cell in pixels | ||
| const ANIMATION_DURATION = 1000; // Duration of the square's visibility in milliseconds | ||
| const PADDING = 0; // Padding between squares in pixels | ||
| const BORDER_ONLY = false; // If true, only draw the border of the div | ||
|
|
||
| /** | ||
| * Creates a square div at the mouse position and fades it out | ||
| * @param {number} x - The x-coordinate of the mouse | ||
| * @param {number} y - The y-coordinate of the mouse | ||
| */ | ||
| export function createSquareAtMouse(x, y) { | ||
| // Generate a random grid size within the configured range | ||
| const GRID_SIZE = Math.floor(Math.random() * (MAX_GRID_SIZE - MIN_GRID_SIZE + 1)) + MIN_GRID_SIZE; | ||
|
|
||
| // Calculate the grid cell position | ||
| const cellX = Math.floor(x / (GRID_SIZE + PADDING)) * (GRID_SIZE + PADDING); | ||
| const cellY = Math.floor(y / (GRID_SIZE + PADDING)) * (GRID_SIZE + PADDING); | ||
|
|
||
| // Check if a square already exists at this position | ||
| const existingSquare = document.querySelector(`div[data-x="${cellX}"][data-y="${cellY}"]`); | ||
| if (existingSquare) { | ||
| return; // If a square already exists, don't create a new one | ||
| } | ||
|
|
||
| // Create the square div | ||
| const square = document.createElement('div'); | ||
| square.style.position = 'absolute'; | ||
| square.style.left = `${cellX}px`; | ||
| square.style.top = `${cellY}px`; | ||
| square.style.width = `${GRID_SIZE}px`; | ||
| square.style.height = `${GRID_SIZE}px`; | ||
| square.style.mixBlendMode = 'difference'; // This will invert the colors underneath | ||
| square.style.pointerEvents = 'none'; // Ensure it doesn't interfere with other elements | ||
| square.style.transition = 'opacity ' + ANIMATION_DURATION / 1000 + 's ease-out'; // Add transition for fading effect | ||
| square.dataset.x = cellX; // Add data attributes to identify the square's position | ||
| square.dataset.y = cellY; | ||
|
|
||
| if (BORDER_ONLY) { | ||
| square.style.border = '3px solid rgba(0, 0, 255, 0.8)'; // Blue border with 80% opacity | ||
| square.style.backgroundColor = 'transparent'; // Transparent background | ||
| } else { | ||
| square.style.backgroundColor = 'rgba(0, 0, 255, 0.8)'; // Use blue with 80% opacity | ||
| } | ||
|
|
||
| // Add the square to the document | ||
| document.body.appendChild(square); | ||
|
|
||
| // Start the fading effect after a short delay | ||
| setTimeout(() => { | ||
| square.style.opacity = '0'; | ||
| }, 50); | ||
|
|
||
| // Remove the square after the animation completes | ||
| setTimeout(() => { | ||
| document.body.removeChild(square); | ||
| }, ANIMATION_DURATION); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters