Echolocation

• 

  Different Beats

• 

  Different Beats

• 

  Empty Grid

• 

  Server Collaboration with WebSockets

Inspiration

We were inspired by an esoteric programming language called Orca that provides a way to generate music with a grid and many different types of notes, signals, etc. However, it is very complicated to use, and doesn't provide collaboration features. We decided to build a real-time collaborative music builder that still provides a non-traditional interface somewhat like Orca. We were also inspired by Reddit's r/place, where all of Reddit can contribute pixels to a giant canvas and build a creative work at the end. We thought bringing together strangers by adding "musical pixels" to a grid would spark connection and creativity.

What it does

Echolocation allows users to edit each square in the grid. They can add note blocks, which represent instruments tuned at specific pitches. Then they can add metronomes which send signals at a user chosen interval. All signals move at the same speed. When a signal from a metronome hits a note block, it plays. There are also NoteAdjustor blocks which send signals at a user chosen interval and when they hit a note block, they increment the note (for example, an A5 -> B5). Users can join other user's rooms and can real-time watch, edit, and collaborate on their work.

How we built it

We used React, Tone.js, Vite.js, Socket.io, Express. We have a server that uses web sockets to connect users, and our frontend uses React and Tone.js to make a user-interface with Tone.js providing synths.

Challenges we ran into

Organizing the structure of our code, we had a hard time working with concepts like inheritance and composition, and deciding how to organize the react functions. Sending and propagating signals across the grid at regular ticks also proved difficult. Working with Tone.js was hard too, and implementing multiple instruments was tough.

Accomplishments that we're proud of

The challenges we ran into that I described in the last section were our most difficult. Solving these were our biggest and proudest accomplishments. Also coming up with this idea collectively was something we're proud of too.

What we learned

We learned more about React, fullstack development, working with audio, and working as a team.

What's next for Echolocation

Longer term projects where people can fork and remix projects (maybe stored on Github), exporting to more advanced music editors like FL, as this is only meant for whipping up quick music for inspiration. Challenges and games where it teams up groups of strangers and has them create something in a time limit.

Built With

• express.js
• node.js
• npm
• react
• socket.io
• tone.js
• vite