Ping Pong Paint

Inspiration

We knew from the get-go that we wanted to use the phone's proprioceptive capabilities to make an immersive and fun painting experience. After a short brainstroming session in the forest, we were dead set on our idea.

What it does

The PPPP allows users to make and save paintings by using their phone as a ping-pong paddle, hitting balls against a board, resulting in colorful explosions.

How we built it

We used Node and the Express.js package to host a webserver, as well as the socket.io package to allow fast communication between the server and the client. We used the Three.js library to render 3D graphics, mainly the scene, the painting, and the ping-pong ball. We used a cloud server to host the website with its own domain https://pingpongpaint.ca/.

Challenges we ran into

• Managing the physics of the ball.
• Organizing web socket communication between computers and phones via a webserver.
• Learning how to code and use git.

Accomplishments that we're proud of

We had fun both making and playing the game. This was a technically challenging project for us, so we're happy to have pushed our limits.

What we learned

• We gained familiarity with git, Three.js, Express, and Socket.io.
• We learned about the process of getting a domain name and an SSL certificate.
• RedBull gives you wings.

What's next for Ping Pong Paint

• Allow users to upload their own images
• Cleanup the code. Remove bloat.
• Unify the style and theme of the website.

Built With

• css
• express.js
• git
• github
• html5
• javascript
• node.js
• socket.io
• three.js