Minimal Life

Interaktive Illustrationen

Minimal Life - Interaktive Illustrationen

Christopher Bonk

Sommersemester 2024

Betreut durch:
+ DATEIEN HOCHLADEN
Das zentrale Thema meiner Sketche lautet ›Minimal Life‹. Unter diesem Motto habe ich vor allem ›interaktive Illustrationen‹ mit einem Fokus auf einem haptischen Gefühl und einem großen spielerischen Anteil entwickelt.

Das Thema von der Illusion von Leben beschäftigt mich schon länger, vor zwei Semestern habe ich bei Jonathan Kröll bereits das Thema ›What is Life‹ behandelt. Für diesen Kurs wollte ich das Thema lockerer angehen und einige Sketche erstellen, die verschiedene Aspekte von ›Leben‹ (und auch ›Tod‹) auf eine minimalistische Art und Weise behandeln. Außerdem nahm ich die Semesteraufgabe zum Anlass, mich mit verschiedenen anderen Bereichen von Javascript zu beschäftigen wie zum Beispiel Ton oder matter.js.

In der Gestaltung versuchte ich mich auf einfache, klare Formen zu beschränken, um den Fokus auf die Interaktion zu lenken. Ich wollte eine deutliche visuelle Verbindung zwischen allen Sketches. Deswegen entschied ich mich für eine einheitliche Formen- und Farbsprache.

Bei der Interaktion war für mich immer das Ziel, alles so einfach wie möglich zu halten. Deswegen kann man sämtliche Sketche nur mit der linken Maustaste steuern. Diese Einfachheit lädt zum Experimentieren ein. Man möchte sehen, was man alles mit diesem einen Input beeinflussen kann. 

Die Gestaltung des Tons war ein weiterer wichtiger Punkt. Für mich sind Ton und Bild eine Einheit und helfen zusammen eine Stimmung zu erzeugen.

Alle Rechte an Texten, Bildern und Code liegen bei Christopher Bonk.

Edit

Cells

Für den ersten Sketch war die Idee relativ einfach: Ich wollte einen Zellhaufen umsetzen, der sich fortwährend teilt und dabei wächst (›Beginn des Lebens‹).

Um die Szene lebendiger wirken zu lassen, setze ich eine Vielzahl von Techniken ein. So ›ploppen‹ die Zellen mit einer Kraft auseinander, alle Zellen bewegen sich minimal zufällig, der Anziehungspunkt in der Mitte verschiebt sich leicht und die Wachstumsrate der Zellen ist, je nach Größe, unterschiedlich.

Edit

Edit

Landscape

Der zweite Sketch ist eine einfache Interaktion von Wind und Pflanzen. Beim Wind wollte ich ein physisches Gefühl erzeugen, so dass man am Wind dreht wie an einem Rad, das sich erst mit einiger Kraft in Bewegung setzt und auch noch nach dem Loslassen weiter läuft. Das Aussehen des Grases durchlief mehrere Evolutionen von Strichstärken und Verzierungen, bis ich bei der jetzigen Form angelangt bin. Der Ton sollte auf ähnlich minimalistische Methoden zurückgreifen wie das Bild, andererseits sollte er immer noch das Essentielle vom ›Wind‹ beinhalten. In meiner Umsetzung gibt es zwei rauschende Töne, die sich überlagern und zu unterschiedlichen Anteilen proportional zur Windgeschwindigkeit verändern.

Edit

Edit

Flower

Die Grundidee war eine Blume, die den Zyklus von Geburt bis Wiedergeburt durchläuft. Die Blume startet als Samen, wächst und bekommt eine Knospe, dann eine Blüte, die verwelkt und wiederum einen Samen produziert.

Für die Implementation musste ich mich vor allem mit Contraints vertraut machen. Diese pinnen zwei physikalische Körper an einer bestimmten Position zusammen. Bei matter.js funktionieren diese eher wie starke Gummibänder, die zwischen den zwei Körpern an zwei festen Positionen befestigt werden. Ich musste oft die Parameter tweaken, um kein völlig unvorhersehbares Verhalten zu bekommen. Das ist aber ein generelles Problem von Physik-Engines.

Edit

Edit

Swarm

Auf ›Boids‹ bin ich vor längerer Zeit gestoßen und wollte unbedingt selbst versuchen, eine Version umzusetzen, weil es vor allem auch für Game Design sehr viel Potenzial hat. Ein generisches Schwarmverhalten lässt sich mathematisch gut nachvollziehen. Dabei wirken die folgenden Kräfte auf die Individuen ein: Alignment (Tiere orientieren sich in der Ausrichtung / Bewegungsrichtung an ihren Nachbarn), Cohesion (Tiere gehen näher an Nachbarn und sammeln sich in Gruppen) und Separation (Tiere versuchen trotzdem einen Mindestabstand zu ihren Nachbarn einzuhalten). In meiner Version benötigte ich zusätzlich noch eine Anziehungskraft, die Tiere zu einem Punkt zieht und eine Abstoßungskraft, die Tiere Hinternisse vermeiden lässt.

Edit

Edit

Cicadas

Ziel war ein experimenteller Synth, der mehrstimmig spielte und die Stimmen bei einer Bewegung der Maus unterschiedlich verlagern. Dabei sollte man Kreaturen sehen, die diese Sounds von sich geben (ähnlich zu einem Grillenkonzert).

Die Tiere saßen erst steif in ihrer Welt und spielten ihren Sound ab, bis mir die Idee kam sie je nach Pitch am Stamm rauf und runter zu bewegen. Am Ende kam noch eine dritte Position, sodass die Tiere je nach horizontaler und vertikaler Mausposition unterschiedlich wandern. Das ganze erinnert dann auch wieder an Schieberegler eines elektronischen Instruments, die den Sound verändern.

Edit

Edit

Leaves

Die erste Idee für diesen Sketch waren das Platzieren von zufällig generierten Objekten, die nach und nach von Bissspuren zersetzt werden. Mit dem Pixel-Array konnte ich alle Pixel durchgehen und nach der Farbe prüfen und diese dann zufällig mit Bissspuren versehen. Das Ergebnis sah spannend aus, aber ich habe irgendwann die Erzeuger der Bissspuren vermisst.

Also erzeugte ich kleine Tiere, die zu vom Pixel-Array gefundenen Blattpositionen gehen und einen ›Pfad der Zerstörung‹ hinterlassen. Weil ich ein destruktives Modell verwendete, wollte ich versuchen, ein statisches Blatt zu erzeugen und nur an den Orten, die es erfordern die Pixel zu zeichnen.

Edit

Edit

Bones

Ich bin in der Dokumentation immer wieder über den PolySynth gestoßen, der es einem ermöglicht, Noten abzuspielen, und wollte diesen unbedingt austesten. Eine andere Idee war zufällige Skelette zu generieren. Also kombinierte ich die beiden Ideen zu einem customisierbaren Knochen-Synthesizer.

Die Interaktion sollte so einfach wie möglich sein. Ein Mausklick, um einen Knochen mit einer zufälligen Note zu erstellen und ein Mausklick auf den Knochen, um seinen Ton abzuspielen. Mit der Zeit kamen dann noch Optionen wie Drag & Drop, Knochen löschen und ›Strumming‹ d.h. das Fahren der Maus über die Knochen ähnlich wie das Schlagen einer Gitarre, dazu.

Edit