Air Drum Station

Die Semesteraufgabe bestand daraus, eine interaktive und spielerische Website zu coden, mithilfe von HTML, CSS und auch JavaScript.

Die Programmiersprachen, die ich benutzt habe, waren HTML, CSS, JavaScript bzw. Node.js. Ich habe ein Handtracking-Package verwendet, um den Zeigefinger als Steuerung zu nutzen. Für das Schlagzeug selbst habe ich die ganzen Einzelteile eines Schlagzeuges ausgeschnitten und mit Photoshop jeweils in eine Farbe eingefärbt, um diese als "Buttons" für die jeweiligen Schlagzeug-Sounds zu nutzen. Eingeteilt ist mein Schlagzeug in Hihat, Kick, Toms, Snare und Openhat, dazu noch ein Clap, welchen ich aber grafisch als Hände dargestellt habe. Die einzelnen PNG-Datein habe ich dann nur noch passend innerhalb der Kamerafläche angeordnet und mit den passenden Sounds hinterlegt. Mithilfe von Garageband habe ich die Sounds einzeln exportiert, damit sie alle zueinander passen und auch mit meiner integrierten Loop-Funktion zusammen im gleichen Rythmus und Tempo spielen können. Der Drumstick ist an der Position des Zeigefingers fixiert, damit es ein stimmiges Gesamtbild am Ende ergibt und auch die Steuerung etwas leichter ist.

Das Ergebnis ist eine kleine aber spaßige Webanwendung, welche zwar noch nicht im Netz selbst funktioniert, aber innerhalb der Live-Server von VSCode gut nutzbar ist. Um nicht nur die bloße Webcam zu sehen, habe ich im Hintergund ein passendes Gif eingefügt, um das Visuelle noch einmal abzurunden.