Time Space Visualizer Sakura
User Manual
This manual explains how to operate and configure "Time Space Visualizer Sakura." This application is designed not only as a functional clock but as an art piece that visually expresses the concept of "time". Please pay special attention to the settings section to maximize your experience with this time visualization art.
Table of Contents
- Introduction
- Getting Started
- Interface Overview
- Settings
- Main Features
- Shortcuts
- Troubleshooting
- Application Concept
- Art Appreciation Guide
1. Introduction
Time Space Visualizer Sakura is a 3D application that beautifully visualizes time and space. It combines various clock displays and visual effects with customizable camera work to artistically express the flow of time.
This application uses the following key technologies:
- Three.js - 3D rendering
- WebGL - graphics rendering
- JavaScript (ES6+) - application logic
- Electron - cross-platform desktop application
2. Getting Started
When you launch the application, it displays with the default clock and camera work. You can use your mouse for the following operations:
- Rotate: Left-click and drag
- Zoom: Rotate the mouse wheel
- Double-click: Move the camera directly in front of the clock
- Open Settings: Click the heart (♥) icon in the top right
The double-click feature provides a quick way to return to viewing the clock head-on from any camera position. This is especially useful if you have moved the camera far from the clock or are disoriented.
3. Interface Overview
The interface is simple, consisting of the main visualization screen and the settings icon in the top right.
Clicking and manipulating the screen will move the camera and change your viewpoint. From the settings menu in the top right, you can adjust various settings.
4. Settings
In Time Space Visualizer Sakura, you can customize the visualization of time to your liking by adjusting various settings.
4.1 Language Settings
You can select the interface language:
- Japanese (日本語)
- English
- German (Deutsch)
4.2 Theme Settings
The theme is an important element that determines the overall atmosphere. You can select from the following themes:
- DaySakuraTheme: A theme that expresses a cherry blossom landscape in bright daylight. It features the beauty of cherry blossoms blooming under sunlight, with bright color tones and natural shadows.
- NightSakuraTheme: A theme that expresses a fantastical cherry blossom landscape at night. It creates a bluish night atmosphere illuminated by moonlight and lantern light.
- TraditionalSakuraTheme: A cherry blossom theme that incorporates elements of traditional Japanese art such as ink painting and washi paper. It features traditional Japanese expressions using washi and ink textures.
- NightGardenTheme: A theme that expresses a fantastical space of a quiet Japanese garden illuminated by moonlight. You can enjoy elements of a Japanese garden such as bamboo forests, stone lanterns, ponds, and stone bridges, along with the fantastical night scenery of dancing fireflies.
4.2.1 DaySakuraTheme
A theme that expresses a bright daytime cherry blossom landscape. You can experience the beauty of cherry blossoms illuminated by sunlight.
- Sunlight and natural shadows: Natural expression of daytime light and shadow
- Bright color tones: Vivid cherry blossom colors and bright ambient light
- Performance optimization: Automatic adjustment to device performance
This theme is especially recommended when you want to experience a bright, open atmosphere.
4.2.2 NightSakuraTheme
A theme that expresses a fantastical cherry blossom landscape at night. You can enjoy the mystical world of night cherry blossoms illuminated by moonlight.
- Moonlight and lantern light: Soft light sources illuminating night cherry blossoms
- Bluish atmosphere: Expressing the coolness and fantasy of night
- Firefly expression: Firefly lights embellishing night cherry blossoms
Suitable for a quiet, calm atmosphere and a meditative experience.
4.2.3 TraditionalSakuraTheme
A cherry blossom theme that incorporates elements of traditional Japanese art such as ink painting and washi paper. You can feel the Japanese aesthetic sense of "wabi-sabi."
- Washi and ink textures: Traditional Japanese material feel
- Subdued color tones: Modest yet deep color expressions
- Environment mapping: Expression of depth through soft reflections
This theme is recommended for those who want to experience traditional Japanese beauty.
4.2.4 NightGardenTheme
A theme that expresses a fantastical space of a quiet Japanese garden illuminated by moonlight. You can enjoy traditional Japanese garden elements in a night atmosphere.
- Moonlight and water reflections: Expression of bluish moonlight and light reflected on the pond's surface
- Bamboo grove and stone lanterns: Placement of bamboo groves and stone lanterns that decorate the garden
- Swarm of fireflies: Fantastical expression of fireflies flying across the night garden
- Stone bridge and rock arrangements: Traditional Japanese garden rock placements and stone bridge
Recommended for those who want to enjoy a quiet, meditative atmosphere or experience the beauty of traditional Japanese gardens.
4.3 Effects Settings
Effects are elements that enrich visual expression. You can select from the following effects:
- DigitalTimeWave: A Japanese-style arrangement effect that combines digital waves and time visualization. It features a pillar in the center that represents a cherry tree trunk and flower-shaped markers that represent time.
- FireflyTrail: An effect that depicts the trails of fireflies flying around. Glowing firefly particles leave trails while moving naturally as a swarm.
- LanternLight: A fantastical effect of Japanese lanterns floating. It features lantern modeling and light sources, with changes in color and light according to the time of day.
- SakuraEffect: Expresses cherry blossom petals dancing in space using a particle system with shaders. Natural movement by wind is a feature.
- SakuraRipple: A fantastical effect where cherry blossom petals create ripples in spacetime. The visual expression of ripples and the falling of cherry blossom petals are characteristic.
- SakuraVoxelCloud: An effect where voxels floating in 3D space transform into fantastical cherry blossom shapes. Features include various shape transformations (cherry blossoms, flowers, waves, etc.) and changes in color and luminescence according to the time of day.
4.3.1 DigitalTimeWaveEffect
A Japanese-style arrangement effect that combines digital waves and time visualization.
- Central pillar: A pillar placed in the center that represents a cherry tree trunk
- Time markers: Flower-shaped markers that represent time
- Wave expression: Expression of waves that spread according to the flow of time
4.3.2 FireflyTrailEffect
An effect that depicts the trails of fireflies flying around, moving naturally as a swarm.
- Glowing particles: Expression of flickering lights like fireflies
- Trail expression: Light trails that remain with movement
- Swarm behavior: Simulation of natural swarm movement
4.3.3 LanternLightEffect
A fantastical effect of Japanese lanterns floating. Changes according to the time of day are also implemented.
- Lantern model: 3D model of traditional Japanese lanterns
- Light source expression: Warm light emitted from lanterns
- Time changes: Changes in color and light intensity according to the time of day
4.3.4 SakuraEffect
Expresses cherry blossom petals dancing in space using a particle system with shaders.
- Petal expression: Beautiful cherry blossom petals based on shaders
- Wind effect: Natural movement of petals by wind
- Performance optimization: Efficient expression with reduced processing load
4.3.5 SakuraRippleEffect
A fantastical effect where cherry blossom petals create ripples in spacetime.
- Ripple expression: Visual effects of ripples like water surface
- Petal falling: Naturally falling cherry blossom petals
- Interaction: Expression of ripples and petals affecting each other
4.3.6 SakuraVoxelCloudEffect
An effect where voxels floating in 3D space transform into fantastical cherry blossom shapes.
- Shape transformation: Transformation into various shapes (cherry blossoms, flowers, waves, etc.)
- Time changes: Changes in color and luminescence according to the time of day
- Optimization features: Frustum culling to maintain performance
Each effect is automatically adjusted according to your computer's performance. If you experience performance issues, turning off some effects may result in smoother operation.
4.4 Clock Settings
In Time Space Visualizer Sakura, you can set various clock displays. By combining different clock types, you can achieve a multilayered representation of time.
Clock Types
4.4.1 Analog Clock
A traditional circular analog clock featuring a refined, beautiful design.
- Clock Size: You can adjust the size in a range from 0.5 to 2.0.
- Color Pattern: You can select from traditional, dark, blue, gold, and sakura.
- Second Hand Display: You can toggle the display of the second hand.
- Smooth Second Hand Movement: You can choose whether to move the second hand in 1-second increments or smoothly and continuously.
- Billboard Effect: You can set it to always face the camera.
4.4.2 Retro Analog Clock
A nostalgic design that evokes a sense of age, expressing the accumulation of time.
- Clock Size: You can adjust the size in a range from 0.5 to 1.5.
- Color Pattern: You can select from sepia, vintage, and worn.
- Second Hand Display: You can toggle the display of the second hand.
- Smooth Second Hand Movement: You can choose whether to move the second hand in 1-second increments or smoothly and continuously.
- Billboard Effect: You can set it to always face the camera.
- Particle Display: You can toggle the display of particles floating around the clock.
- Number Display Type: You can select from Arabic numerals, Roman numerals, and no numerals.
4.4.3 3D Digital Clock
Displays time with three-dimensional numbers, giving a futuristic impression.
- Clock Size: You can adjust the size in a range from 0.5 to 2.0.
- Color Pattern: You can select from blue, red, green, gold, sakura, and white & black.
- Second Display: You can toggle the display of seconds.
- Colon Blinking: You can choose whether to make the colon separating hours and minutes blink.
- Billboard Effect: You can set it to always face the camera.
4.4.4 Simple Digital Clock
A modern digital clock with a minimal design.
- Clock Size: You can adjust the size in a range from 0.5 to 5.0.
- Color Pattern: You can select from dark, light, blue, mint, and red.
- Second Display: You can toggle the display of seconds.
- Time Format: You can switch between 24-hour and 12-hour formats.
- Billboard Effect: You can set it to always face the camera.
4.4.5 Digital Clock
A modern digital display with luminous effects.
- Clock Size: You can adjust the size in a range from 0.5 to 2.0.
- Color Pattern: You can select from blue, red, green, gold, and sakura.
- Second Display: You can toggle the display of seconds.
- Colon Blinking: You can choose whether to make the colon separating hours and minutes blink.
- Time Format: You can switch between 24-hour and 12-hour formats.
- Billboard Effect: You can set it to always face the camera.
- Background Opacity: You can adjust the background opacity in a range from 0 to 1.
- Glow Intensity: You can adjust the glow intensity in a range from 0 to 1.
4.4.6 Flip Card Clock
A mechanical clock with flip-style numbers that change like those seen in train stations and airports.
- Clock Size: You can adjust the size in a range from 0.5 to 2.0.
- Color Pattern: You can select from classic, dark, blue, retro, and sakura.
- Second Display: You can toggle the display of seconds.
- Time Format: You can switch between 24-hour and 12-hour formats.
- Flip Animation: You can choose whether to animate the number changes.
- Flip Speed: You can adjust the flip animation speed in a range from 0.1 to 2.0.
- Billboard Effect: You can set it to always face the camera.
- Number Style: You can select from sans serif, Roman numerals, rounded, monospace, and serif italic.
- Card Thickness: You can adjust the card thickness in a range from 0.01 to 0.2.
- Show Shadow: You can toggle the display of card shadows.
By switching between different clock types, you can enjoy different time expressions. It's also possible to display multiple clock types simultaneously.
4.5 Camera Work Settings
By selecting camera work, you can enrich the visual representation of time. Available camera works include the following. Note that in the current version, detailed parameters for each camera work cannot be adjusted. Please enjoy the preset movements.
- Fixed Camera: The camera is fixed and doesn't move unless you move it manually.
- Slow Rotation: The camera slowly rotates around the clock.
- Spiral Orbit: The camera moves in a spiral pattern, changing the viewpoint up and down.
- Wave Orbit: The camera moves in a wave-like orbit.
- Improved Wave Orbit: Provides more refined wave-like movement, creating a smooth camera work experience.
- Smooth Right Orbit: The camera gently rotates clockwise around the clock while also moving softly up and down.
- Random Movement: The camera moves randomly, filming the clock from various angles.
- Pulse Orbit: The camera moves closer to and further from the clock.
4.6 HTML Clock Settings
You can customize the appearance and functionality of the 2D HTML clock displayed on the screen, separate from the 3D clock:
- Clock Display: Toggle the display of the HTML clock
- Size: Choose from small, medium, large, or extra large
- Color Theme: Select from dark, light, blue, sakura, or gold
- Font: Choose from sans-serif, serif, monospace, rounded, or digital
- Second Display: Toggle the display of seconds
- Time Format: Switch between 24-hour and 12-hour formats
- Display Position: Choose from top-left, top-right, bottom-left, or bottom-right
4.7 HTML Date Settings
You can customize the appearance and functionality of the date information displayed on the screen:
- Date Display: Toggle the display of the HTML date
- Size: Choose from small, medium, large, or extra large
- Color Theme: Select from dark, light, blue, sakura, or gold
- Font: Choose from sans-serif, serif, monospace, rounded, or digital
- Date Format: Select from full, short, year-month-day, month-day, weekday only, or custom
- Custom Format: Set your own date display format (when "custom" is selected for Date Format)
- Display Position: Choose from top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right
- Language: Select the language used for date display
8. Application Concept
Time Space Visualizer Sakura's main purpose is to visualize and appreciate time as an art piece. By converting the "flow of time," which is often overlooked in daily life, into beautiful visual expressions, you can experience time from a new perspective.
This app is not just a clock, but a time art piece based on the following philosophies:
- Aesthetic exploration of time - Visual expression of the abstract concept of time
- Meditative viewing experience - A calm viewing experience through gentle movements and effects
- Japanese aesthetics - Expression of Japanese aesthetic sensibilities such as "wabi-sabi" and "sakura"
- Interactive art - Viewers participate in the work by changing settings
9. Art Appreciation Guide
Time Space Visualizer Sakura is not just a tool for measuring time, but an art piece for aesthetically experiencing the concept of "time." You can obtain a richer viewing experience with the following approaches.
9.1 Recommended Settings for Appreciation
- DaySakuraTheme + SakuraEffect + Wave Orbit Camera - Expressing the atmosphere of Japanese spring
- NightSakuraTheme + FireflyTrailEffect + Spiral Camera - Fantastical night worldview
- TraditionalSakuraTheme + LanternLightEffect + Static Camera - Observing the flow of time in silence
- NightSakuraTheme + SakuraVoxelCloudEffect + Pulse Orbit - Futuristic and fantastical expression
- NightGardenTheme + FireflyTrailEffect + Smooth Right Orbit - Experience of gently touring a fantastical night garden scene with dancing fireflies
- NightGardenTheme + LanternLightEffect + Improved Wave Orbit - Appreciating the serene atmosphere created by a Japanese garden and lantern lights with wave-like movement
9.2 For Meditative Appreciation
In a calm environment, try appreciating with attention to the following points:
- Focus your consciousness on the movement patterns of the clock
- Observe subtle changes due to the passage of time
- Surrender to the movement of the camera
- Feel the changes in the background and the movement of particles
- Sense how layers of effects overlap
9.3 Exploration of Time Art
By trying various settings, you can explore different perspectives on time:
- Express the multilayered nature of time by combining different clock types
- Explore the emotional aspects of time by changing backgrounds and effects
- Experience the relativity of the speed of time flow through camera movement
- Experience changes in impression due to time of day by switching between day and night themes
10. Conclusion
Enjoy Time Space Visualizer Sakura. Beautifully visualize the flow of time and create your own space.
By exploring the settings, various expressions become possible. Please find your own combination.
Privacy Policy and Terms of Use
For information on how we handle your data and the conditions for using this application, please visit our Privacy Policy and Terms of Use.