Estoy buscando generar un ruido que se vea así:
(Imágenes cortesía de Understanding Perlin Noise )
Básicamente estoy buscando ruido con muchas pequeñas "ondas". Lo siguiente no es deseable:
¿Hay alguna forma simple de hacer esto? He estado viendo Perlin y Simplex durante una semana y parece que nunca puedo hacer que funcione en JavaScript, o cuando lo hago, no tengo los parámetros correctos para generar tales imágenes, o es insoportablemente lento.
Entiendo que las 3 imágenes que publiqué probablemente podrían lograrse con el mismo algoritmo pero a una escala diferente, pero no necesito ese algoritmo. Solo necesito un algoritmo muy simple para lograr algo como en la primera imagen idealmente. Tal vez algún tipo de desenfoque haría el trabajo, pero no puedo lograr resultados.
Estoy desarrollando esto en JavaScript, pero cualquier tipo de código o incluso una explicación simple y detallada funcionará.
Respuestas:
Si bien las respuestas existentes proporcionan una buena manera de lograr lo que muestran las imágenes en la pregunta, los comentarios revelaron que el objetivo es generar una imagen como se muestra a continuación:
Este tipo de ruido es bastante diferente del ruido que se muestra en las imágenes de la pregunta, ya que forma gotas aisladas cercanas.
Resulta que este tipo de ruido se llama turbulencia que (según este artículo de CPU Gems ) se implementa de la siguiente manera (donde
noise
está la función de ruido de Perlin que devuelve valores de -1..1):Agrupar esta implementación de JavaScript Perlin-noise con la función de turbulencia descrita anteriormente genera un ruido que es bastante similar a la imagen de arriba:
El código JavaScript que se utilizó para generar la imagen de arriba se puede encontrar en este jsFiddle .
fuente
return Math.abs(this.noise(x,y,z)*2)-.5
.Sus imágenes de ejemplo se parecen mucho al ruido rosa. Se genera así:
Primero, tenemos algún tipo de ruido aleatorio suave. Por lo general, esto se logra mediante el cálculo de valores pseudoaleatorios en puntos con coordenadas enteras y la interpolación de estos valores de alguna manera. El resultado en esta etapa se ve así:
Luego, tomamos este ruido y lo "exprimimos", aumentando su frecuencia. La fórmula más simple para esto es n2 (x, y) = n1 (x f, y f). De esta manera, el patrón de ruido se exprime f veces en ambos directones. Los mejores algoritmos de ruido también rotan y / o traducen el patrón de ruido en este paso, para romper las regularidades.
Luego, este patrón comprimido se multiplica por algún valor (menor que 1) y se agrega al primer patrón. En efecto, agregamos una pequeña variación de alta frecuencia sobre el patrón de baja frecuencia. El resultado se parece a esto:
Los pasos 2 y 3 pueden repetirse varias veces, agregando detalles cada vez más finos. el resultado neto generalmente se parece a su ejemplo con la cruz roja. Sin embargo, tenga en cuenta que tenemos 3 parámetros en nuestro algoritmo para jugar:
Aquí hay unos ejemplos:
Alta persistencia:
Alta lacunaridad:
Baja lacunaridad:
Jugar con estos parámetros no es lo único que puedes hacer. Una buena técnica que puede agregar caracteres a los patrones de ruido es usar perturbación , es decir, agregar algo de ruido a las coordenadas de entrada de su función de ruido.
Por ejemplo, suponga que tiene alguna función que genera el ruido coordenadas dadas y semilla aleatoria:
Noise(x,y, seed)
. Entonces puede usar algo comoNoise(x+Noise(x,y,234), y+Noise(x,y,6544), seed)
para obtener un valor perturbado. Esto puede conducir a patrones como este (la perturbación se aplica al patrón circular aquí, no al ruido):Si desea obtener más información, le sugiero que eche un vistazo a libnoise (C ++) o CoherentNoise (C #). Desafortunadamente, no conozco ninguna biblioteca de generación de ruido Javascript.
fuente
El código está comentado. El crédito va a Sean McCullough. http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
Además, si usa un PRNG con eso, puede obtener fácilmente resultados fáciles de reinstalar
fuente
Utilice texturas pregeneradas o coloque un generador de textura de ruido perlin en un servidor y consulte las imágenes de ruido perlin.
fuente