Commissioned Project

Amorphous Hotel

A Nuxt.js web app of an ever-changing virtual hotel that discusses the relationship between human needs and site

Amorphous Hotel

❔About

The content of Amorphous Hotel was inspired by the artist residency of @chukellychu2 and @echohuiecho at @eaton.hk. They observed that the different arrangements of details in the hotel response to what our heart desires.

.

Our surroundings are full of sensory cue are such as odour, colour, arrangement, etc. These elements have succeeded in speaking to us, in their peculiar abstract language, of the important themes of our lives. Are white sheets really white? Why is aroma related to class? How does the classification of tableware reflect an alternative imagination of interpersonal relationships? Please explore the Amorphous Hotel to find out more.

🔨Technologies

Nuxt.js
Three.js
p5.js
Matter.js
Firebase
JavaScript
REST
Axios
Sass/SCSS
Bootstrap 5

🔗Link(s) to the project

Live Site

🌟Features

WebGL

  • The landing page, washing suite page, and the color kitchen are developed with Three.js library
  • The particle system in the smell lobby page is developed with p5.js library

Voting Feature

  • API consumption with Axios for fetching data from Firebase's Firestore Database
  • Fetch real-time result from firebase when data is updated by any user

Tunnel Interaction (Landing page)

Mouse control (available on non-mobile devices)

  • The tube mesh and camera is updated in real time by the mouse's position, hence having an visual effect of a twisted tunnel

Touch control (available on mobile devices)

  • The tube mesh and camera is updated in real time by the touched position, hence having an visual effect of a twisted tunnel

‍

Particles Interaction

Mouse control (available on non-mobile devices)

  • The particles near the mouse's position will be pushed away

Touch control (available on mobile devices)

  • The particles near the touched position will be pushed away

Keyboard Control (available on non-mobile devices)

  • Control camera movement in the WebGL canvas by the up / down arrow key or W / S key

Tilt Control (available on mobile devices)

  • Control camera movement in the WebGL canvas by the mobile orientation in the beta axes

Physics Engine

  • The 'chopsticks' physics and motion are created with Matter.js library and Three.js library

Vuex (Storing guest's name)

  • At the end of the journey in the landing page, user are prompted to input the name
  • The guest name is stored in the Vuex state, which is used for greeting the guest every time when they reach the next room

Deployment

  • Firebase hosting service for both the frontend and the database

‍

👏Acknowledgements

  • The landing tunnel is inspired by Infinite Tubes by Codrops, the code is re-engineered with translation in order to implement in Nuxt.js, and is updated with the latest Three.js released version
  • Curves' formula in the Washing Suite page are collected from Nik Lever's example
  • The camera motion following the meshes' curves is inspired by Nik Lever's example, the code is re-engineered with translation in order to implement in Nuxt.js, and is updated with the latest Three.js released version

‍