Memory_Rainbow of Time

An Interactive Online Music Album

Xiangyu Guo
MArch I 2021
Image
1 Capture from the interctive scene.

Thinking of the storage of memories, we often think of means like diaries, photo albums, Instagram, etc, which carry unforgettable moments in our lives in different forms of images or text for us to search, read and share. While memory is not only carried in a concrete form but also perceived in abstract ways...So I can’t help asking: Can memory be dialogued with? Can it be heard? Or even be able to interact with? the project is the exploration of an immersive and interactive experience with memory concerning these questions.

The UI of the system has two main parts which are the rendering mechanism and the controlling mechanism. The rendering of the 3d scene in the system is implemented with Three.js. And the objects are created with the DOM elements using CSS3DRenderer. Meanwhile, the eased transition/rotation is implemented with tween.js.

All the elements in the scene are implemented as classes that are Object-oriented and each class takes charge of the init/render/interact/update of their own corresponding elements. There are 3 kinds of elements: 1)Bubbles floating in scene 2)Animated elements in the background (animating according to the music, like petals or leaves)3)Animated elements in the background (predefined animation path, like clouds, stars) What’s more, the system supports traditional mouse-click interactions, while it also supports voice control.

Project video
Image
2 Music & user - interactive scene from photos uploaded by the user in autumn.
Image
3 Scene from photos uploaded by the user in spring.
Image
4 Scene from photos uploaded by the user in summer.
Image
5 Scene from photos uploaded by the user in winter.