This is a submission for the The Pinata Challenge

What I Built

I built a music app where you place monsters on the scene and record custom audio for each of them. The recordings can be anything—mouth beats, hand-made noises, or whatever sound you can think of. Each monster loops its sound, turning the scene into a lively messy audio experience!

All visual assets were created using ComfyUI.

Tech used:

• PixiJs
• ToneJs
• Vue
• ComfyUI (SDXL & Flux Dev)
• Pinata
• Node for the backend API

Demo

Try it out here: https://noisy-monsters.onrender.com

You can also share your creations and let others experience them:

https://noisy-monsters.onrender.com?share=QmUzrpzHcwDfKuTqpV19L3mdZ8J84XDE8WCi3Fthx1z8Ub

My Code

More Details

The app uses Pinata to store and share the state of the scene along with the user-recorded audio. When you click "Share" all recorded audio is uploaded to Pinata's IPFS, along with the app's state (the monster positions, and which sound is associated with each monster) in JSON format. The CID is embedded in the URL as ?share=cid.

When someone opens the app with a ?share=cid link, the app fetches the JSON data from IPFS and reconstructs the scene with all the monsters and sounds intact, allowing users to share their creations easily!

Notes

I only discovered this challenge two days before the submission deadline, so I had to finish the app as quickly as possible. As a result, there are several features I'd like to improve or add, such as:

• Intro screens and clearer instructions on how to play.
• Hover states for better UI feedback.
• Some feedback when user starts recording.
• Error handling.
• Various code optimizations.
• Add different audio effects / modifiers for each monster.
• Rewrite the code, Vue was totally not necessary.

Despite the time crunch, I'm excited to share this project and plan to keep improving it!