Concept Development
For the final project, I decided to team up with Jamie and create a multiplayer space. We found some inspirations that enlightened us: Tilt Brush, Place and Snake Off. Tilt Brush is a VR application by Google, where players can put on VR glasses and draw 3D artworks. Place is a collaborative project and social experiment hosted on Reddit where all registered users could edit an online canvas by changing the color of each pixel. And Snake Off is an upgrade version of the classic game Snake. It became a multiplayer game where multiple players can play together and compete with each other.
Based on these three inspirations, we came up with our project, Doodle Space! Doodle Space! is an interactive 3D space on website that allows users to create 3D artworks collaboratively. The user can use the mouse, the spacebar and “W”/”S” on the keyboard to control their cube. Each user’s cube will start with a white color, and the user can change the color by bumping into surrounding color balls.
Data Transformation
Since this would be a multiplayer game, data transformation became extremely important. We decided to use socket.io to transfer the data. The data we need to emit includes the position, the color and the mode of the cube, and the dots painted by the users. However, the process of dealing with the data was not easy. After we seeked help from Professor Moon, we finally managed to emit all the data we needed. We created two dictionaries to store the data, one is “userData” (to store the users’ own data, including the id, the mode, the position, and the color code), and another one is “allUsersData” (to store the user data from all of the users).
For the user’s own cube, at first we binded it onto the camera so that it would stay at a fixed position on the screen. We also used “getWorldPosition()” to get the position of the cube relatively to the world. However, after Professor Moon taught us to use “controls.target”, the user’s perspective became more natural and the user was able to see the rotation of the cube when changing the camera’s perspective. In “allUsersData”, we also emitted the position of the dots drawn in the space when the user presses the spacebar.
User Interaction
There are five kinds of interactions we created for this project. The first one is to change the direction of the user’s movement by dragging the mouse. Since we set the target of the camera as the user’s own cube, we can simply use mouse to change the moving direction of the cube.
Based on this interaction, we created the cube’s movement of going forward and backward by pressing “W” and “S”. Because the mouse has already allowed the user to change the direction in all degrees, there’s no need to create the movement to go right or left.
One more important interaction is to draw in the 3D space. When the user pressed the spacebar, there would be a trail of dots left on the path the cube went through. For this interaction, we also created the mode for each user to determine whether the user pressed the spacebar or not. Only when they press the spacebar, will the system update the position data to push the dots.
To change the color of the drawings, we displayed several “planets” in different colors to rotate around the center. Users can move their cubes to bump into these planets and change the color to the corresponding ones of the planet. We created an array for the planets and their color code. By detecting the distance between the planet and the cube, we can change the cube’s color accordingly.
Last but not least, there is an interaction between different users. At the beginning, in our proposal, we wanted to make a merge effect to combine two users’ cube into one. However, due to time limit, we gave up this idea and developed a new one. We decided to make some visual effects when two users collide. We set the distance limit to trigger the push of some particles, and in the Class “Merge”, we applied a force and random velocities to these particles and made it spread like fireworks.
Visualization
In terms of the visualization, We have styled the whole interface to look like outer space. Users will draw inside a big sphere with a skybox of the galaxy. The rotating planets around them are covered with textures of moon and we also added different colors on them. To highlight users’ drawing, the environment was set to be darker on purpose, and their drawings would be in brighter colors. We also applied illuminated texture onto the “fireworks” which appeared when two users’ cubes collide.
Records from the IMA Show and Project Demo
Reflection
During the process of completing this project, I found that creating a multiplayer project was not easy. There are so many aspects and components you should consider about, especially for the data transformation. I really enjoyed being challenged and solving the problems all the time because I can always learn a lot during practices.
However, even though we realized most of our ideas, I still discovered some aspects that we can improve on in the future. First, during the IMA Show, some audiences mentioned that they want to keep what they’ve drawn into a space or as a screen shot. Since we set the limit for the number of dots in order to make the project go smoothly, we didn’t consider about people’s needs to keep their work. For further improvement, we can create a database to store all of the drawings from users at a certain frequency. Second, some people complained about dragging the mouse constantly was tiring. While changing the computer’s custom gestures can make this interaction a little easier, it doesn’t apply to every computer. So in the future, we can also adjust the method of interaction, perhaps changing from dragging and dropping the mouse to simply moving it around.
Finally, big thanks to my partner Jamie and Professor Moon!!!
(Live Site: https://somie-wp2ws-final.glitch.me)