Bubbles Simulation

Exkursion Digitale Kommunikation 2025

Nature of Code

Inspiriert von dem Buch "Nature of Code" von Daniel Shiffman, zeigt dieses Projekt wie einfache Regeln zu komplexen und visuell-interessanten Ergebnissen führen können. Trotz nicht Teilnehmens an der Exkursion, habe ich mich auch in die Natur begeben und ein bisschen Ausschau nach interessanten natürlichen Verhalten gehalten. Ich war dafür in Goslar und in Braunschweig unterwegs.

Inspiration hinter dem Code

Beim Beobachten der Natur fiel mir immer wieder das Verhalten von Wasser und dessen Schaum- und Blasenbildung, die durch starkes Aufprallen des Wasser auf die Oberfläche entstand. Also setzte ich mich an die ersten Versuche eine Simulation dieses Verhaltens darzustellen.

blasen auf dem Wasser

Das Projekt ist inspiriert vom Prinzip des Ausgleichs der Oberflächenspannung. Die kleinen Blasen, die durch unterschiedliche Gase im Wasser entstehen, ziehen sich durch ihren hohen Innendruck gegenseitig an und bilden eine größere um die Oberflächenspannung zu entlasten und somit den Energieverbrauch zu minimieren. Erstellt wurde das Projekt mithilfe von der p5.js library Jede Blase auf dem sketch ist unabhängiges Objekt mit den Eigenschaften Position (x, y) und size. Die Blasen sind nicht statisch; Sie bewegen sich. Ein Schlüsselelement ihrer Bewegung ist ihre Anziehung zu den vorherdefinierten clusterPoints.Jede Blase identifiziert den nächsten cluster point und bewegt sich zu ihm. Die Geschwindigkeit der Anziehung kann mit der attractionStrength angepasst werden.

Andere Möglichkeiten den sketch zu verändern, wären die Variablen bubbleCreationRate, mergeTimer und opacity. bubbleCreationRate beeinflusst, wie oft neue Blasen erstellt werden. Mit dem mergeTimer kann man verändern, wie lange die Blase beinander bleiben müssen, bevor sie sich vereinigen und mit der opacity modifiziert man, wie schnell die Blasen verschwinden.

source code

Interaktion und Verschmelzen

Einer der interessantesten Teiler der Simulation, ist wie die Blasen miteinander agieren. Um Überlappungen zu verhindern, gibt es eine Logik, die sie auseinanderhält. Dies wird anhand der jeweiligen Größen berechnet.

Der "Verschmelzprozess" wird durch den mergeTimer geregelt. Der Timer startet sobald sich zwei Blasen nähern. Falls sie also für ein paar Sekunden in ihrer Nähe bleiben, wird die mergeWith ausgelöst. Diese Funktion kombiniert die zwei Blasen zu einer größeren Blase. Die Größe berechnet sich aus der Summe der zwei kleineren Blasen.

bubbles
bei dieser Variante des Codes generiert sich der Hintergrund nur langsam und mit reduzierter opacity
bubbles thicker
hier ist die Dicke des Strichs erhöht und ebenfalls nur langsame Generierung des Hintergrunds eingestellt, außerdem ist der mergeTimer erhöht, wodurch die "Blasen" länger brauchen um ineinander überzugehen.