Arcanagraph

Home Page
Settings for hand preference and profile picture
Gameplay

Inspiration

We were inspired by the theme of DiamondHacks for our fantastical theme. We wanted to build something with a “magical wand” and combine it with something useful, ultimately deciding on an educational math game designed for kids.

What it does

Arcanagraph is an interactive way for younger audiences to gain intuition about math functions with a fun, magical, and unique game!

How we built it

Frontend: Typescript, CSS, and HTML

Backend: Node.js, Typescript, Express

Tools/API’s: Mediapipe for CV, Websocket for server

Database: PostgreSQL, Firebase

Pixel Art: aseprite

Challenges we ran into

One challenge was that this is all of our first hackathons, so we didn’t have experience understanding a reasonable scope for the project in our timeframe. As a result, we had to constantly shift scope and priorities for our project.

We ran into issues with scoring our graphs. We had to learn to use various math algorithms like LaPlacian smoothing and signed distance functions in order to score the graphs by accuracy in their position and shape.

Our earlier issues centered around our CV pipeline. We found that pointing directly at the screen wouldn’t detect any pointer finger.

We ran into various challenges putting our project on an apache server.

Accomplishments that we're proud of

We’re proud of working through the idea to production to deployment process and ending with a working product in our first hackathon. We’re proud of how the entire gameplay loop works and the website's aesthetic as a whole, which has a whimsical theme that we feel fits well with our target audience :)

What we learned

We’ve learned how to build a full-stack project in a short timeframe, as well as how to integrate 4 people’s work into the final product. We all learned about media pipe throughout our tinkering. Along the way, we had our friend Kevin help us with agent skills!

What's next for Arcanagraph

We want to implement shapes and other subjects such as beginner languages where users write out characters from a certain language or geography by drawing out a country's border.