TikTok Algo-rhythms

Website Design Mockup #1
Website Design Mockup #2
Game Design Mockup (part 1)
Game Design Mockup (part 2)

Inspiration

Over the past several months, TikTok's popularity has continued to rise among teens. In our free time, our team loves to scroll through TikTok and learn new dances together, from Renegade to Supalonely. Despite spending hours watching tutorials, we often still find ourselves struggling to remember the moves. As empirical studies have shown that gamification in education enhances learning and motivation, we decided to build an application that gamifies the process of learning TikTok dances. Since we are all collegiate athletes, we wanted to put a competitive spin on this pastime while offering a fun and safe experience during the COVID-19 pandemic. In addition, our team members are spread out across the country, so our application enables players around the world to compete against each other.

What it does

TikTok Algor-ithms is a web application that gamifies the experience of learning TikTok dances. Under "Learn," players are able to watch tutorials on TikTok dances that they would like to learn. Afterward, they can engage in the game under "Play," in which players can choose from dances, score points for hitting the right moves, and compete against their friends. Upon starting the game, players will need to allow the access their computer webcam in order for the application to detect their motions. Players can start the song and hit the targets at the appropriate times to score the maximum amount of points.

How we built it

We used JavaScript, HTML, and CSS to design and develop our website application. For templates and styles, we used HTML5 and Bootstrap. To incorporate motion detection, we used Benson Ruan's Motion-Detection-Virtual-Drums API and made some modifications to his code that were more suited to our game.

Challenges we ran into

As this is our first hackathon, we initially struggled to come up with a solid, feasible hack. Also, many of us are in different time zones, with some members on the East Coast, others on the Pacific Coast, and one member in Taiwan, so it was also difficult to settle on meeting times. Furthermore, most of us are not as familiar with JavaScript, but the entirety of our game was coded in JavaScript because this made it easiest to implement the motion detection.

Accomplishments that we're proud of

We are proud that we were able to submit our first hackathon project, as well as overcome several of the challenges listed above. This event has inspired us to attend more hackathons in the future, and we're very grateful for this experience!

What we learned

Attending the workshops and lectures gave us much insight into the process of a hackathon, as well as expanded upon our knowledge and skills in the technical field. Through extensive research and watching various tutorials, we learned JavaScript, better Git practices, and effective design techniques. Also, we learned that planning our design and implementation in the early stages, as well as coordinating roles and times to video chat were essential for collaborating on this project. We're all very fortunate that we have the resources and technology to communicate with one another and attend this virtual event.

What's next for TikTok Algo-rhythms

In future iterations, we would add more TikTok songs and sync the users' motions with the actual dance movements. We also think that implementing a scoring system where completing difficult moves scored more points would increase the competition and encourage users to learn more advanced dances. Also, we would like to learn how to compile data from users in real time so players could see where they stand in global rankings on a scoreboard. Thank you for reading and we would love to hear your feedback!

If the YouTube video audio doesn't work, here is the Google Drive link to the video!