Start Menu
Eye Tracker
Game Screen
Shop

Inspiration

In today's technology world, constant distractions, such as endless scrolling or short-form social media videos, make maintaining focus a significant challenge. We wanted to create a productive and cute tool to help students maintain concentration and boost productivity while working on their laptops or computers. By turning the act of studying into a shared experience with a digital companion, we aim to minimize the distractions caused by our phones.

What it does

Fuzzy Wuzzy Study Buddies is a gamified productivity tool that uses eye-tracking technology to monitor user focus. The core mechanism rewards sustained attention. By "locking in" and focusing on the screen, users earn virtual currency as passive income. This currency can be used to purchase accessories for their digital study pet, creating an incentive to maintain focus for longer periods.

How we built it

As a team of four, we successfully delegated responsibilities based on our respective strengths:

Machine Learning: To achieve high precision eye tracking, we implemented a regression engine utilizing the Least Squares Method to map raw facial landmarks to 2D screen coordinates. By minimizing the sum of squared residuals, the model generates a best-fit surface that compensates for head tilt and environmental depth. The Regression formula is given by: $$ y = \beta_0 + \beta_1 x_1 + \beta_2 x_2 + \dots + \beta_n x_n + \epsilon $$ Where $ \beta_0 $ is the bias, $ \beta_i $ represents the feature weights, and $ \epsilon $ is the residual error. Through the machine learning process, the AI maximizes accuracy by systematically minimizing the error term, $ \epsilon $. By applying the least-squares method, the engine calculates the optimal values for each weight ($ \beta $), ensuring that the predicted gaze points align with actual coordinates for a stable and responsive user experience.

Software Integration: The development process involved bridging the front-end user interface with complex back-end logic, effectively connecting the focus-tracking model to the general application layout. This integration included building the main dashboard where the pet resides, keeping track of the money earned, and developing a functional shopping cart page. We focused on ensuring that the selection of accessories correctly updated the pet's state and appearance across different pages of the application.

Creative Assets: The visual components, including all the backgrounds, animal characters, and collectible accessories, were hand-drawn and custom-designed to foster an emotional connection. We implemented a Dynamic Mood System that serves as a real-time feedback loop between the eye tracker and the character's behavior. When the tracker confirms active engagement, the animal remains in a "happy" state as positive reinforcement. However, if the data detects attention drift, the character transitions to a "sad" state, signaling that the user’s attention has deviated.

Attributions This project utilizes WebGazer.js for foundational client-side eye tracking, which served as the core library for processing visual data points and facilitating our regression-based gaze mapping.

Implementation Process

We first developed the initial page where users select their preferred animal companion. The core loop involves activating the eye-tracking feature, which triggers the passive income reward system when focus is detected.

Challenges we ran into

The primary challenge we faced was the integration and merging of the data-intensive eye tracking model with the rest of the application code. Ensuring compatibility and seamless data transfer between the math-heavy components and the UI required extensive debugging. We also found that calibration becomes inconsistent when screen sizing changes. While highly accurate on the specific resolution used during calibration, minimizing the window impacts the model's precision. Furthermore, organizing the layering for various animal characters and their corresponding accessories proved difficult, requiring a deep structural rethink of how objects are categorized.

Accomplishments that we're proud of

As this is everyone's first hackathon, we are proud to have delivered a fully functional, end-to-end prototype that includes real-time eye tracking and a working reward economy. Successfully integrating the regression model so that it accurately interprets focus within a front-end environment was a major technical achievement. We also completed a cohesive and compelling set of initial artwork that defines the visual identity of the project, from the pets themselves to their various accessories.

What we learned

This project provided invaluable experience in implementing regression models for real-time data interpretation and taught us the complexities of balancing data-heavy back-end processing with a smooth user experience. We gained a deeper understanding of full-stack integration and the importance of strategic delegation. By assigning tasks based on specialized skill sets, such as mathematics and creative design, we were able to build a more sophisticated product than any of us could have created alone.

What's next for Fuzzy Wuzzy Study Buddies

We intend to enhance the application significantly by expanding the available content, including more complex animations, interactive features, and a wider variety of background styles and animal characters. On the technical side, we plan to improve the accuracy of the eye-tracking model to make it more resilient to different screen resolutions and environmental lighting. Additionally, we aim to optimize the application for lower resource consumption so it can run efficiently in the background during intense work sessions.