Spacemoji offers a captivating single-file HTML5 Canvas animation that takes users on a journey through a vibrant, emoji-filled space. Utilizing 3D perspective projection and smooth warp transitions, it transforms interactivity into a visually delightful experience, all dictated by a set of customizable parameters.
Spacemoji is an innovative single-file HTML5 Canvas animation that guides users through a mesmerizing journey in an emoji-filled space. Utilizing 3D perspective projection, this project creates a captivating visual experience with smooth warp transitions.
Key Features
- Interactive Journey: Users can click, tap, and hold to warp through space, while lifting to disengage from the warp, offering an engaging interaction model.
- Configurability: The project's behavior is governed by a detailed configuration object, allowing customization of various parameters such as:
| Parameter | Default | Description |
|---|---|---|
| totalParticles | 700 | The total number of active emojis in the simulation. |
| farZLimit | 3000 | Distance at which emojis spawn on the Z-axis. |
| focalLength | 1000 | Simulated lens width affecting zoom and distortion effects. |
| baseSpeed | 3 | Constant travel velocity when not interacting. |
| warpSpeed | 100 | Maximum speed reached during interaction. |
| accelerationRate | 0.05 | Rate of transition between base and warp speeds. |
| motionTrailOpacity | 0.3 | Determines the opacity of motion trails, with lower values yielding longer trails. |
| spawnSpreadRange | 5000 | Range within which emojis spawn, with lower values resulting in a more compact distribution. |
| rotationSpeedMultiplier | 0.0005 | Base spinning speed of emojis during travel. |
3D Projection
The project employs advanced 3D projection mathematics to convert world coordinates to a 2D viewport. This technique generates a realistic depth experience and enhances the illusion of movement as particles approach the viewer. The formulae for screen coordinates are:
screenX = (worldX * focalLength) / worldZ + centerX
screenY = (worldY * focalLength) / worldZ + centerY
As the worldZ value decreases, the particles appear larger and travel faster across the display, enriching the immersive experience.
Explore the project further by viewing the Live Demo and see the endless possibilities of navigating through a vibrant, emoji-laden universe.
No comments yet.
Sign in to be the first to comment.