Ich suche nach Geräuschen, die so aussehen:
(Bilder mit freundlicher Genehmigung von Understanding Perlin Noise )
Ich suche im Grunde nach Lärm mit vielen kleinen "Wellen". Folgendes ist unerwünscht:
Gibt es irgendwelche einfachen Möglichkeiten? Ich habe mich seit einer Woche mit Perlin und Simplex befasst und kann es anscheinend nie in JavaScript zum Laufen bringen, oder wenn doch, habe ich nicht die richtigen Parameter, um solche Bilder zu erzeugen, oder es ist unerträglich schleppend.
Ich verstehe, dass die 3 Bilder, die ich gepostet habe, wahrscheinlich mit dem gleichen Algorithmus aber in einem anderen Maßstab erzielt werden könnten, aber ich brauche diesen Algorithmus nicht. Ich brauche nur einen sehr einfachen Algorithmus, um so etwas wie im ersten Bild im Idealfall zu erreichen. Vielleicht würde eine Art Unschärfe den Job erledigen, aber ich kann es nicht schaffen, Ergebnisse zu erzielen.
Ich entwickle dies in JavaScript, aber jede Art von Code oder sogar eine einfache und detaillierte Erklärung wird funktionieren.
Antworten:
Während die vorhandenen Antworten eine gute Möglichkeit bieten, das zu erreichen, was die Bilder in der Frage zeigen, haben die Kommentare ergeben, dass das Ziel darin besteht, ein Bild wie folgt zu generieren:
Diese Art von Rauschen unterscheidet sich stark von dem in den Bildern der Frage gezeigten Rauschen, da es enge, isolierte Flecken bildet.
Es stellt sich heraus, dass diese Art von Rauschen als Turbulenz bezeichnet wird, die (gemäß diesem CPU-Gems-Artikel ) folgendermaßen implementiert ist (wobei
noise
Ihre Perlin-Rausch-Funktion Werte von -1..1 zurückgibt):Das Mischen dieser JavaScript-Perlin-Rausch-Implementierung mit der oben beschriebenen Turbulenzfunktion erzeugt ein Rauschen, das dem obigen Bild ziemlich ähnlich ist:
Den JavaScript-Code, mit dem das Bild oben generiert wurde, finden Sie in dieser jsFiddle .
quelle
return Math.abs(this.noise(x,y,z)*2)-.5
.Ihre Beispielbilder sehen sehr nach rosa Rauschen aus. Es wird so generiert:
Erstens haben wir eine Art glattes zufälliges Rauschen. Normalerweise wird dies erreicht, indem Pseudozufallswerte an Punkten mit ganzzahligen Koordinaten berechnet und diese Werte irgendwie interpoliert werden. Das Ergebnis sieht zu diesem Zeitpunkt so aus:
Als nächstes nehmen wir dieses Geräusch und "quetschen" es und erhöhen seine Frequenz. Die einfachste Formel hierfür lautet n2 (x, y) = n1 (x f, y f). Auf diese Weise wird das Rauschmuster in beiden Richtungen fünfmal zusammengedrückt. Bessere Rauschalgorithmen drehen und / oder übersetzen in diesem Schritt auch Rauschmuster, um Regelmäßigkeiten aufzulösen.
Dann wird dieses zusammengedrückte Muster mit einem Wert (weniger als 1) multipliziert und zum ersten Muster addiert. Tatsächlich fügen wir dem niederfrequenten Muster eine kleine Variation höherer Frequenzen hinzu. Das Ergebnis sieht ungefähr so aus:
Die Schritte 2 und 3 können mehrmals wiederholt werden, wobei immer feinere Details hinzugefügt werden. Das Nettoergebnis sieht normalerweise genauso aus wie in Ihrem Beispiel mit dem roten Kreuz. Beachten Sie jedoch, dass wir drei Parameter in unserem Algorithmus haben, mit denen wir spielen können:
Hier sind einige Beispiele:
Hohe Persistenz:
Hohe Lückenhaftigkeit:
Geringe Lückenhaftigkeit:
Das Spielen mit diesen Parametern ist nicht das einzige, was Sie tun können. Eine gute Technik, die Rauschmustern Charakter verleiht, ist die Verwendung von Störungen , dh das Hinzufügen von Rauschen zu den Eingabekoordinaten Ihrer Rauschfunktion.
Zum Beispiel : Angenommen , Sie eine Funktion haben , die Rauschen angegebene Koordinaten und zufällige Samen erzeugt:
Noise(x,y, seed)
. Dann können Sie so etwas verwendenNoise(x+Noise(x,y,234), y+Noise(x,y,6544), seed)
, um einen gestörten Wert zu erhalten. Dies kann zu Mustern wie diesem führen (Störung wird hier auf kreisförmige Muster angewendet, nicht auf Rauschen):Wenn Sie mehr erfahren möchten, sollten Sie sich libnoise (C ++) oder CoherentNoise (C #) ansehen . Leider kenne ich keine Javascript-Bibliothek, die Geräusche erzeugt.
quelle
Code ist kommentiert. Der Kredit geht an Sean McCullough. http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
Wenn Sie mit PRNG arbeiten, können Sie problemlos wieder instabile Ergebnisse erzielen
quelle
Verwenden Sie vorgenerierte Texturen oder stellen Sie einen Perlin-Rausch-Texturgenerator auf einen Server und fragen Sie ihn nach Perlin-Rausch-Bildern ab.
quelle