by Vibert Thio

Jessica and I had a small hackathon during the weekend. We were trying to build the first prototype of "Interactive Music Video".

In the beginning, we decided together what the name of the project should be. It's "Visong". We write our thoughts and discussion on to the whiteboard in the picture below.

Our goal is to build an experience of interactive music video, which is a regular music video if the user doesn't do any engagement. In order to do that, the visual rendering must be seperated into 2 different layer, the static one and interactive one.

Also, we want to have enough freedom on the visual design side. I put 2 <canvas> elements with a regular DOM layer in between. Therefore, I can implement several different visual effects with each layer later.

In the original design by Jessica, we want to make user be able to drag the sun around. It can be implemented by both DOM or <canvas>. I am not sure which solution is optimal in this application right now. I have to make the decision about this later!

For now, I just use a draggable circle-shaped <div> to implement the interactive element. I put a Three.js basic scene into the background <canvas> element as a placeholder.