The perfect shot

trajectory display
statistics

Inspiration

We believe basketball is for everyone. Greater players like Lebron James may have practiced alone as kids, but you don't have to go at this alone. With the Perfect Shot, you can go from average to good, and good to great.

A few of us play basketball in our free time, and not having an app to track our shot-making progress can be super annoying when one day you are hitting all your shots and the next you can’t make a shot to save your life. Having a way to see what has changed about your shot would be immensely helpful.

What it does

It improves your basketball shooting performance by highlighting the subtle flaws that are killing your game. Immediate feedback such as trajectory and optimal angle reveals areas of weakness. Frame by frame control and statistics lets users identify details that others would miss. Fast and easy visual tracking shows the player how exactly their shots are made. All these benefits are provided in a simplified and curated display that makes the app accessible to experts and beginners.

How we built it

The core of our web app is visually tracking a basketball. It is implemented through OpenCV’s color filter and edge detection functionalities, allowing us to get rid of extra details in an image and only track the basketball. Visual tracking is handled by our server. The server at first maps the basketball's trajectory and compares it to an ideal trajectory. From there, valuable data such as optimal angle and optimal velocity can be calculated and sent to the client device. On the client device, HTML’s canvas element and its associated functions are used to visualize this data. They allow us to overlay the basketball trajectory directly on top of user videos.

Challenges we ran into

Our biggest challenge was interacting with the videos in the frontend. It’s very easy to get image metadata in the backend and to draw over the video, but you can’t do nearly as much in the browser. We didn’t want to send over almost double the data just so that the server could handle all things video related, so it took us a while to solve each of these problems in the frontend.

Accomplishments that we're proud of

We had a lot of success with tracking the basketball and detecting the basketball hoop. One of our initial doubts when we first started was how feasible it would be to get data from the video, and if the user would need to input most of it. But because the tracking and detection worked so well, the user doesn’t need to input much information at all after uploading their videos.

What we learned

~~We learned that you start losing your mind after around 26 hours without sleeping and only coding.~~ We learned a ton about how to balance keeping our team’s code readable and working as fast as possible. For some of us it was difficult to remember that we couldn’t afford to waste time refactoring, and for others we needed to remember that the code needs to be semi-readable so the rest of our team could understand it.

What's next for The perfect shot

The Perfect shot is great for stationary shooting where the player sticks to one position. However, our visual detection algorithm fails to adequately capture moving players. We plan to add an AI algorithm that is able to distinguish between the ball and the players, so that we may move on from tracking just the ball to balls and players. Additionally, we hope to make our web app simpler to use by launching it on mobile devices. iPhone and Android users will be able to record directly on their phone and see results immediately.