EXPLORAR UN EXPERIMENTO ↗
RL-05 · CÓDIGO ABIERTO · SEPTIEMBRE 2026

BN Lab Simulations

Un laboratorio abierto para convertir ecuaciones en instrumentos que se pueden tocar. BN Lab lleva simulaciones científicas de alto nivel al navegador: para entender una idea, construir una tesis o publicar un resultado con una visualización que también se pueda explorar.

LICENCIA MIT V0.1.0 40 EXPERIMENTOS JAVASCRIPT · SIN DEPENDENCIAS GITHUB ↗
00

Qué es BN Lab Simulations

RESUMEN

BN Lab Simulations es una librería MIT para hacer algo sencillo de decir y difícil de hacer bien: que una ecuación no termine en una figura muerta. Cada experimento conserva el modelo, el método numérico y los parámetros que producen lo que se ve; el navegador se convierte en el lugar donde la hipótesis se ejecuta y el lector puede interrogarla.

La usamos para construir simulaciones de alto nivel sin pedirle al lector instalar un entorno científico. Eso permite llevar una intuición a una clase, una visualización única a una tesis o un resultado reproducible a un artículo: el mismo objeto que explica también deja ver sus supuestos, sus controles y sus límites.

El motor se carga con una etiqueta de script, sin compilación ni dependencias. El código, la documentación y la suite de validación quedan abiertos para que otra persona pueda ejecutar el experimento, cambiar una constante y comprobar si la forma resiste.

EXPERIMENTOS40 Caos, ondas, óptica, mecánica cuántica, relatividad, mecánica estadística, autómatas celulares, teoría de números y aprendizaje automático.
TAMAÑO101 KB Minificado, con los cuarenta experimentos. Con un empaquetador se incluyen solo los que se importan.
DEPENDENCIAS0 Canvas 2D y WebGL. Incluye declaraciones de tipos para TypeScript.
LICENCIAMIT Uso libre, incluido el comercial, conservando el aviso de copyright.
—

Fenómenos que se dejan tocar

LA MISMA LIBRERÍA · MUCHAS FORMAS DE PENSAR

Esta es la idea detrás del proyecto: no una colección de efectos, sino una gramática visual para preguntas distintas. Un atractor, una onda, una multitud o un fotón obedecen reglas diferentes; comparten, sin embargo, el mismo pacto: la imagen aparece porque el sistema está corriendo.

Galería de fenómenos simulados por BN Lab Simulations
PHENOMENA · CUARENTA EXPERIMENTOS · CADA FIGURA INTEGRA SUS PROPIAS ECUACIONES EN TU NAVEGADOR
01

Instalación y uso

DESDE UN CDN O CON NPM

La forma más directa es cargar el paquete desde un CDN. Esta versión registra los cuarenta experimentos, que se montan sobre un elemento canvas por su identificador. Si se entrega un contenedor en la opción controls, la librería genera un control deslizante por cada parámetro del modelo.

HTML
<canvas id="sim"></canvas>
<div id="controles"></div>

<script src="https://cdn.jsdelivr.net/gh/4mser/bn-lab-simulations@v0.1.0/dist/bn-lab-simulations.min.js"></script>
<script>
  BNLab.mount(document.getElementById('sim'), 'lorenz', {
    controls: document.getElementById('controles')
  });
</script>

En proyectos con empaquetador, cada experimento es un módulo ES independiente, de modo que el paquete final incluye solo los que se importan:

JAVASCRIPT
// npm install github:4mser/bn-lab-simulations
import { mount } from 'bn-lab-simulations';
import fluid from 'bn-lab-simulations/experiments/fluid';

mount(canvas, fluid, { theme: 'auto', accent: '#0a5cff' });
Resultado del código anterior. Atractor de Lorenz con σ = 10, ρ = 28 y β = 8/3, integrado con Runge-Kutta de cuarto orden y dt = 0,005. El cursor rota la proyección alrededor del eje vertical.
02

Anatomía de un experimento

MODELO DE DATOS Y RESPONSABILIDADES DEL MOTOR

Un experimento es un objeto con un identificador, la lista de sus parámetros y una función make, que construye el estado inicial y devuelve una función step. En cada cuadro, step avanza el sistema un intervalo de tiempo y dibuja el resultado. El motor le entrega el contexto de dibujo ya escalado, las dimensiones del lienzo, los valores vigentes de los parámetros, la posición del puntero y los colores del tema.

El ejemplo implementa un oscilador armónico amortiguado, ẍ = −ω²x − 2ζωẋ, integrado con Euler semi-implícito:

OSCILADOR AMORTIGUADO
const oscilador = define({
  id: 'oscilador',
  name: L('Damped oscillator', 'Oscilador amortiguado'),
  params: [
    { key: 'omega', label: L('Frequency ω', 'Frecuencia ω'), min: 0.5, max: 8, step: 0.1, def: 3 },
    { key: 'zeta',  label: L('Damping ζ', 'Amortiguación ζ'), min: 0, max: 1.2, step: 0.01, def: 0.08 }
  ],
  make() {
    let x = 1, v = 0;
    return {
      step(ctx, w, h, t, acc, P) {
        const dt = 1 / 60;
        v += (-P.omega ** 2 * x - 2 * P.zeta * P.omega * v) * dt;
        x += v * dt;
        ctx.fillStyle = `rgba(${acc},0.95)`;
        ctx.beginPath();
        ctx.arc(w / 2 + x * w * 0.2, h / 2, 14, 0, TAU);
        ctx.fill();
      }
    };
  }
});

El experimento contiene solo el modelo y su representación. El resto lo resuelve el motor:

RESOLUCIÓN

Densidad de píxeles

Escala el lienzo a la densidad del dispositivo y responde a los cambios de tamaño de su contenedor.

RENDIMIENTO

Cálculo bajo demanda

Solo calcula los experimentos visibles y con la pestaña activa. La tasa se limita a 60 cuadros por segundo, de modo que el paso temporal es el mismo en cualquier pantalla.

TEMA

Claro, oscuro o del sistema

Los colores se resuelven desde el tema activo. Cambiarlo no reinicia la simulación.

ACCESIBILIDAD

Movimiento reducido

Con prefers-reduced-motion activo, presenta una imagen estática en lugar de la animación.

CICLO DE VIDA

Liberación de recursos

destroy() elimina los listeners y, en WebGL, las texturas, los programas y los búferes.

03

Navier-Stokes en GPU

EL MÉTODO DE FLUIDOS ESTABLES

El experimento fluid resuelve las ecuaciones de un fluido incompresible con el método de fluidos estables de Stam (1999). Cada campo —velocidad, presión, divergencia, vorticidad y tinta— se almacena en una textura de punto flotante, y cada etapa del algoritmo es un fragment shader que la GPU evalúa en paralelo sobre toda la malla.

∂tu + (u·∇)u = −∇p + f   ·   ∇·u = 0 ECUACIÓN DE MOMENTO Y CONDICIÓN DE INCOMPRESIBILIDAD

Cada paso temporal consta de cuatro etapas:

01 · ADVECCIÓN

Semi-lagrangiana

Cada celda sigue la velocidad hacia atrás durante un intervalo dt y toma el valor del campo en ese punto. El esquema es incondicionalmente estable, a costa de introducir difusión numérica.

02 · PROYECCIÓN

Ecuación de Poisson

Se calcula la divergencia del campo y se resuelve ∇²p = ∇·u con iteraciones de Jacobi. Restar el gradiente de presión deja un campo sin divergencia (Chorin, 1968).

03 · VORTICIDAD

Confinamiento

Reintroduce la rotación a pequeña escala que la difusión numérica disipa (Fedkiw, Stam y Jensen, 2001).

04 · VISUALIZACIÓN

Luz o pigmento

La tinta se sombrea con una normal derivada de su propio gradiente. En tema oscuro se suma como luz; en tema claro, la misma densidad se interpreta como pigmento.

La implementación adapta la estructura de WebGL-Fluid-Simulation, de Pavel Dobryakov (licencia MIT), cuyo aviso se conserva en el repositorio. Se modificó para funcionar como experimento de la librería y para tratar las texturas de medio flotante de WebGL2 como filtrables, conforme a la especificación, lo que mantiene la compatibilidad con dispositivos iOS.

Solucionador en ejecución. Arrastrar el cursor aplica una fuerza local. Con dos iteraciones de presión la proyección queda incompleta y el campo deja de ser incompresible.
ALCANCE DEL MODELO

Es un modelo bidimensional, sin término viscoso explícito —un decaimiento exponencial cumple esa función— y numéricamente difusivo. Es adecuado para estudiar advección, presión e incompresibilidad, no para cálculos de ingeniería, y no aborda la cuestión de regularidad en tres dimensiones del problema del milenio.

04

Validación numérica

CADA ESQUEMA CONTRA SU REFERENCIA

Que una figura se vea correcta no garantiza que su esquema numérico lo sea. La librería incluye una suite de validación que ejecuta las mismas funciones que corren en pantalla y las compara con valores conocidos: un exponente publicado, una cantidad conservada o una solución exacta. Los criterios de aceptación están fijados en el código, y la suite se ejecuta con npm run validate.

EXPERIMENTOMAGNITUDESQUEMAMEDIDOREFERENCIA
Atractor de LorenzMayor exponente de Lyapunov (método de Benettin) RK40,90720,9056 · Sprott 2003
Péndulo dobleError relativo de energía en 60 s, sin amortiguación RK41·10⁻⁶ %0 · sistema hamiltoniano
Órbitas de KeplerDeriva del momento angular · precesión del periapsis Leapfrog7·10⁻¹⁴ · 0,38°0 · 0°
Modelo de IsingMagnetización a T = 2,0 en red de 64×64 Metropolis0,91130,9113 · Onsager–Yang

Lorenz. El exponente de Lyapunov cuantifica la sensibilidad a las condiciones iniciales. Se siguen dos trayectorias separadas por 10⁻⁸ durante 3.000 unidades de tiempo, renormalizando su distancia cada diez pasos, y se promedia el crecimiento logarítmico. El valor medido difiere en 0,18 % del publicado.

Péndulo doble. Sin amortiguación el sistema es hamiltoniano y su energía total debe conservarse. Tras un minuto de simulación, el error relativo es del orden de una millonésima de por ciento; la única disipación presente es la que fija el parámetro de amortiguación.

Kepler. El integrador leapfrog es simpléctico y conserva el momento angular de forma exacta, por lo que las áreas barridas en intervalos iguales coinciden a precisión de máquina, como exige la segunda ley. Con 64 subpasos por cuadro, el periapsis se desplaza menos de medio grado por órbita.

Órbitas de Kepler. Tres planetas bajo gravedad newtoniana. Las cuñas sombreadas se trazan a intervalos iguales de tiempo y tienen la misma área. El cursor actúa como una segunda masa.

Ising. Bajo la temperatura crítica de Onsager, la magnetización medida con Metropolis coincide con la solución exacta de Yang hasta la cuarta cifra. Cerca de Tc ≈ 2,269 la red finita no reproduce la transición abrupta —mide 0,495 donde el límite termodinámico da 0,377—, un efecto de tamaño finito esperado que la suite reporta fuera del criterio de aceptación.

06

Contribuciones

CRITERIOS PARA INCORPORAR UN EXPERIMENTO

El repositorio acepta experimentos nuevos que cumplan cuatro criterios. El procedimiento completo está descrito en CONTRIBUTING.md.

CRITERIO 01Modelo La figura resulta de integrar o muestrear un sistema, no de una animación predefinida.
CRITERIO 02Método Integrador, paso temporal y sesgos conocidos, documentados junto al código.
CRITERIO 03Validación Si existe un invariante o un resultado conocido, se agrega a la suite con su criterio de aceptación.
CRITERIO 04Referencias Fuentes primarias con revista, volumen, año y páginas.
07

Cómo citar

MATERIAL DOCENTE, ARTÍCULOS Y PRESENTACIONES

Si la librería se usa en material docente, un artículo o una presentación, se puede citar de la siguiente forma. El repositorio incluye además un archivo CITATION.cff que GitHub convierte a APA y BibTeX.

CITA
Moreno, N. (2026). BN Lab Simulations (v0.1.0) [Software]. B&N Solutions.
https://github.com/4mser/bn-lab-simulations
—

Referencias

MÉTODOS NUMÉRICOS Y VALIDACIÓN
  1. Alexandre J. ChorinNumerical solution of the Navier-Stokes equationsMath. Comp. 22, 1968, 745–762
  2. Jos StamStable fluidsProceedings of SIGGRAPH 99, 1999, 121–128
  3. Ronald Fedkiw, Jos Stam, Henrik Wann JensenVisual simulation of smokeProceedings of SIGGRAPH 2001, 15–22
  4. Mark J. HarrisFast fluid dynamics simulation on the GPUGPU Gems, cap. 38, Addison-Wesley, 2004
  5. Pavel DobryakovWebGL-Fluid-Simulation2017 · licencia MIT
  6. Edward N. LorenzDeterministic nonperiodic flowJ. Atmos. Sci. 20, 1963, 130–141
  7. G. Benettin, L. Galgani, A. Giorgilli, J.-M. StrelcynLyapunov characteristic exponents for smooth dynamical systems and for Hamiltonian systemsMeccanica 15, 1980, 9–20
  8. Julien C. SprottChaos and Time-Series AnalysisOxford University Press, 2003
  9. Lars OnsagerCrystal statistics. I. A two-dimensional model with an order-disorder transitionPhys. Rev. 65, 1944, 117–149
  10. C. N. YangThe spontaneous magnetization of a two-dimensional Ising modelPhys. Rev. 85, 1952, 808–816
  11. N. Metropolis, A. W. Rosenbluth, M. N. Rosenbluth, A. H. Teller, E. TellerEquation of state calculations by fast computing machinesJ. Chem. Phys. 21, 1953, 1087–1092
  12. E. Hairer, C. Lubich, G. WannerGeometric Numerical IntegrationSpringer, 2.ª ed., 2006
ESCRITO PORNicolás Moreno

Cofundador y CTO en B&N Solutions.