If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Zweidimensionales Rauschen

Die Idee vom Rauschen im ein-dimensionalen Raum ist wichtig, da uns dies gleich zu Diskussion von Rauschen im zwei-dimensionalen Raum führt. Schauen wir uns dies einmal an. Beim eindimensionalen Rauschen haben wir eine Folge von Werten, bei der jeder Wert ähnlich wie sein Nachbar ist. Da sich der Wert in einer Dimension befindet, hat er nur zwei Nachbarn: ein Wert davor (auf dem Diagramm links) und einer danach (auf dem Diagramm rechts).
Nature of Code Abbildung
BildI.10: 1D Rauschen
Zweidimensionaler Lärm funktioniert im Prinzip genau gleich. Der Unterschied ist natürlich, dass wir uns nicht Werte auf einem linearen Pfad, sondern auf einem Gitter anschauen. Stell dir dies wie ein Rasterpapier mit Zahlen in jeder Zelle vor. Jeder gegebene Wert ist seinen Nachbarn darüber, darunter, rechts, links und diagonale, ähnlich.
Nature of Code Abbildung
BildI.11: 2D Rauschen
Wenn du dir bei diesem Rasterpapier vorstellst, dass alle Werte auf die Helligkeit einer Farbe abgebildet werden, würde es wie Wolken aussehen. Weiss liegt gerade neben Hellgrau, was wiederum neben Grau liegt, was neben Dunkelgrau liegt, was neben Schwarz liegt, was wiederum neben Dunkelgrau liegt, etc.
Nature of Code Abbildung
Dafür wurde das Rauschen ursprünglich erfunden. Du spielst etwas mit den Parametern oder Farben und das resultierende Bild sieht wie Marmor oder Holz oder irgendeine andere organische Textur aus.
Schauen wir uns kurz an, wie zweidimensionales Rauschen in ProcessingJS verwendet wird. Wenn du jedes Pixel eines Fensters zufällig färben möchtest, bräuchtest du eine verschachtelte Schleife welche für jedes Pixel eine zufällige Helligkeit definiert.
Um jedes Pixel nach der Funktion noise() zu färben, machen wir genau das gleiche, wir rufeneinfach anstatt random() die Funktion noise() auf.
var bright = map(noise(x,y), 0, 1, 0, 255);
Dies ist zwar ein guter Anfang, denn wir erhalten einen Rauschwert für jede (x,y)-Position in unserem zweidimensionalen Raum. Das Problem ist aber, das wir so nicht die gewünschte Wolken-Qualität erhalten. Wenn wir von Pixel 200 zu Pixel 201 springen, ist dies im Rauschen ein zu großer Sprung. Beachte, dass wir mit dem eindimensionalem Rauschen, unsere Variable jeweils nur um 0,01 und nicht 1 hochgezählt haben! Eine ziemlich gute Lösung für diese Problem wäre es einfach eine andere Variable als Parameter für das Rauschen zu verwenden. Zum Beispiel könnten wir eine Variable xoff bei jedem horizontalen Schritt und yoff bei jedem vertikalen Schritt in der verschachtelten Schlaufe hochzählen.
In diesem Tutorial haben wir nun verschiedene Möglichkeiten Perlin-Noise zu verwenden gesehen. Mit eindimensionalem Rauschen haben wir geglättete Werte für die Position eines Objektes erhalten um den Eindruck von herumwandern zu erwecken. Mit zweidimensionalem Rauschen haben wir ein Wolkenmuster mit geglätteten Werten auf einer Pixelfläche erzeugt. Es ist aber wichtig nicht zu vergessen, dass Perlin-Noise Werte immer noch einfach Werte sind. Sie sind nicht an Pixelpositionen oder Farben gebunden. Jedes der Beispiele in diesem Tutorial mit einer Variable kann durch Perlin-Noise gesteuert werden. Wenn wir eine Windstärke modellieren, könnte ihre Stärke durch Perlin-Noise gesteuert werden. Das selbe gilt auch für die Winkel zwischen Ästen im Muster von fraktalen Bäumen oder der Geschwindigkeit und der Richtung von Objekten welche sich entlang eines Rasters in einer Simulation eines Strömungsfeldes wie im Programm unten bewegen.
Wir haben das letzte Tutorial damit begonnen, dass wir gesagt haben, dass Zufall nur eine Krücke ist. Es ist in vielerlei Hinsicht ist es aber die offensichtlichste Antwort auf die Fragen, welche wir uns immer wieder Stellen: Wie soll sich dieses Objekt bewegen? Welche Farbe soll es haben? Diese offensichtliche Antwort, kann aber auch ein faule Antwort sein.
Wenn wir nun diese Tutorial beenden, sollten wir nicht vergessen, das wir aber auch sehr einfach in die Falle zum Einsatz von Perlin-Noise als Krücke fallen können. Wie soll sich dieses Objekt bewegen? Perlin-Noise! Welche Farbe soll es haben? Perlin-Noise! Wie schnell soll es wachsen? Perlin-Noise!
Die Idee ist es aber nicht dir vorzuschreiben, ob du Zufälligkeit verwenden sollst, oder nicht. Oder dass du stattdessen Perlin-Noise verwenden verwenden sollst, oder nicht. Der Punkt ist der, dass du die Regeln deines Systems definierst. Und je Grösser deine Werkzeugkasten, umso größer ist deine Auswahl wenn du diese Regeln festlegst und implementierst. Das Ziel dieses Tutorials ist des dir zu helfen deinen Werkzeugkasten zu füllen. Wenn du nur eine Art von Zufälligkeit kennst, werden deine Entwürfe immer nur diese Art von Zufälligkeit verwenden. Perlin-Noise ist eine andere Art von Zufälligkeit, welche du in deinen Programmen verwenden kannst. Nach einer Übung mit Perlin-Noise werden wir mit dem nächsten Werkzeug fortfahrend, den Vektoren!

Der Kurs "Natürliche Simulationen" ist eine Bearbeitung von "The Nature of Code" von Daniel Shiffman, und wird unter der Creative Commons Attribution-NonCommercial 3,0 Unported Lizenz verwendet.

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.