Vektorformat-Perlin-Rauscheffekt

Ziel ist es, vektorformatierte Perlin-Noise-Strichzeichnungen zu erzielen. Visuelle Beispiele für den gewünschten Effekt:

Beispiel 1

Beispiel 2

Ist es möglich, einen statischen Perlin-Rauscheffekt nur mit Adobe Illustrator oder Photoshop zu erstellen?

Wenn nicht, könnte ich meinen gewünschten Effekt mit Javascript und CSS erstellen und das SVG-Bild im Illustrator verwenden?

Jeder Rat wäre sehr willkommen.

Sowohl Illustrator als auch Photoshop unterstützen Javascript, also ist es theoretisch möglich. Wenn Sie jedoch die Mechanik dahinter überprüfen, werden Sie feststellen, dass eine vektorbasierte Lösung nicht machbar ist. Ja, Rendering-Software kann dies mit Millionen von Zeilen tun - und es dauert mehrere Tage.
Meiner Meinung nach sind die gezeigten Bilder kein Perlin-Rauschen.
@Rafael Was würdest du dann sagen?
@Rafael Vielleicht nicht so, aber vielleicht durch Perlin-Rauschen gestört.
Die Bilder scheinen vom Künstler Martin Latter gemacht worden zu sein: flickr.com/photos/martinlatter/albums/72157621371266099 . Vielleicht sollten Sie Vektor (zu viele Zeilen) vergessen und sich mit Shadern befassen? Es ist einfach, bei shadertoy.com anzufangen .

Antworten (1)

Wenn Sie den JS/CSS-Weg gehen möchten:

Ein Ansatz wäre die Verwendung einer Technik ähnlich dem Code von Dietrich Featherston, der hier zu finden ist: http://bl.ocks.org/d2fn/0d3789278f3d9816e0fd

In Featherstons Code werden Schauspieler zufällig auf der Leinwand platziert und dann in die Richtung bewegt, die von der Perlin-Noise-Funktion bestimmt wird. Wenn jeder dieser "laufenden" Pfade einzeln statt kollektiv auf der Leinwand gespeichert werden könnte, könnten Sie dann jeden dieser Pfade mit seinem eigenen Vektorpfad annähern, indem Sie beispielsweise den hier beschriebenen kubischen Bezier-Ansatz verwenden:

http://jimherold.com/2012/04/20/least-squares-bezier-fit/

Dies würde natürlich viel Speicher und Verarbeitungszeit in Anspruch nehmen, da alle Punkte in diesen Wanderwegen einzeln gespeichert und verwendet werden müssten, sodass Sie wahrscheinlich das Intervall anpassen müssten, in dem Sie Punkte auf einem Pfad abtasten. Für jede gegebene Bildgröße müssen Sie einen "Sweet Spot" von Intervallgrößen finden, der den erforderlichen Speicher/die erforderliche Verarbeitung gegen die Genauigkeit des resultierenden Vektorpfads ausgleicht.

Wenn Sie die Verwendung des D3-Frameworks in Featherstons Code verwirrt, finden Sie hier eine Vanilla-js-Implementierung von (Raster-)Perlin-Noise, auf die Sie wahrscheinlich auch verweisen könnten: https://github.com/josephg/noisejs

Wenn der einzige Grund, warum Sie es im Vektorformat haben möchten, eine höhere Auflösung ist, können Sie den obigen Code natürlich auf einer wirklich großen Leinwand ausführen und das Ergebnis speichern.

Vektorformat-Perlin-Rauscheffekt
AntwortenHierDatenschutz-Bestimmungen1y, 0v