A Play About Radical Honesty. But: Don't Judge.

About the Project

The idea is this: Players land as breadcrumbs on an empty map and find that they can connect with other crumbs. In the course of the game, about 50 players per performance meet in real time and have the opportunity to answer questions together - to get closer.

The more connected, the better - until suddenly a voice enters the game: Birder, with his perfidious plan of radical honesty.

My Contribution to the Project

Technologically, Hyphe was like landing on the moon: real-time interactions via websockets, livestream video, livestream audio, real-time editorial team intervention, game animations, a digital store system and many other little things - as part of Minge+Schmidt, it was my job to make all this technologically feasible. And we made it possible.

It Is Not Impossible to Combine Theater and Technology

There are always disagreements between art and technology: the particular challenge with Hyphe was to find the right balance between feasibility and artistic freedom.

When developing the storyboard, the production team had many different ideas, all of which seemed more or less feasible, especially considering the limited budget available. But we made it happen.

Design Sprint Meets Theater

As an agency, we were of course experienced in developing prototypes and knew how to develop projects as efficiently as possible.

It would certainly have been applicable if we had made a to-do app, but since this was an unconventional project, we had to try to cast conventional methods in unconventional procedures.

First Step: Create A Shop

Here I have all already had to lay all the foundations for the play. Particularly challenging was the possibility that the participants could buy one, or several tickets with freely selectable amounts.

Whereupon then also the participant tickets had to be sent to different email addresses, in order to achieve a kind of email authentication. In addition, database entries had to be made with each purchase so that certain users could also participate in one of the ten performance dates.

  const handleSubmit = async event => {
    event.preventDefault();
    const new_order_lines = convertOrderLinesToStripe(orderLines)

    try {
      const session = await axios.post('/api/payment/session-initiate', new_order_lines)
      const result = await stripe.redirectToCheckout({
        sessionId: session.data.id
      });
    } catch (err){
      console.log(err)
    }
  };

Second Step: Create a Backend and Admin Panel

Since it would have been inefficient to use an open source headless CMS here, I had to build my own CMS. Especially because the websocket system had to be integrated from the beginning:

export const joinChat = (room_id, user) => async () => {
  io.emit('listen:to', room_id)
  const search = {_id: room_id, 'related_user.user_id': user._id }
  const update = {$set: { 'related_user.$.online': true, will_continue: [] }}
  await axios.post(`${host}/api/connection/update/${room_id}`, {search: search, update: update})
}

Third Step: Build the Frontend

Building the frontend was a bit of a feat. Not only did I have to render gameplay in real time, but the visualization had to reflect the artistic idea of the "hyphe".

With p5.js, I had to tinker so much to animate the movement of the connecting strands:

this.drawExtension = function(p5, x0, y0, zoom, up, i){
  var initRot = up ? this.angle + p5.PI / 2 : this.angle + p5.PI / 2  + p5.PI
  var amplitude = p5.PI / 4

  var noise = p5.noise(this.yOff + i * 2 / 3)

  var rad = zoom * 4 + i
  var rot = p5.map(noise, 1, 0, initRot - amplitude, initRot + amplitude)

  var xN = x0 + rad * p5.cos(rot)
  var yN = y0 + rad * p5.sin(rot)

  p5.line(x0, y0, xN, yN)

  return {xN, yN, rot}
}

The Movement

Adding Tons of Overlays

In the screenshots below you can see that it was necessary to include many different overlays. This was challenging in the sense that it was necessary to connect all the elements in real time.

So there was a group chat that had to communicate in real time with the backend and also a video element that plays the live acting of the main character.

The Stage Is Yours

After many months of development, the time had finally come. The play went live. On ten evenings, 50 players each could participate and interactively determine the outcome of the play.

My task was to finally see if the servers would hold out. And luckily, everything worked out - with more than 50,000 user-generated messages, each performance went ahead as planned.

Huston, We Don’t Have a Problem

Actually, I'm a notoriously optimistic person, but just before the first show started, I was nervous as hell.

But to see that so many people can communicate with each other in real time, that made me totally happy. In the end, during each performance, 8 people in the backend, 50 people on the field and the actor were interacting at the same time - and it was really like landing on the moon!

Media

1. Süddeutsche Zeitung
2. Theaterscoutings Berlin
3. Der Bund CH
4. Nachtkritik

Credits

1. Concept: Saladin Dellers, Sean Keller, Johanna Kolberg, Fabiola Kuonen
2. Direction: Johanna Kolberg
3. Text: Sean Keller
4. Dramaturgy: Fabiola Kuonen
5. Initiator, acting: Saladin Dellers
6. Music: Lorin Brockhaus
7. Game design, UX & Development: Toni Minge, Johannes Schmidt
8. Regie Assistant: Stella Schimmele
9. Livestream Technology: Wieland Hilker
10. Outside Eye: Caspar Bankert
11. Production: Barbara Boss, Michael Röhrenbach
12. PR & Press: Caspar Weimann
13. Press Graphic: Hana Yoo