Frontend Struktur

Verwendete Tools:

Funktion	Tool & Framework
Container	Docker
Docker-OS	node:12
Musical Content	Tone.js
Visual Content	React.js & react-three-fiber
Package Manager	yarn

KeyDown Events

• Space starts/stops Looprecord
• Number Keys (1-9) mutes/unmuted Looper with id (1-9)

Global State

The way we decided to manage information that needs to be shared between components

Wiki Global State

UI Layout

• Loop - start/end a new loop
• Random notes - play random tones and create random dot movement
• Record - record the created music and download
• Mixer - change the volume of the different canvases
• Open Project - open a project from the database
• Save Project - save the project into the database and get a share link
• Help - open a help dialog