Digital Kaleidoscope

This is a Digital Kaleidoscope application that you can play for free in your web browser. Please enjoy the beautiful world of color and symmetry. It is responsive to PC/smartphones.

Features

Simulation

Inside the digital kaleidoscope, small colorful objects are enclosed, and physics calculations are used to simulate a real kaleidoscope.

Physics Simulation

Rotation mode

This application supports the ability to choose how to rotate the kaleidoscope.

Use Auto-Rotation (screen also rotates)
Rotates just like a real kaleidoscope, and gravity is applied to the lower side of the screen.
Use Auto-Rotation (screen is fixed)
The screen is fixed, and the direction of gravity rotates around the screen.
(For people who get dizzy when the screen rotates)
Use device orientation
(See Gyro Sensor below)
Stop rotation
Stops all simulations.

Selection screen of rotation mode

Gyro sensor

If the device is a smartphone, the gyro-sensor-based rotation mode Use device orientation is supported. You can link the kaleidoscope with the tilt of your phone. (Please play carefully so as not to drop it!)

Gyro sensor in use

Main technologies used

Development language

TypeScript

Libraries

Three.js: 3D Library
cannon-es: Physics Simulation Library
Next.js: React Framework

History

Dec. 17, 2024: First version published