HexReflex

HexReflex

Bei HexReflex handelt es sich um ein Spiel, das auf Reaktion, Zeit und Aufmerksamkeit basiert. Um Punkte zu sammeln und den Highscore zu übertreffen, müssen die Spieler während der Live-Übertragung auf eine mit Buttons ausgestattete Box schlagen.

Erste Überlegungen

Die erste Ausstellung, die wir manchen wollten, war sehr groß und aufwendig. Wir wollten eine Wand mit verschiedenen Hindernissen aufbauen, die man in einer bestimmten Zeit überwältigen muss, um zu gewinnen. Ein Hindernis wäre z.B. ein Rad so lange drehen, bis die LED aufleuchten würde.

Die Ableitung danach wäre dann eine Verkürzung der letzten Idee. Wir wollten, anstatt einem riesen Aufbau der verschiedenen Hindernissen, eine Wand projizieren, die mit Buttons bestückt ist und man mit Konzentration und Geschick die richtigen Knöpfe wählen muss.

Finales Thema

Unser finales Projekt besteht aus einem WhackAMole ähnlichem Geschicklichkeitsspiel, bei dem man in einer bestimmten Zeit die Buttons drücken muss. Es gibt Bomben die man umgehen muss und Extrapunkte für einem besseren Highscore. Die Buttons sind an einer Box befestigt und man muss sie mit dem Zeitdruck rechtzeitig drücken.

Das Design besteht aus Hexagons und einem minimalistischem Farbschema aus weiß, grau und orange. Die jeweiligen Hexagon Buttons wurden je nach Art des Buttons (Normal, Bonus und Bombe) von der Kontur aus eingefärbt.

Making Of Video

Technische Umsetzung + Codebeispiele

Zufällige Zielauswahl mit Wahrscheinlichkeiten:

Eines der wichtigsten Funktionen war es, die Hexagone zufällig aufleuchten zu lassen, um es nicht durchschaubar zu machen. Wir haben die einzelnen farbigen Buttons einen bestimmten Zahlenbereich zugeteilt, welches mit random Number aufgerufen wird.

function chooseTargetType() {
    const randomNumber = Math.random();
    if (randomNumber < 0.15) return "red";
    if (randomNumber < 0.32) return "blue";
    return "orange";
}

Handerkennung und wegwischen:

Die Hand-Erkennung nutzt MediaPipe Hands, das über die Webcam die Position der Handgelenke in Echtzeit erfasst. Diese Koordinaten werden dann auf das Canvas übertragen, um dort die Hexagone innerhalb eines bestimmten Radius zu "löschen" – so entsteht der Eindruck, man wischt die Formen mit der Hand weg.

function handleHandResults(results) {
    const hands = results.multiHandLandmarks;
    if (!hands || hands.length === 0) return;

    const handX = hands[0][9].x;
    const handY = hands[0][9].y;

    const canvasX = handX * canvasWidth;
    const canvasY = (1 - handY) * canvasHeight;
    eraseHexagonsAt(canvasX, canvasY, ERASE_RADIUS);
}

Sound-Synthese und Audio-Dateien

Die Sound-Effekte werden live im Browser mit der Web Audio API erzeugt – wir erstellen programmatisch einen Ton-Erzeuger, stellen die Tonhöhe ein und lassen die Lautstärke kurz an- und abschwellen. So entstehen die Feedback-Töne ohne externe Sound-Dateien.

function playOrangeSound() {
    const ctx = getAudioContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.frequency.value = 880;
    osc.type = 'sine';
    gain.gain.setValueAtTime(0.3, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.12);
    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.12);
}

Herausforderungen und Reflexion

Die größte Herausforderung war es am Anfang, ein passendes Thema zu finden, das wirklich Spaß machen würde. Es wurden viele verschiedene Ideen durchdacht und sorgfältig die Vor- und Nachteile abgewogen. Am Ende fiel die Entscheidung für ein physikalisches Spiel, bei dem Konzentration und gleichzeitig körperliche Aktivität gefragt sind.

Die ersten Entwürfe waren viel zu groß angelegt. Geplant war eine komplette Wand mit Buttons, doch dafür fehlten sowohl die Zeit als auch der Platz. Also wurde das Projekt deutlich verkleinert und auf die wesentlichen Funktionen konzentriert. Die Lösung bestand darin, statt einer ganzen Wand eine kompakte Box mit mehreren Buttons zu bauen. So entstand schließlich die Gamebox.

Eine weitere Herausforderung war die Verkabelung der Buttons und deren Verbindungen. Es gab vorher kaum Ahnung davon, wie man Kabel richtig anschließt und verbindet. Doch dieses Problem löste sich zum Glück sehr schnell, und es konnte ohne größere Schwierigkeiten der erste Prototyp gebaut werden.

Die Zusammenarbeit im Team war eine der wertvollsten Erfahrungen während des Projekts. Durch regelmäßige Absprachen und eine klare Aufgabenverteilung konnte jedes Teammitglied seine Stärken einbringen. Besonders hilfreich war, dass bei auftretenden Problemen gemeinsam nach Lösungen gesucht wurde, anstatt dass jeder für sich allein kämpfte. So konnten Hürden wie die Einrichtung der Kamera oder die Verkabelung der Buttons deutlich schneller bewältigt werden.

Fazit

Am Ende dürfen wir wirklich stolz auf das sein, was wir geschaffen haben. Es war ein intensiver Prozess mit vielen Höhen und Tiefen, aber jede Herausforderung hat uns gezeigt, dass sich Durchhaltevermögen lohnt. Besonders schön war für uns zu erleben, wie aus einer anfangs viel zu großen Idee Stück für Stück ein greifbares Produkt wurde. Wir haben nicht nur technisches Wissen gewonnen, sondern auch gelernt, wie wichtig Vertrauen und Unterstützung im Team sind. Rückblickend war es eine tolle Erfahrung, die uns alle ein Stück weitergebracht hat.