タップタップ

「初音ミク『マジカルミライ 2025』」プログラミング・コンテスト応募作品です。
Produced for Hatsune Miku "Magical Mirai 2025" Programming Contest.

日本語はこちらをクリック

IMPORTANT NOTE: WEBCAM MODE WILL ONLY WORK IF HTTPS OR LOCALHOST

About

Inspired by Osu and Dance Evolution, Tappu Tappu is a fun interactive game that you can play with your hands. When the lyrics appear on the screen, catch them by tapping them with your hands!

If you are using a phone, tablet, or a old laptop, you can still play Tappu Tappu in cursor/touch mode.

Tappu Tappu uses on-device machine learning that utilises the latest technologies to do motion capture in real time. Therefore the default settings in this game are optimized for those with the latest technologies. But you can always change these settings to suit your needs if you are using an older device.

Special thanks to my younger sister, Aliza, for helping me draw the images for the webcam mode instructions.
Additional Note: The game might be easier to play while standing up, but you can also play it while sitting down. Also, if the game is too slow or not working, try to change to pose detection model in the settings.

Demonstration Video

Compatibility

In all cases, Chrome is the most recommended browser.
On Safari, iOS 16 and above is required.

Touch/Cursor Version

Able to run on most modern devices. However, the game may randomly get stuck on apple devices.

Webcam Version (With Default Settings)

• Runs Perfectly (60 FPS) on Fully Charged Apple Macbook Air with M1 Chip.
• Runs smoothly (About 28FPS+) on modern gaming laptops with power saver off (Tested on laptop with 20 Core Intel i7, 13th Gen + RTX 3050 6GB Laptop GPU).
• Mid-range laptops runs the app at around 10 FPS, app will also sometimes crash due to playerPosition stuck at 0 (Bug could not be fixed).

Installation

npm install

Building

npm run build

The compiled files to be hosted will be in a new folder named dist.

Testing

HTTP Server

npm run start

HTTPS Server

npm run build
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -sha256 -days 3650 -nodes -subj "/C=SG/ST=Singapore/L=Singapore"
cd dist
python3 ../HTTPS_server.py

Colour Config Builder for Segmentation Mask

You may need to delete .parcel-cache before executing this command.

npm run test4

Major Third Party Libraries/Assets Used

Bulma CSS Framework

Licensed under MIT License. See Bulma at https://bulma.io/.

jQuery

Licensed under MIT License. See jQuery at https://jquery.com/.

easing-utils

Licensed under MIT License. See easing-utils at https://github.com/AndrewRayCode/easing-utils

Google Mediapipe

Licensed under Apache License 2.0. See Google Mediapipe at https://ai.google.dev/edge/mediapipe/solutions/guide and https://github.com/google-ai-edge/mediapipe.

Google Font Icons

Icons in the assets/icons folder are downloaded from Google Material Design Icons which is licensed under the Apache License Version 2.0.

Yusei Magic Font

Yusei Magic Font at assets/fonts/Yusei Magic folder are downloaded from Google Fonts which is licensed under the SIL Open Font License, Version 1.1.

Parcel

Licensed under MIT License. See Parcel at https://parceljs.org/

parcel-reporter-static-files-copy

Licensed under MIT License. See parcel-reporter-static-files-copy at https://github.com/elwin013/parcel-reporter-static-files-copy

TextAlive App API

TextAlive App API is a JavaScript library that allows you to develop web applications (lyric apps) that display lyrics in time with the music. For more information about TextAlive App API, please visit the TextAlive for Developers website.