🐟 Cardumen de Peces 3D
Observa cientos de peces formar un cardumen usando el algoritmo Boids en un océano pseudo-3D. Un tiburón depredador acecha desde abajo; los peces se dividen, se reagrupan y escapan usando fuerzas de separación, alineación y cohesión.
Qué Demuestra
Esta simulación modela el comportamiento animal colectivo usando el algoritmo Boids de Craig Reynolds (1986). Cada pez sigue tres reglas locales simples — separación, alineación y cohesión — y sin embargo el resultado global es un cardumen realista y fluido. Cuando el tiburón depredador se acerca, los peces cambian a una respuesta de huida, generando espectaculares dinámicas de división y reagrupación.
Cómo Usarlo
Ajusta el Número de Peces, la Velocidad y los tres radios de fuerza de bandada. Activa o desactiva el depredador para comparar el cardumen con y sin amenaza. Prueba un radio de cohesión grande para cardúmenes compactos, o un radio de alineación grande para grupos muy sincronizados.
¿Sabías Que...?
Los cardúmenes de peces confunden a los depredadores mediante el efecto de confusión — un depredador que apunta a un pez lo pierde entre la multitud. Los modelos tipo Boids también se usan en animación (por ejemplo, la estampida en El Rey León) y en la coordinación de enjambres de drones autónomos.
Acerca de esta simulación
Esta simulación representa un modelo de bandada Boids (Craig Reynolds, 1986) como un cardumen de peces pseudo-3D visto desde arriba. Cada pez explora a los vecinos cercanos dentro de tres radios independientes — separación, alineación y cohesión — y combina los vectores de dirección resultantes en su propio rumbo en cada fotograma. Un tiburón cazador añade una cuarta fuerza, huida, que anula la formación en bandada cuando un pez entra en el radio de pánico, produciendo el comportamiento de división y reagrupación que los cardúmenes reales usan para sobrevivir a la depredación.
🔬 Qué muestra
200 peces (ajustable entre 50 y 400) se asignan a una de tres capas de profundidad, cada una con su propia paleta y tamaño, de modo que los cardúmenes superpuestos se leen como un océano 3D en un lienzo 2D. Cada pez solo reacciona a los vecinos de capas adyacentes, comparando la distancia al cuadrado con los radios de separación (28px por defecto), alineación (55px) y cohesión (80px) para calcular una fuerza de dirección en cada fotograma, junto con un tiburón que se dirige hacia el centroide de los peces y peces que huyen al entrar en el radio de pánico de 110px.
🎮 Cómo usarlo
Arrastra Número de Peces y Velocidad para cambiar la escala y el ritmo, luego ensancha o estrecha los tres radios de bandada para ver cardúmenes más compactos o más sueltos, con giros más o menos sincronizados. Activa o desactiva el Depredador para comparar la formación tranquila con la dinámica de pánico, y ajusta la Velocidad del Tiburón y el Radio de Pánico para hacer la caza más fácil o más difícil de evitar. El panel de estadísticas en vivo informa el número de peces, el número de clústeres (un flood-fill sobre el radio de cohesión), los peces en pánico y los FPS.
💡 ¿Sabías que...?
El artículo original de Boids de Reynolds de 1987 no necesitaba líder ni reglas globales — la formación en bandada, en cardumen y en manada emerge de tres reglas puramente locales aplicadas por cada individuo simultáneamente. Los cardúmenes de peces reales usan el mismo truco contra los depredadores: un tiburón que apunta a una silueta en una multitud que se mueve rápido pierde repetidamente el objetivo, lo que se conoce como efecto de confusión, que es exactamente la razón por la que los peces de esta simulación se dispersan y se reagrupan en lugar de simplemente huir en línea recta.
Preguntas frecuentes
¿Cuáles son las tres reglas de Boids y qué hacen?
La separación aleja a cada pez de los vecinos que están demasiado cerca, evitando colisiones. La alineación orienta a un pez para que coincida con el rumbo medio de los vecinos dentro de su radio de alineación, produciendo giros sincronizados. La cohesión dirige a un pez hacia la posición media de los vecinos dentro de su radio de cohesión, manteniendo unido al grupo. Las tres fuerzas se suman en cada fotograma para producir un único vector de dirección final por pez.
¿Por qué los peces parecen nadar en 3D sobre un lienzo plano?
A cada pez se le asigna aleatoriamente una de tres capas de profundidad con un tamaño y una paleta de color distintivos — peces más grandes y brillantes para la capa de superficie y más pequeños y oscuros para la capa profunda. Los peces solo se agrupan con vecinos en la misma capa o en una adyacente, y se dibujan primero los de la capa más profunda en cada fotograma, así que la capa sumada a la oclusión crea una ilusión convincente de profundidad sin ninguna geometría 3D real.
¿Cómo decide el tiburón dónde cazar?
El tiburón calcula el centroide (posición media) de todos los peces en pantalla y se dirige hacia él con una pequeña aceleración constante, limitada por el ajuste de Velocidad del Tiburón. No apunta a peces individuales — simplemente persigue el centro de masa de la multitud, por lo que un cardumen que se divide en dos grupos puede realmente confundirlo y ganar tiempo para que ambas mitades escapen.
¿Qué hace que un pez entre en pánico y cómo cambia eso su comportamiento?
Un pez entra en modo pánico cuando cae dentro del Radio de Pánico del tiburón; cuanto más cerca está, más fuerte es la fuerza de huida añadida que lo empuja directamente lejos del tiburón. Los peces en pánico se dibujan en un amarillo-naranja de advertencia, nadan hasta el doble de rápido que su velocidad máxima normal y baten la cola más rápido, y el pánico decae gradualmente una vez que el tiburón ya no está cerca.
¿Cómo se calcula la estadística de "Clústeres"?
La simulación ejecuta un flood-fill (búsqueda en anchura) sobre el arreglo de peces: partiendo de un pez no visitado, añade repetidamente cualquier otro pez no visitado dentro del radio de cohesión al mismo grupo, luego pasa al siguiente pez no visitado y comienza un nuevo grupo. El número total de grupos formados así es el recuento de clústeres mostrado en el panel de estadísticas, actualizado aproximadamente seis veces por segundo.
Observa cientos de peces formar un cardumen usando el algoritmo Boids en un océano pseudo-3D. Un tiburón depredador acecha desde abajo; los peces se dividen, se reagrupan y escapan usando fuerzas de separación, alineación y cohesión.
3D · Renderizador Three.js / WebGL · Objetivo de 60 FPS · funciona totalmente en el cliente, sin instalación