Skip to content

Project Haiku

Role Period Engine
Designer & Engineer Oct 2020 - May 2021 Cocos Creator, Agora, WebAudio

Screenshot

Video

Performance

Walkthrough

Description

This project is an interactive music performance experience. I cooperated with musician and artist Clore Cai and tried to provide a space for the audience to contribute to the sound field through their new organ: the smartphone. I used Cocos Creator to create a juicy user interface based on Html5. I utilized WebAudio to make it possible for the players to generate and modify the music from their smartphones. I also programmed for the client-master communication features using the chatroom framework by Agora to help musicians and VJ to adjust their theme according to the audience's state and the whole sound field.

Play the demo on gitee.io or 42web.io

Instruction

Please use Safari on iOS / iPad OS to play this demo. This version does not contain VJ function, and is running locally.

  1. After input your nickname, press Start button in the interface. Then the webpage would ask for access of orientation, please allow that request to have the game work well with Gyro.
  2. Wait for seconds. If next scene not loaded after several seconds, please press Start button again. No need to press too much times, please understand that this demo is host on free services so it might be slow in some case.
  3. The symbol of succeeded loading new scene is you could see a light wight screen. Try to swing your phone, and feel the spread of sounds.
  4. Once you get bored of that swinging instrument, please stop interacting, waiting for the screen returns to blank.
  5. Then try to hold your touch on the screen. You can now enjoy the second half experience of this project, which basically based on touch.