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.
| 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. |
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.