DOODLE Space!

Video Demo

Project Description

DOODLE space! allows users to log onto a website and create drawings within a 3d space collaboratively.

Inspirations

We were inspired from two projects: Tilt Brush by Google and Place on Reddit.

Tilt Brush by Google

Tilt Brush allows artists to be in the artworks they create while drawing them in VR headsets. I had the opportunity to create something in Tilt Brush, it was so immersive unlike any previous drawing experience. Being able to wander among the stroked I created makes it feel more game-like and lively rather than a static artwork. It inspired us to create a 3d space in webpage for art creation.

Place

Place is a social experiment started on Reddit. The creator built a webpage that can support a large number of users to come up and create with colored pixels. This is what a million users created after 72 hours. They expected to get a messy result but the ending result surprised everyone with countless icons, country flags and even masterpieces by Van Gogh. It inspired us that collaborative art can bring us surprising results.

Development

Navigate Cube

In case our user loses track of his cube/ mistakes other cubes as his, the first thing I did was to use camera lookAt, so his view would always be fixed onto his cube. We wanted the user to use WASD or the arrow keys to navigate the cube. Considering that in a 3d space, moving forward would be moving forward on the camera’s facing direction, we used addScaledVector to measure the Vector 3 of the line between the user’s cube and his camera, then make it move forward/backward on that direction every frame with the key down.
Moving left/right, however, wasn’t as simple and obvious. Since there are countless lines that are perpendicular in 3d space to the camera-cube vector, ideally, we would want the one on the face that is horizontal to ur eyelevel. It was a bit challenging to code this direction out so I simply changed the object’s x coordination according to the world space. It didn’t work successfully.

We then only kept moving forward and backward (WS/up and down arrow key) to navigate.

Acquiring Colors

Originally, our plan was to create a collaborative 3d drawing web space but in order to acquire new colors, two users need to merge together to produce a random new color. We detect the distance between the user’s cube (myself) with other cubes, if the distance is below a certain number, the two cubes disappear.

This was easy to apply, but what wasn’t easy was the new Cube that needs to be navigated by one of the users. This requires us to have two cameras ready for every player, when the player merges, his camera 1 disables and his camera 2 enables. This led to countless errors when we transmitted the data through server and we had to give up this idea.
We changed to an easier approach where we built 8 globes that float around the space, each in a unique color. The user can simply pick a color by going in the globe and holding onto SPACE bar to draw. We also added moon texture to the globes to make it fit into the space theme better.

User Testing & IMA Show

From Monday’s presentation, we received some feedback saying that our project is located in a space background (skybox) but everything else isn’t space enough. And that even though users can collaborate in the space, they don’t have correlations between one another.
To improve it, we added moon texture to surrounding globes. We also used the detection originally designed for merging and creating sparkles when two users collide.
In IMA show, our project was so welcomed and loved by visitors. Many students even came back with their friends for a second play after they tried it for the first time. We also collected feedback that it would be better if we could export the 3d drawings people create instead of letting it disappear after refresh.