PINONITE/NIKOLAS PINON ← CREATIVE SYSTEMS
PINONITE · NOTAS DE CAMPO · CREATIVE SYSTEMS
PUBLICADO10 de agosto de 2026

PROYECTO PERSONAL · CONSTRUIDO FUERA DEL TRABAJO

Código creativo CREATIVE SYSTEMS ↗

Boids y flocking: tres reglas locales para crear una bandada convincente

Un algoritmo interactivo de flocking con boids, construido con separación, alineación, cohesión e indexación espacial con quadtree para bandadas más grandes y reactivas.

Una bandada parece coordinada desde lejos y obstinadamente local desde dentro. Cada chico conoce sólo un barrio. Se aleja de las aglomeraciones, se dirige hacia rumbos cercanos y hacia un centro local. La animación parece intencionada aunque ningún objeto puede ver toda la formación.

Este fue el experimento central en mi artículo original sobre boids y la implementación de Canvas. El rebaño final es un caos bonito pero explicativo: tres fuerzas, vecindarios en movimiento, límites envolventes y un índice espacial, todo opera a la vez. La ruta más clara comienza con dos boids que simplemente están demasiado cerca.

Primero, deja de superponerte

Empieza con una regla. Separation mira a los vecinos más cercanos y se aleja, ponderando con más fuerza las colisiones más cercanas.

MODELO EN VIVO / boid separation

Empieza con un desacuerdo local

INTERACTIVO
MUNDO HASTA AHORA
  1. Empezar por separarse +
PREGUNTA ¿Cómo resuelven dos boids cercanos una colisión sin teletransportarse?
COMPARA DOS CONDICIONES
OBSERVA

Arrastra un boid hacia el otro. La propuesta de separación debe crecer de forma continua cuando se reduce la distancia.

TU TURNOCompara la condición A con la B y observa qué cambió.
ARRASTRA UN BOID HACIA EL OTRO
FUERZA DE SEPARACIÓN 0.32 DISTANCIA ENTRE VECINOS 69 PX
Transcripción accesible del experimento

Dos boids cercanos producen fuerzas de separación opuestas antes de introducir alineación o cohesión. Gesto en el lienzo: arrastra un boid hacia el otro.

Solo la separación está activa. Arrastra un boid hacia el otro y observa cómo crece el empuje cuando se reduce la distancia.

Esto corrige la superposición, pero produce lo opuesto a una bandada. Cada encuentro termina con los boids alejándose más. Para evitar colisiones se necesita una tendencia opuesta que mantenga unido al vecindario.

Un grupo aún puede estar en desacuerdo

Añade cohesion. Cada boid promedia posiciones cercanas y propone un giro hacia ese centro local. La separación aún protege el espacio personal, por lo que los agentes se reúnen sin colapsar en un solo punto.

MODELO EN VIVO / boid cohesion

Agrega un centro local

INTERACTIVO
MUNDO HASTA AHORA
  1. Empezar por separarse ✓
  2. Un grupo todavía puede discrepar +
PREGUNTA ¿Cómo forman un grupo los vecinos dispersos sin colapsar en un punto?
COMPARA DOS CONDICIONES
OBSERVA

Arrastra el centro local a otra posición. El grupo debe seguirlo sin colapsar en un solo punto.

TU TURNOCompara la condición A con la B y observa qué cambió.
ARRASTRA EL CENTRO LOCAL; EL GRUPO LO SIGUE
FUERZA DE COHESIÓN 0.26 DISPERSIÓN DEL GRUPO 187 PX
Transcripción accesible del experimento

La separación evita superposiciones y la cohesión atrae hacia un centro local; las direcciones aún discrepan. Gesto en el lienzo: arrastra el centro local; el grupo lo sigue.

Arrastra el centro local mientras la separación sigue activa. La cohesión hace que el grupo lo siga sin colapsar y revela un nuevo defecto: los boids comparten espacio, pero no dirección.

El grupo ahora existe, pero se agita y se agita. Los vecinos pueden mirar en direcciones opuestas mientras persiguen el mismo centro. La pieza que falta no es una atracción más fuerte; es un acuerdo sobre la velocidad.

La alineación convierte a un grupo en un rebaño

Alignment promedia la velocidad del vecino y ajusta el rumbo actual hacia él. Cada cuadro produce ahora tres propuestas: alejarse del hacinamiento, moverse hacia el centro local y rotar hacia el rumbo local.

La implementación no teletransporta a un boid a ningún objetivo. Agrega las fuerzas ponderadas a la aceleración, aplica velocidad, limita la velocidad, borra la aceleración y repite. La fuerza máxima es lo que convierte un objetivo abrupto en una dirección gradual.

MODELO / EXPLICACIÓNPropuesta de dirección combinada
ai=wsSi + waAi + wcCi

Combina tres opiniones locales de dirección en la aceleración usada durante este cuadro.

  1. 01
    Crear espacioLa separación apunta en sentido contrario a vecinos demasiado cercanos.
  2. 02
    Igualar la direcciónLa alineación gira hacia la velocidad promedio de los boids cercanos.
  3. 03
    Permanecer juntosLa cohesión apunta hacia el centro local del grupo.
  4. 04
    Equilibrar y combinarCada w cambia la influencia de una regla. La suma ponderada se vuelve aceleración antes de aplicar límites de fuerza y velocidad.
La separación, el alineamiento y la cohesión siguen siendo vectores distintos. Su suma ponderada se convierte en aceleración, que luego se restringe antes de que cambie la velocidad.
VECTOR FIELD / THREE RULES

El camino visible es una suma de vectores restringidos.

SIGUE LAS FLECHAS
01 · Local neighbors

Only boids inside the current perception neighborhood contribute.

Transcripción accesible del diagrama

A local neighborhood feeds separation, alignment, and cohesion. Their weighted vectors sum into bounded acceleration.

Selecciona cada regla para inspeccionar su contribución. Ninguno es suficiente por sí solo; el rebaño emerge de su desacuerdo ponderado.
MODELO EN VIVO / boids field

Ahora deja que las tres reglas discrepen.

INTERACTIVO
MUNDO HASTA AHORA
  1. Empezar por separarse ✓
  2. Un grupo todavía puede discrepar ✓
  3. La alineación crea una bandada +
PREGUNTA ¿Cuánto contexto local necesita cada boid para que el grupo parezca coordinado?
COMPARA DOS CONDICIONES
OBSERVA

Presiona y arrastra a través de la bandada. Los boids cercanos deben dispersarse y luego recuperar el acuerdo local.

TU TURNOCompara la condición A con la B y observa qué cambió.
PRESIONA Y ARRASTRA A TRAVÉS DE LA BANDADA
RADIO DE PERCEPCIÓN 40 PX TAMAÑO DE BANDADA 46 BOIDS
Transcripción accesible del experimento

Los boids combinan separación, alineación y cohesión dentro de un radio de percepción local. Gesto en el lienzo: presiona y arrastra a través de la bandada.

La separación y la cohesión permanecen en el mundo; la alineación completa la bandada. Arrastra a través del grupo para romper el acuerdo local y observar cómo se recupera.

El resultado finalmente parece flocado. Ese éxito visual oculta una falla computacional: cada boid todavía escanea a los demás antes de decidir qué vecinos están lo suficientemente cerca como para importar.

El radio es parte del comportamiento.

La nota original trataba los ratios de percepción como un problema práctico de sintonización. La cohesión necesitaba la conciencia más amplia, alinear un vecindario más pequeño y separar la zona inmediata más pequeña. El código archivado transmite esa relación a través de un valor de percepción base escalado por el tamaño del cuerpo.

La proporción exacta no es una constante biológica universal. Es un parámetro de diseño cuyos efectos se pueden observar:

  • demasiada separación disuelve el rebaño;
  • la alineación sin suficiente cohesión crea corrientes que se separan;
  • la cohesión sin separación colapsa los cuerpos en un centro abarrotado;
  • un vecindario de gran tamaño hace que cada chico reaccione a toda la escena y elimina la textura local.

Por eso la manipulación directa es más útil que una fórmula estática aquí. Al perturbar la bandada, el lector puede observar el cambio de régimen y la recuperación sobre el campo.

El muro de todos los pares

La primera versión comparaba cada boid con todos los demás. Esa amplia fase crece cuadráticamente: duplicar la población aproximadamente cuadriplica los controles de pares. El síntoma visible es la degradación del marco, pero el problema de diseño es una atención redundante. Los boids más distantes no pueden influir en el cálculo de dirección actual.

La implementación posterior construye un árbol cuádruple y consulta celdas alrededor de cada boid. Eso no elimina los controles de distancia exacta. Los hace asequibles al devolver primero un conjunto de candidatos más pequeño.

MODELO EN VIVO / quadtree query

Pregunta al índice antes de medir la distancia.

INTERACTIVO
MUNDO HASTA AHORA
  1. Empezar por separarse ✓
  2. Un grupo todavía puede discrepar ✓
  3. La alineación crea una bandada ✓
  4. Limitar quién puede importar +
PREGUNTA ¿Podemos ignorar boids lejanos antes de pagar una medición exacta?
COMPARA DOS CONDICIONES
OBSERVA

Mueve la consulta por el índice y arrastra el borde verde. Los conteos de candidatos e impactos exactos deben cambiar por separado.

TU TURNOCompara la condición A con la B y observa qué cambió.
MUEVE PARA CONSULTAR; ARRASTRA EL ANILLO PARA AJUSTARLO
RADIO DE CONSULTA 77 PX PUNTOS INDEXADOS 68 PUNTOS
Transcripción accesible del experimento

Los puntos subdividen el plano; un radio móvil resalta solo los candidatos de las celdas intersectadas. Gesto en el lienzo: mueve para consultar; arrastra el anillo para ajustarlo.

Mueve el círculo de consulta. Las células que se cruzan producen candidatos; La distancia exacta aún decide qué puntos resaltados pertenecen realmente al vecindario.
MODELO / EXPLICACIÓNCosto de fase amplia
Tall-pairs = O(n²)Tindexed ≈ O(n log n + nk)

Compara revisar cada par posible con pedir primero candidatos cercanos a un índice espacial.

  1. 01
    Todos los paresCon n boids, cada uno revisa aproximadamente otros n. El trabajo crece con n al cuadrado.
  2. 02
    Construir el índiceOrganizar las posiciones cuesta cerca de n por log n en lugar de comparar cada par directamente.
  3. 03
    Revisar candidatos localesCada boid prueba solo k candidatos cercanos. Si k sigue pequeño, la fase de distancias exactas se mantiene manejable.
El quadtree no cambia el flocado. Cambia la cantidad de boids obviamente irrelevantes que alcanzan la fase de distancia exacta.
BROAD PHASE / COMPLEXITY SWITCH

Un quadtree cambia la fase amplia, no la regla de flocado

SIGUE LAS FLECHAS
replace broad phase
01 · All-pairs scan

Every boid checks every other boid, producing quadratic broad-phase work.

Transcripción accesible del diagrama

The optimization replaces an all-pairs broad phase with spatial candidates, but retains exact distance checks before steering.

Las células espaciales eliminan cuerpos obviamente irrelevantes. La distancia exacta aún decide qué candidatos pertenecen dentro de cada radio de percepción.

Mantener los controles, exponer los vectores

El source experiment es más fuerte cuando expone sus variables: los tres pesos, sus radios visibles, la variación de la población, los límites mundiales y el índice espacial. Esos controles convierten una animación decorativa en un pequeño laboratorio.

Mantendría esa franqueza y revisaría dos cosas. En primer lugar, la explicación debe informar los recuentos de candidatos de fase amplia junto con los recuentos de vecinos reales para que la optimización sea observable. En segundo lugar, un boid seleccionado debe exponer sus tres contribuciones vectoriales como flechas que se pueden pausar y comparar cuadro por cuadro.

La lección duradera es pequeña: el movimiento coordinado no requiere un destino compartido. Requiere reglas locales compatibles, una visión limitada de los vecinos y restricciones suficientes para que cada corrección siga siendo una corrección en lugar de un salto.

Juntar las piezas

La demostración del código fuente es más útil ahora que el lector puede nombrar lo que combina. Expone los tres pesos, sus radios de vecindad, población, límites y la superposición de quadtree en un campo. Haga clic para agregar una bandada local y use los controles de depuración para conectar el movimiento final con los ejemplos más pequeños anteriores.

El final recombina separación, alineación, cohesión, percepción limitada, manejo de límites y consultas de vecinos indexados.
Abrir Ejecute el sistema completo boids y quadtree ↗