HandScape

HandScape Landing Page
Sandbox Environment
Hand Tracking
Logo

Inspiration

The inspiration for the project was something similar to Minecraft's creative mode. We wanted users to be able to manipulate and edit at will to create anything they pleased. The catch to the project was being able to use your hands to manipulate the objects.

What it does

Our project leverages MediaPipe to spawn objects into a Three.js environment using your hands! You can resize and reshape these objects by adjusting hand positions.

How we built it

We developed HandScape using React, Next.js, MediaPipe, Three.js, and TailwindCSS.

Challenges we ran into fix

We ran into various challenges while developing HandScape. The biggest challenge by far was getting MediaPipe to recognize the movement of our hands and then move the object. Another one of our challenges was configuring the hand positions to work properly, as certain movements performed unintended actions.

Accomplishments that we're proud of

Some accomplishments we're proud of, starting with the biggest one, is honestly getting the project working. There were many moments as a group where we collectively wanted to scrap the project and pivot to another endeavor. However, we persevered and pushed through frustrating errors to a project we're satisfied with submitting. While that was definitely the biggest accomplishment, the next was learning about and utilizing MediaPipe and Three.js, two libraries the team wasn't familiar with.

What we learned

We developed an understanding of Three.js, learned how to sync Mediapipe with hand movements, and learned how to communicate with one another to effectively solve issues.

What's next for HandScape

Regardless of whether we win or lose, we plan on refining the project more for the future. The plan is to add physics and other small features that would make the project more interactive.