Deutsch

Weaving a Time-based Web

Merz Akademie | Pathway New Media | SoSe 2017 Projects

Advertising Blur

Andreas Eisenhut
The idea of Advertising Blur is to embed advertisement more fluid and dynamic into the daily TV entertainment schedule so that there is no clear border between advertising and entertainment section.
At the same time there is an Adblock and AdSignal function that display first of all detected advertisement or more precise the logos inside the ads. With klicking the AdBlock-Button, all detected advertisement gets additional blurred.
Advertising Blur beschäftigt sich mit der ständigen Präsenz von Werbung im filmischen Medium und deren dauerhaften Konfrontation mit dem Verbraucher.
Advertising Blur stellt eine Anwendung dar, mit der fortan Logos in Werbespots nachverfolgt und unkenntlich gemacht werden können. Dem User werden dafür live erkannte Logos angezeigt und umrahmt. Mit einem einfachen Klick auf den dafür vorgesehenen AdBlock-Button, werden erkannte Logos entweder unkenntlich gemacht oder freigegeben.
Ebenso versucht das Projekt die sonst so kommerziell gesetzten Grenzen eines Werbeblocks aufzubrechen und dem Verbraucher Interaktionen mit dem Medium zu ermöglichen. Die sonst so harten Schnitte zwischen zwei Werbespots sollen durch Einbettung eines folgenden Werbespots in den Vorherigen ein besseres Filmerlebnis für den Verbraucher ermöglichen.
TrackingJS
FrameTrail

Butterfly Effect

if it was you, what would you do?

Rebecca Zahor
Butterfly Effect is about a non-linear interactive story. It describes the life’s journey of a woman born in the German Democratic Republic. Frequently she reaches certain decision points which affect her whole life and divert it in a different direction. At that point the spectator comes into play: He is able to decide how the story will develop. By using the Butterfly Effect button he can return to the respectively previous decision point and make a different choice to change the whole tale entirely. „A butterfly's wing stroke can trigger a hurricane at the other end of the world“ – so is this phenomenon limited on local conditions or can you might say the same thing about time? Live is not allways black and white, often there are not only good or bad choices. Even choices that might seem earth-shattering to us could lead to the same final outcome and still make us a different person. The story is retrospectively narrated by a voiceover from first-person perspective.
Bei Butterfly Effect handelt es sich um eine nicht lineare interaktive Geschichte. Es wird der Lebensweg einer Frau beschrieben, die in der DDR aufgewachsen ist. Immer wieder kommt sie an gewisse Entscheidungspunkte, die ihr ganzes Leben beeinflussen und in eine bestimmte Richtung lenken. An diesen Punkten kommt der Zuschauer ins Spiel: Er kann selbst entscheiden wie sich die Geschichte weiterentwickelt. Über den „Butterfly Effect“ – Button kann er außerdem zum jeweils vorherigen Entscheidungspunkt zurückspringen, sich dann anders entscheiden und die komplette Geschichte verändern. „Ein Flügelschlag eines Schmetterlings kann auf der anderen Seite der Welt einen Hurricane auslösen“ – Ist dieses Phänomen nur auf den Ort limitiert, oder kann das selbe vielleicht über Zeit gesagt werden? Oft geht es nicht darum, zwischen gut oder schlecht, schwarz oder weiß zu wählen. Selbst Entscheidungen die uns weltbewegend vorkommen, können zum gleichen Endergebnis führen und uns dennoch auf persönlicher Ebene verändern. Die Geschichte wird rückblickend von einer Stimme aus dem Off in der Ich-Perspektive erzählt.
WebGL
Arkadia Zoomquilt

Hyper-Guitar

"See it, play it"

Kim Daniel Selbach
As a self-taught guitar player, i wanted to create something for every prospective musician. Sometimes it’s really nerve-racking to watch Youtube tutorials or “simple” guitar theory, so I took the opportunity to use multiple screens at the same time. Therefore, the user has more opportunities to understand an instrument by just looking.
The project is put together by 3 individual Views; main view (Guitar 1), changeable perspective (Guitar 2) and a zoom, which allows to view both guitars in close distance. You can also view the Tabs/Notes of the played song or musical piece. The only thing you need is an instrument and a camera. Thus, the user has the choice to use other instruments besides the guitar and can also watch other types of musical pieces in different angles.
In meinem Projekt, wollte ich die Möglichkeit nutzen mehrere Perspektiven zur gleichen Zeit im Überblick zu haben. Für mich als Musiker, der sich das Gitarre spielen selber beigebracht hat, war es anfangs sehr schwer alleine durch Youtube Tutorials und allgemeine Gitarren Theorie, einen Lerneffekt zu erzielen. Deswegen wollte ich das „genaue Hinschauen“ in mein Projekt integrieren und so die Möglichkeit schaffen, Gitarre lernen über das Internet zu vereinfachen.
Das Projekt setzt sich aus 3 individuellen Ansichten zusammen, eine Hauptansicht (Gitarre 1), eine wechselbare Perspektive (Gitarre 2) und eine Zoomfunktion, die es erlaubt beide Gitarren aus der nah Perspektive zu sehen. Eine zusätzliche Funktion ermöglicht es, Tabs und Noten anzuzeigen. Das einzige was man dazu braucht, ist ein Instrument und eine Kamera. Der Nutzer hat dadurch die Möglichkeit, neben einer Gitarre auch andere Musikinstrumente zu benutzen und verschiedene Arten von Musikstücken, aus verschiedenen Perspektiven anzuschauen.
Line6 UX 1
TimingObject

Into the Green

To beware the green

Simone Braun
For several decades, the clearance and the species extinction in the rainforests has no limits. In the meantime, more than 810,000 square kilometers of rainforest have been destroyed (more than twice the area of the Federal Republic of Germany). Oliver Wearn, a research worker at Imperial College London, and his colleagues have drawn up several scenarios " how the loss of species and the risk of clearing could be in 2050. The most threatening scenario: The rainforest is still being destroyed as before, and as in the past ten years at least 28,000 square kilometers per year are lost. This almost corresponds to the area of Brandenburg. In this scenario 10.3 percent of the vertebrate species would die out by 2050, another 26.9 percent would be at risk. " For this reason and to show the flora and fauna of the tropics to the viewer digitally, my hypervideo is an informative tour of the Tropicarium in the Botanical Garden in Tübingen. What the tropical climate zone covers from South American, Mexican, African to Asian.
Schon seit mehreren Jahrzehnten hat das Abroden und Artensterben in den Regenwäldern keine Grenzen. Mittlerweile wurden über 810.000 Quadratkilometer Regenwald zerstört (dies entspricht mehr als zweimal der Fläche der Bundesrepublik Deutschland). Oliver Wearn, Forscher vom Imperial College London, und seine Kollegen haben mehrere Szenarien erstellt, „wie es im Jahr 2050 um den Artenschwund und die Aussterbeschuld stehen könnte. Das bedrohlichste Szenario: Der Regenwald wird weiter wie bisher zerstört und es gehen wie im Durchschnitt der vergangenen zehn Jahre mindestens 28.000 Quadratkilometer pro Jahr verloren. Das entspricht fast der Fläche Brandenburgs. In diesem Szenario würden 10,3 Prozent der Wirbeltierarten bis 2050 aussterben, weitere 26,9 Prozent wären gefährdet.“ Aus diesem Grund und um dem Betrachter die Flora und Fauna der Tropen digital näher zu bringen, geht es in meinem Hypervideo um eine informative Rundführung durch das Tropicarium im Botanischen Garten in Tübingen. Welches die Tropische Klimazone von der Südamerikanischen, Mexikanischen, Afrikanischen bis hin zur Asiatischen beinhaltet.
SimpleWeather API
FrameTrail

Let‘s Play GTA V

Space-Time-Manifold

Lennart Benedict Oberlies
Since the introduction of web video plattforms like Youtube or Streaming provider like Twitch, Let’s Play Videos are integral parts of trending web media. Apart from the part /structure, this Video format is not really giving genuine room to dynamic content.
Let’s Play GTA V is a first attempt to give rise to a new kind of interactive gaming videos. In the form of a webapplication it ripples out and create new possibilities for the user, such as interactive participation with one individual user experience. The game’s three perspectives have been translated into an interactive Let’s Play.
Das Let’s Play Format hat sich seit der Einführung von Plattformen wie Youtube oder dem Streaming-Dienst Twitch zu einer festen Größe der trending web media Formate etabliert. Abseits von der part-Struktur hält das Format dem User bisher – wenn überhaupt – nur in geringem Maße dynamischen Content bereit.
Let’s Play GTA V ist ein erster Versuch einen Schritt in Richtung interaktives Gaming Video zu wagen. In Form einer Webapplikation eröffnet Let’s Play GTAV dem User die Möglichkeit der interaktiven Partizipation mit individuellem Erlebnis. Die drei Perspektiven des Spiels werden übersetzt in ein interaktives Let’s Play.
Space Time Manifold
Zoomooz
MotionJS

motorCycle

Nick Betzlbacher
Interactive tutorial that uses several short videos - combined resulting in a repeating motorcycle ride - explanatory texts, as well as graphics, to teach how to ride a motorcycle. Thereby the user is enabled to actively change the course of the video. During the ride, you learn how to correctly ride curves, how to do a burnout, and what you should consider by doing a wheeli. If you feel like learning more about these topics, you can find links with further information, directly in the video.
Interaktives Tutorial, das durch mehrere kurze Videos, die zusammen eine sich wiederholende Motorradausfahrt ergeben, und erklärende Texte sowie Grafiken versucht dem Betrachter spielerisch das Motorradfahren näher zu bringen. Dabei wird der Betrachter in die Lage versetzt, durch seine Entscheidungen den Ablauf des Videos aktiv zu verändern . Während der Fahrt lernt man wie Kurven richtig durchfahren werden, wie man einen Burnout macht und auf was man bei einem Wheeli achten sollte. Falls man noch mehr über die genannten Themen erfahren möchte, findet man direkt im Video Links mit weiterführenden Informationen.
SVG Animation
Cinemagraph
FrameTrail

Persona

Good or bad, whatever can you be?

Haly Dang
Everything we experience has an impact in our live. It helps molding us as a person. It doesn’t matter if the experiences are good or bad. But what happens when you lose your memories. Will you still be the same person you used to be?
Persona is a story about a person who has lost his memories recently. Follow the journey of this person in order to find out if that person is a good or bad person.
Unsere Erinnerungen prägen uns, ganz gleich ob es gute oder schlechte Erinnerungen sind. Durch diese entwickeln wir uns weiter. Aber was wird aus uns, wenn eines Tages all unsere Erinnerungen verschwinden? Würden wir immer noch die gleiche Person sein wie zuvor?
Persona erzählt eine Geschichte über eine Person, die ihr Gedächtnis verloren hat, mit dem Hintergrund herauszufinden, ob diese Person eine gute oder eine schlechte Person ist.
ThreeJS
AfterEffects
FrameTrail

Rainbow

Sarah Boliviani
How good is your mood?
My idea was to create something that recognizes in a not so serious way how fast we are annoyed/stressed. Nowadays we are stressed relatively quickly, if something does not work immediately as you want. Through the clawed colors and the slanting tone it is a hard to watch the video for more than one or two minutes. Depending on the reaction, a MOOD (state of mind) is assigned to us. This MOOD contains a video, which is then played. Most of them contain a link to a Website.
How good is your mood?
Meine Idee war es etwas zu kreieren, dass auf eine nicht ganz so ernste Weise erkennt wie schnell wir genervt sind. Heutzutage sind wir ja relativ schnell gestresst, wenn etwas nicht sofort funktioniert so wie man es gerne hätte. Durch die krallen Farben und den schrägen Ton fällt es einem schwer das Video länger als eine Minute entspannt anzusehen. Nun je nach Reaktion wird uns ein MOOD (Gemütszustand) zugewiesen. Dieser MOOD enthält ein Video, welches uns dann abgespielt wird. Die meist sind mit einen Link versehen, der uns auf eine Website verweist.
Affectiva Emotion Recognition

Smart Mirror

Wenn dein Morgen schon intelligent beginnt

Michelle Braun
The Smart Mirror is not a normal mirror. The problem with delays or confusion over the day is solved, because the mirror shows the day of the week, the date and the current time. The live weather helps to decide which type of clothe you should wear or whether you should take a umbrella. With the integrated music bar, you can choose the player, for example Spotify, Apple Music or YouTube. Through live news you are always up to date, what appointments do you have, the Whatsapp massages or what’s happening in the world. The integrated Selfie-camera solves the problem with the photos in the mirror. A simple click and the picture is taken. With the Smart Mirror your life is organized in early morning.
Der Smart Mirror ist kein normaler Spiegel, er ist mit unterschiedlichen smarten Funktionen ausgestattet. Das Problem mit Verspätungen oder der Verwirrung über den Tag ist gelöst, da im Spiegel der Wochentag, das Datum und die Aktuelle Uhrzeit angezeigt wird. Das live Wetter hilft bei der Entscheidung, welche Art von Kleidung man tragen sollte oder ob man einen Schirm mitnehmen sollte. Man hat eine integrierte Musikbar, hier kann man den Player selbst auswählen, wie Spotify, Apple Music oder YouTube. Durch live News ist man immer auf dem aktuellen Stand, was für Termine man hat, wer einem bei Whatsapp schreibt oder was auf der Welt passiert. Die integrierte Selfie-Kamera löst das Problem, mit den Fotos im Spiegel. Ein einfacher Klick und das Bild ist gemacht. Mit dem Smart Mirror ist der Alltag vom frühen Morgen an organisiert.
SimpleWeather API
FrameTrail

Video-Portfolio

An interactive portfolio with yourself as the main content

Delia Steinbach
The Goal was to make an online portfolio more personal, and giving the observer the impression that he can move independently through the website. The content are playfully designed short video clips, that appear by choosing a path throughout the experience. The content wasn’t supposed to be too serious, just giving an idea how the navigation through the site could look. In the beginning you can either choose between looking at the projects directly, or getting a better impression of the person by choosing questions. Here you have the option to choose from a short set of personal or business related questions. This could be something like „what is your favourite animal?“ or „what skills do you have?“. The observer can chose by himself what kind of information is interesting to him and doesn’t have to go through a huge amount of content.
Ziel ist es ein online Portfoliopersönlicher zu gestalten und den Betrachter den Eindruck zu geben, er könne selbstständig durch die Webseite navigieren. Inhalt bilden Videos der Person, durch die man sich mit Fragen bewegen kann. Der Inhalt sollte nicht zu ernst sein und eine Idee davon transportieren, wie so eine Navigation durch eine Seite aussehen könnte. Am Anfang kann man sich entweder die Projekte direkt anschauen, oder sich mit persönlichen Fragen einen besseren Eindruck von der Person machen. Dabei kann man zwischen zufälligen, „persönlichen“ Fragen wählen, oder arbeitsbezogenen. Jede Frage wird mit einem kurzen Videoclip beantwortet. Fragen der persönlichen Spalte bilden zum Beispiel, „Was ist dein Lieblingstier“, und Fragen aus der arbeitsbezogenen Spalte wären „Welche Programme beherrscht du?“. So kann der Betrachter selbst entscheiden was für Informationen er aus der Webseite zieht und muss sich nicht durch Unmengen an Informationen bewegen.
AfterEffects
CSS3 Animation

Concept / Architecture / Storyboards