Wie können Interaktive Elemente einen Ort oder Raum positiv ergänzen und den Aufenthalt in diesen erlebnisreicher gestalten?

Dabei sind einige erste Ideen aufgekommen.

In den Momenten, in denen du dich entscheidest, wird dein Schicksal geschmiedet.

Die Antwort

Immersive Garden!

Die Entscheidung fiel auf den Immersiven Garten, der Besucher:innen eine mysteriöse, sinnliche und inspirierende Erfahrung bietet — Wie denn auch nicht? Alle Aspekte der zuvor genannten Ideen werden durch den Garten abgedeckt und besser behandelt. Die Immersion der Nutzer:innen wird sofort eingefangen — Ob durch leitende Töne, einfangende Visuals oder das versehentliche Entdecken einer Interaktion — Der Garten stellt sicher, dass niemand ihn übersieht.

To the Drawing board...

Erstmal haben wir festgelegt, was wir wichtig finden, was wir nicht so wichtig finden und natürlich auch was wir auf keinen Fall haben wollen.

Must haves:

• Start mit 3 sichtbaren Blumen
• Abstrakter Hintergrund
• Anschauen, um Interaktionen auszulösen (Aufmerksamkeitsspanne wird belohnt)

Should haves:

• Interaktive "close ups" mit den einzelnen Blumen
• mindestens 3 verschiedene Interaktionen

Could haves:

• Wiese/Grasfläche
• Besondere Interaktion mit dem Hintergrund

Won't haves:

• VR/AR implementation
• Physische/taktile Interaktionen

...and into the IDE

Es wird Hand angepackt — wortwörtlich! Erste Ansätze zum Handtracking über p5js und verwandte Libraries, wie mediapipe und ml5! Gleichzeitig auch erste versuche, ein abstraktes Designsystem zu entwickeln. Hierbei handelt es sich um ein Modell, was noch zu brachial und schwer wirkte.

Stopp!

Was sollen die User:innen genau entdecken können?!

Wir haben uns in den Should haves ja schon darauf geeinigt, dass mindestens 3 verschiedene versteckte Interaktionen möglich sein sollen. Passt perfekt für uns — 3 Blumen, 3 Interaktionen, 4 3 Teammember!

Wir entschieden uns für 3 Sparten der Interkation:

Blickrichtung

Durch Anschauen der Blume wächst sie ins Unendliche, bricht in Äste aus und ändert je nach Blickwinkel, die Geschwindigkeit

Handgesten

Durch das Öffnen der Hand öffnet sich die Rose und entfacht ihre beeindruckende visuelle Macht.

Sound

Durch das Verursachen verschiedener Töne in verschiedenen Tonlagen und Lautstärken verformt sich die Blume. Je nach Farbe, ein anderer Trigger

Bringen wir alles zusammen!

Wir brauchen eine Interaktion, die den User:innen erlaubt, die Blumen zu erkunden

Unsere Lösung:

Ein Start-Screen, auf dem man sich erstmal ausprobieren kann! Wenn du eine Knospe lange genug anschaust, gilt diese als ausgewählt und du beginnst deine Interaktion mit der jeweiligen Blume!

Der Hintergrund, inspiriert vom Nachthimmel unterstützt unsere Wirkung und gibt dem ganzen nochmal ein bisschen was von diesem Ätherischen.

"Das Ganze ist mehr als die Summe seiner Teile."

Wir heißen euch herzlich willkommen im Immersive Garden!

"Die Phantasie von heute sorgt für die Realität von morgen."

Aufbau in der Hochschule

Mit ein wenig abgedunkelten Lichtern im Raum konnten wir problemlos an die Wand Projizieren. Ein kleines Plakat, was zum Erkunden auffordern soll ergänzt den Aufbau.

Ein bisschen Theorie

Unsere Blumen-Logik basiert auf einem Mathematischen Paper (Quelle), welches tatsächlich p5.js nutzte, um Funktionen zu visualisieren. Dabei sind auch unterschiedliche Blumen als Bilder enstanden. Diese Berechnungen konnten wir als Grundlage für den Code nehmen.

function ReagierendeBlume(){
  
  for(let r = 0; r <= 1; r += 0.03){
beginShape(POINTS);
    stroke(255, 20+ r*40, 90+r*40);
    for(let theta = 0; theta <= 120; theta += 1.5){
      let phi = (180/1.75)*Math.exp(-theta/(7*180));
      let petalCut = 0.6+abs(asin(sin((2/2)*theta))+420*sin((2.5+2/2)*theta))/2000;
      let hangDown = 2.3*pow(r, 0.1)*pow(0.9*r-1, 2)*sin(phi);

      if(0 < petalCut * (r * sin(phi)+hangDown*cos(phi))){
        let pX = 300 * (1-theta/20000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * sin(1*theta);
        let pY = -300 * (1-theta/20000) * petalCut * (r * cos(phi)-hangDown*sin(phi));
        let pZ = 300 * (1-theta/20000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * cos(theta);
        let offsetX = random(-300, 300) * zerfallProgress;
        let offsetY = random(-300, 300) * zerfallProgress;
        let offsetZ = random(-300, 300) * zerfallProgress; 
       
       vertex(pX+300 + offsetX, pY+200 + offsetY, pZ + offsetZ);
      }
    }
    
    endShape();
}

Ein kleines Beispiel noch

Ein bisschen clever umgedacht — Die Blume in drei Teile aufgeteilt, verschiedene farben erteilt und mit ein bisschen technischem schnick schnack auf das Mikrofon zugreifen und dessen Werte auf die Blume verteilen. und da ist unsere Reagierende Blume aus dem Immersive Garden! (Wie man den Stängel macht, kann man in unserer Doku nachlesen :))

function ReagierendeBlume(){
  vol = 100 * mic.getLevel();
  for(let r = 0; r <= 1; r += 0.03){

    //lila fläche
    beginShape(POINTS);
    stroke(255, 20+ r*40, 90+r*40);
    for(let theta = 0; theta <= 120; theta += 1.5){
      let phi = (180/1.75)*Math.exp(-theta/(7*180));
      let petalCut = 0.6+abs(asin(sin((vol*2/2)*theta))+420*sin((2.5+vol*2/2)*theta))/2000;
      let hangDown = 2.3*pow(r, 0.1)*pow(0.9*r-1, 2)*sin(phi);

      if(0 < petalCut * (r * sin(phi)+hangDown*cos(phi))){
        let pX = 300 * (1-theta/20000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * sin(1*theta);
        let pY = -300 * (1-theta/20000) * petalCut * (r * cos(phi)-hangDown*sin(phi));
        let pZ = 300 * (1-theta/20000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * cos(theta);    
       vertex(pX+300, pY+200, pZ);
      }
    }
    
    endShape();
//grüne fläche
      beginShape(POINTS);
    stroke(150, 20+ r*40, 90+r*40);
    for(let theta = 120; theta <= 240; theta += 1.5){
      let phi = (180/1.75)*Math.exp(-theta/(10*180));
      let petalCut = 0.6+abs(asin(sin(4.75*theta))+420*sin(4.75*theta))/2000;
      let hangDown = (0+(vol/50+currentPitch/300))*pow(r, 0.1)*pow(0.9*r-1, 2)*sin(phi);

      if(0 < petalCut * (r * sin(phi)+hangDown*cos(phi))){
        let pX = 300 * (1-theta/20000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * sin(theta);
        let pY = -300 * (1-theta/20000) * petalCut * (r * cos(phi)-hangDown*sin(phi));
        let pZ = 300 * (1-theta/2000) * petalCut * (r * sin(phi)+hangDown*cos(phi)) * cos(theta);


      
       vertex(pX+300, pY+200, pZ);
      }
    }
    
    endShape();

Frohes Erkunden!