Parámetros del ruido
Resultado
Agua Arena Hierba Montaña Nieve
El lienzo se calcula a 256×256 píxeles y se escala a tu pantalla con bordes nítidos. Cada píxel es un valor de ruido entre 0 y 1.
Cargando aplicación...
Preparando tu experiencia meskeIA
Genera terreno procedural en tiempo real: ajusta escala, octavas y persistencia, prueba semillas y mira cómo nace un mapa de biomas estilo Minecraft
Qué es el ruido coherente, cómo funciona el fBm y para qué se usa en videojuegos
| Tipo | ¿Cómo se calcula? | Aspecto | ¿Útil para terreno? | Coste |
|---|---|---|---|---|
| Ruido aleatorio puro | Cada píxel, un número independiente | Granulado tipo «nieve» de TV | No: no hay formas ni continuidad | Muy bajo |
| Ruido de Perlin (1 octava) | Interpola gradientes en una rejilla | Manchas suaves y onduladas | Sí, pero demasiado liso | Bajo |
| Ruido fractal (fBm) | Suma varias octavas de Perlin | Colinas grandes + detalle fino | Sí, es el estándar para paisajes | Medio (× nº de octavas) |
Mundos abiertos como Minecraft o No Man's Sky generan la altura del terreno con ruido y la dividen en biomas por rangos de altura. Una semilla = un mundo entero.
💡 Cambiar la escala hace los continentes más grandes o más fragmentados.
El ruido fractal sirve para nubes, humo, mármol, madera o vetas: se mapea el valor de ruido a un degradado de color en lugar de a una altura.
💡 Animar el ruido en el tiempo (3D, con z = tiempo) da nubes que se mueven.
Combinando un mapa de altura y otro de humedad (dos ruidos con semillas distintas) se deciden desiertos, bosques o tundra, no solo por la altura.
💡 Aquí solo usamos la altura; añadir un segundo ruido de humedad es el paso natural.
El ruido coherente da movimiento natural: parpadeo de fuego, ondas de agua, temblor de cámara o desplazamiento de partículas sin que parezca aleatorio brusco.
💡 Por su suavidad, el ruido de Perlin es ideal para animar sin saltos bruscos.
Lo creó Ken Perlin en 1983 mientras trabajaba en los efectos de la película Tron, porque las texturas generadas por ordenador de la época parecían demasiado artificiales. La técnica se hizo tan influyente que en 1997 recibió un Oscar técnico de la Academia. En 2001 publicó una versión mejorada, el Simplex noise, más rápida en dimensiones altas.
💡 El ruido que ves aquí es el Perlin clásico de 1985, el más didáctico para empezar.
Porque no asigna un valor aleatorio a cada punto, sino que coloca gradientes pseudoaleatorios en las esquinas de una rejilla e interpola entre ellos con una curva suave (la función fade). Así, dos puntos cercanos siempre tienen valores parecidos, lo que produce transiciones graduales en lugar de saltos.
💡 Esa continuidad es la razón por la que sirve para terreno: el mundo real también es continuo.
Con 1 octava obtienes formas grandes y lisas. Cada octava añadida superpone una capa de ruido con el doble de frecuencia y menos amplitud, lo que aporta detalle cada vez más fino: rugosidades, riscos, pequeñas islas. A partir de 6-8 octavas el detalle extra ya casi no se aprecia y solo cuesta más cálculo.
💡 Prueba con 1 octava y sube de una en una para ver cómo aparece el detalle.
La persistencia decide cuánta amplitud conserva cada octava respecto a la anterior. Con persistencia alta (0,7-0,9) las octavas de detalle pesan mucho y el terreno sale rugoso y caótico. Con persistencia baja (0,1-0,3) el detalle apenas influye y el resultado es suave, dominado por las formas grandes.
💡 0,5 es un valor de partida equilibrado: cada octava pesa la mitad que la anterior.
El ruido devuelve un número entre 0 y 1 que aquí se interpreta como altura. Después se reparten franjas: por debajo de 0,30 es agua, hasta 0,40 arena, hasta 0,65 hierba, hasta 0,82 montaña y por encima nieve. Cambiar esos umbrales modifica cuánta superficie ocupa cada bioma sin tocar el ruido en sí.
💡 Subir el umbral del agua «inunda» el mapa; bajarlo deja más tierra firme.
Porque la semilla inicializa un generador pseudoaleatorio determinista (aquí mulberry32), que baraja siempre igual la tabla de permutación del ruido. No hay azar real: con la misma semilla y los mismos parámetros, cada píxel se calcula idéntico. Por eso los juegos permiten compartir una semilla para recrear exactamente un mundo.
💡 Anota una semilla que te guste: podrás reproducir ese mapa cuando quieras.
A partir de la semilla se baraja la tabla de permutación (0..255 duplicada a 512). Esto fija las direcciones de los gradientes y hace el resultado reproducible.
Para cada píxel, busca la celda de la rejilla, mezcla los gradientes de sus cuatro esquinas con la curva fade e interpola (lerp) para obtener un valor suave entre -1 y 1.
Repite con el doble de frecuencia y menos amplitud en cada octava, y suma. Las primeras octavas dan las formas grandes; las últimas, el detalle fino.
Divide la suma entre la suma de amplitudes y reescala de [-1, 1] a [0, 1]. Así el valor es comparable entre configuraciones y se puede usar como altura.
Convierte el valor en gris (×255) o en un bioma por rangos de altura, y escríbelo en el ImageData del canvas píxel a píxel.
Barajar 0..255 una vez y duplicarla a 512 evita comprobar desbordamientos de índice y hace el ruido rápido y determinista.
Divide entre la suma de amplitudes. Si no, al cambiar octavas o persistencia el rango se descontrola y el mapa sale lavado o saturado.
Pintar píxel a píxel con putImageData es mucho más rápido que dibujar miles de rectángulos pequeños en el canvas.
La frecuencia base define el «zoom». Multiplica las coordenadas del píxel por ella; valores muy altos rompen la continuidad y vuelve a parecer ruido puro.
Genera primero el valor de ruido y decide el color después por rangos. Así puedes reajustar los biomas sin recalcular el ruido.
Calcula a baja resolución (aquí 256×256) y escala por CSS con image-rendering: pixelated para no difuminar el mapa.