Ach, das studiert ihr?

1. Die Idee

Unsere Idee war, ein interaktives Spiel zu entwickeln, das aus mehreren Stationen besteht und den Studiengang auf spielerische Weise erlebbar macht. Die Teilnehmenden lernen die Inhalte und Schwerpunkte des Studiengangs durch verschiedene interaktive Aufgaben kennen.

Ein zentrales Thema unseres Konzepts war Upcycling. Dahinter steht die Idee, mit einfachen Mitteln und kreativen Lösungen eine möglichst große Wirkung zu erzielen.

Das Konzept verbindet somit Interaction Design mit einem spielerischen Stationssystem und vermittelt gleichzeitig unsere Werte von Kreativität, Nachhaltigkeit und wirkungsvoller Gestaltung.

In den nächsten Zeilen erklären wir die Umsetzung unseres Projektes!

2. Vom ersten Konzept zum fertigen Spiel

Der Weg zum finalen Spiel war eine echte Design-Reise. Ursprünglich wollten wir eine große, zentrale Retro-Quizshow mit Sensoren und Handtracking auf einer Großbildleinwand bauen. Schnell merkten wir , dass das technisch extrem aufwendig, ortsgebunden und unrealistisch war. Zudem verstrickten wir uns in den Folgeideen in komplexen Serverstrukturen.

Der Durchbruch kam, als wir uns fragten: Wie setzen wir den Fokus direkt auf die Interaktion der Besucher:innen mit unserem Projekt? Wir entschieden uns für dezentrale Stationen und ein hybrides System: Die Aufgaben werden vor Ort gelöst, die Codes analog auf einen Laufzettel notiert und am Ende an einem zentralen Screen ausgewertet. Weniger technische Komplexität bedeutete am Ende deutlich mehr Spielspaß.

3. Die Stationen

• Station Anfang: Der Startpunkt befindet sich an einem Stehtisch im Foyer. Die designten Zettel sind mit Crepeband an der Wan verteilt, die Besucher müssen sich jeweils einen dieser Zettel von der Wand nehmen. Ein großes Plakat kennzeichnet den Startbereich und erklärt die Spielregeln.

• 

• Station 1 Grundlagen der Gestaltung: Die erste Station behandelt das Modul Gestaltungsgrundlagen. Hier befinden sich neun Würfel beziehungsweise Kartons, die auf einer Seite weiß und auf der anderen Seite schwarz bemalt sind.Diese sind auf einem Podest aufgestellt.Ein Plakat erklärt die Aufgabe. Den Spielenden werden drei Adjektive vorgegeben, die sie mithilfe der Würfel als Komposition visualisieren sollen. Auf dem Antwortzettel befindet sich bereits ein entsprechendes Raster, in das die schwarzen und weißen Felder der Würfel mit Codes übertragen werden. Beim Bewegen der Würfel erzeugt ein mit p5.js entwickeltes Programm Klänge, die über eine Musikbox ausgegeben werden und den Spielenden unter Zeitdruck setzen soll.

• 

• Station 2 Programmierung: Die zweite Station beschäftigt sich mit dem Modul Programmierung. Unter einer Treppe hängen insgesamt 16 gelb angesprühte CDs durch Wollfäden an mehreren Mobiles. Die Mobiles sind aus alten Ästen und Draht gebaut. Ein Plakat erklärt den Ablauf des Spiels.Die Besucherinnen und Besucher bringen die empfindlich aufgehängten CDs und Frageblätter durch Luftstöße und Bewegungen in Bewegung. Die jeweiligen Antworten zu den Frageblättern sind auf den CDs verteilt und müssen gefunden werden. Auf den CDs befinden sich eine Form, diese wird anschließend auf dem Antwortzettel eingetragen.

• 
• 
• 
• 

• Station 3 Farbdesign: Die dritte Station beschäftigt sich mit dem Thema Farbdesign. Ein iMac bildet das Zentrum der Station. Auch hier erklärt ein großes Plakat den Spielablauf. Zusätzlich befinden sich mehrere verschiedenfarbige Luftballons an der Station.Die Aufgabe besteht darin, den auf dem iPad angezeigten Farbkontrast mithilfe der Luftballons nachzustellen. Die Ballons müssen dabei so vor der Kamera positioniert werden, dass sie die angezeigten Farbfelder möglichst genau ausfüllen. Das mit p5.js entwickelte Programm erkennt den Farbkontrast und erzeugt anschließend einen Code. Dieser wird ebenfalls auf dem Antwortzettel notiert.

• 

• Station Ziel: Die Auflösungsstation befindet sich wieder im Foyer. Sie wird durch ein Aufsteller mit einem Plakat im Cooperate Design gekennzeichnet, die den Abschluss des Spiels betonen.Auf einem iMac geben die Teilnehmenden ihre gesammelten Codes ein. Das Programm wertet die Ergebnisse automatisch aus, vergibt Punkte und erstellt ein Ranking, in dem alle Spielenden entsprechend ihrer Leistung eingeordnet werden.

4. Gestaltung

Das Cooperate Design entstand nach langem Brainstorming aus den Visuellen Elementen der einzelnen Stationen. Diese beschrieben die jeweilige Station und man konnte ohne probleme erkennen zu welcher Station welches Plakat gehörte. Die drei Faktoren die alles zusammen brachten waren die selbe Schrift (Polymath, Schriftart und Größen), die gleiche Farbe (gelb) und der unverwechselbare Risodruckstil.

Diesen Stil wollten wir im UI UX Design wieder aufgreifen um den Zusammenhang darzustellen.

• 

5. Technik/Code

Station 1

1. Die Bewegungserkennung

Wenn die Helligkeitsdifferenz (diff) eines Pixels größer als die SCHWELLE (25) ist, gilt dieses Pixel als “bewegt”. Am Ende wird die Summe der bewegten Pixel durch die Gesamtzahl der Pixel im jeweiligen Rasterfeld geteilt (anteil).

let diff = abs(aktuell[i] - vorher[i]);
if (diff > SCHWELLE) {
  veraenderteePixel++;
}

2. Das Eskalations-System (Gedächtnis für Bewegung)

Wie es funktioniert: Jede Bewegung schlägt etwas Wert auf den eskalation-Speicher (von 0.0 bis 1.0). Wenn keine Bewegung mehr da ist, multipliziert draw() diesen Wert in jedem Frame mit 0.99 – dadurch sinkt der Wert sanft wieder nach unten.

eskalation = constrain(eskalation + ESKALATION_ANSTIEG * staerke, 0, 1);
eskalation *= ESKALATION_ABKLINGEN;

Station 3

1. Foto einfrieren & Zonen auslesen

video.get() macht einen Screenshot des Live-Kamerabilds. Danach wird für jede der zwei gelben Zonen eine einzige Durchschnittsfarbe berechnet.

function fotoAufnehmen() {
  capture = video.get();  // ← Kamerabild wird in diesem Moment "eingefroren"
  
  let fL = durchschnitt(capture, zoneL);  // ← Durchschnittsfarbe Zone Links
  let fR = durchschnitt(capture, zoneR);  // ← Durchschnittsfarbe Zone Rechts

2. Durchschnittsfarbe berechnen

Jedes Bild ist intern ein riesiges Array von Zahlen: [R, G, B, Alpha, R, G, B, Alpha, ...] – 4 Zahlen pro Pixel. Die Funktion läuft durch alle Pixel in der Zone und berechnet den RGB-Mittelwert. Ergebnis: eine einzige Farbe wie z.B. {r: 210, g: 80, b: 30}.

function durchschnitt(img, z) {
  img.loadPixels(); // ← alle Pixel-Daten aus dem Bild laden
  let r=0, g=0, b=0, n=0;

  for (let y=z.y; y<z.y+z.h; y+=4)   // ← Zone Zeile für Zeile
    for (let x=z.x; x<z.x+z.w; x+=4) { // ← Zone Spalte für Spalte
      let i = (x + y * img.width) * 4;  // ← Position im Pixel-Array
      r += img.pixels[i];   // Rot-Wert
      g += img.pixels[i+1]; // Grün-Wert
      b += img.pixels[i+2]; // Blau-Wert
      n++;
    }
  return { r:r/n, g:g/n, b:b/n }; // ← Mittelwert aller Pixel
}

3. RGB in HSB umrechnen

RGB ist für Computer gut, aber für Farbvergleiche schlecht. {r:255, g:0, b:0} und {r:200, g:0, b:0}sind beides Rot – aber RGB-mäßig weit auseinander. Mit HSB fragst du stattdessen:

• Hue = welche Farbe?

• Saturation = wie bunt?

• Brightness = wie hell?

function rgbHsb(c) {
  let r=c.r/255, g=c.g/255, b=c.b/255; // ← auf 0–1 normalisieren

  let max=Math.max(r,g,b); // hellster Kanal
  let min=Math.min(r,g,b); // dunkelster Kanal
  let d=max-min;           // Differenz = Sättigung

  let h=0;
  if (max===r) h = ((g-b)/d + (g<b?6:0)) * 60; // Hue im Rot-Bereich
  if (max===g) h = ((b-r)/d + 2) * 60;          // Hue im Grün-Bereich
  if (max===b) h = ((r-g)/d + 4) * 60;          // Hue im Blau-Bereich

  return {
    h: h,        // Farbton    0°–360° (Rot=0, Gelb=60, Grün=120, Blau=240)
    b: max*100    // Helligkeit 0–100  (0=schwarz, 100=weiß)
  };
}

4. Kontrast prüfen

Hier wird mit den HSB-Werten eine einfache (true/false) Frage gestellt. Das Ergebnis (true/false) bestimmt dann ob die Zahl 1–499 oder 500–999 ausgegeben wird.

function pruefeKontrast(typ, c1, c2) {

  if (typ === "kaltwarm") {
    let warm = h => h <= 60 || h >= 330;  // Rot/Orange/Gelb
    let kalt = h => h >= 150 && h <= 270; // Cyan/Blau/Violett
    // einer muss warm sein, der andere kalt:
    return (warm(c1.h) && kalt(c2.h)) || (warm(c2.h) && kalt(c1.h));
  }

  if (typ === "komplementaer") {
    let d = hueAbstand(c1.h, c2.h); // kürzester Weg auf dem Farbkreis
    return d >= 120 && d <= 240;     // nahe 180° = gegenüberliegend
  }

  if (typ === "helldunkel") {
    return Math.abs(c1.b - c2.b) >= 30; // Helligkeitsunterschied mind. 30
  }
}

Station Ende

In dem Code der Station Ende werden 3 verschiedene Code Teile erklärt:

• Eingabe der Grundlagen der Gestaltungs Station:Hier wird eine Rastereingabe benutzt. Sobald ein Buchstabe oder eine Zahl eingegeben wird, kontrolliert das Programm, ob diese Eingabe an der aktuellen Position erlaubt ist. Ist sie falsch, erscheint eine Fehlermeldung und die Eingabe wird zurückgesetzt. Ist sie korrekt, wird sie gespeichert und anschließend überprüft, ob das gesamte Raster vollständig ausgefüllt wurde.

inp.addEventListener('input', () => {
    const raw = inp.value.toUpperCase();
    const pos = POSITIONMAP[i];

    const valid = raw === pos.letter || raw === pos.number;

    if (!valid) {
        errEl.textContent =
            `An dieser Stelle ist nur ${pos.letter} oder ${pos.number} möglich.`;
        inp.value = cells[i]?.raw || '';
        return;
    }

    cells[i] = {
        raw,
        type: raw === pos.letter ? 'letter' : 'number'
    };

    checkGridComplete();
});

• Eingabe Programmier Station: In dieser Station wird Drag-and-Drop verwendet.Sobald der Nutzer auf eine Form klickt, wird sie ausgewählt. Während die Maus bewegt wird, aktualisiert das Programm kontinuierlich die Position der Form. Lässt der Nutzer die Maustaste los, endet der Drag-Vorgang.Dadurch können die Formen interaktiv auf die passenden Zielbereiche gezogen werden.

function attachDrag(shape, field) {

    shape.el.addEventListener("pointerdown", () => {
        shape.dragging = true;
    });

    document.addEventListener("pointermove", (e) => {
        if (!shape.dragging) return;

        shape.x = e.clientX;
        shape.y = e.clientY;

        shape.el.style.left = `${shape.x}px`;
        shape.el.style.top = `${shape.y}px`;
    });

    document.addEventListener("pointerup", () => {
        shape.dragging = false;
    });

}

• Eingabe der Farbdesign Station: Für die Farbstation wurde keine klassische Texteingabe verwendet. Stattdessen kann der Nutzer mit dem Mausrad durch verschiedene Werte scrollen. Je nach Scrollrichtung wird der Wert erhöht oder verringert und anschließend direkt auf dem Bildschirm aktualisiert. Dadurch entsteht der Eindruck eines kleinen Auswahlrades.

field.addEventListener("wheel", (e) => {

    e.preventDefault();

    if (e.deltaY < 0) {
        value++;
    } else {
        value--;
    }

    reel.textContent = value;

});

6. Herausforderungen

Während des Projekts sind wir immer wieder auf kleinere und größere Herausforderungen gestoßen. Eine der größten war es, spannende Stationen zu entwickeln, die gleichzeitig technisch umsetzbar sind. Viele Ideen sahen auf dem Papier gut aus, mussten aber vereinfacht oder angepasst werden, damit sie zuverlässig funktionieren.

Außerdem war es nicht immer leicht, den richtigen Schwierigkeitsgrad zu finden. Die Aufgaben sollten Spaß machen und verständlich sein, aber trotzdem eine kleine Herausforderung bieten. Deshalb haben wir einzelne Stationen getestet und anschließend angepasst.

Auch die Materialsuche war teilweise schwierig. Da wir möglichst viele vorhandene und recycelte Materialien verwenden wollten, mussten wir manche Ideen anpassen und kreative Lösungen finden. Eine weitere Herausforderung war die Platzierung der Stationen in der Hochschule. Geeignete Orte zu finden, an denen genug Platz vorhanden war und Materialien aufgehängt oder aufgebaut werden konnten, war schwieriger als erwartet.

7. Fazit

Unser Ziel war es, den Besucherinnen und Besuchern ein spannendes und interaktives Erlebnis zu bieten und ihnen gleichzeitig auf spielerische Weise Einblicke in unseren Studiengang zu geben. Dabei wollten wir bewusst verschiedene Arten der Interaktion kombinieren. Uns war wichtig, dass das Projekt nicht nur aus digitalen Aufgaben besteht, sondern auch physische und kreative Interaktionen einbindet. Die Besucher konnten dadurch verschiedene Sinne einsetzen und die Stationen auf unterschiedliche Weise erleben.

Ein weiterer wichtiger Aspekt war für uns das Thema Upcycling. Wir haben versucht, möglichst viele vorhandene Materialien weiterzuverwenden und sie kreativ in unser Projekt einzubauen.

Rückblickend sind wir mit unserem Ergebnis zufrieden. Obwohl wir unsere Ideen im Laufe des Projekts mehrmals überarbeitet haben, ist ein abwechslungsreicher Rundgang entstanden, der unsere ursprüngliche Idee gut widerspiegelt und die Besucher aktiv zum Mitmachen einlädt.