Spacemoji — Experience an immersive journey through…

Pitch

Description

Comments

About this project

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.