Cero dependencias · WebGL2 nativo
Una biblioteca TypeScript enfocada en banderas con física de partículas conectadas.
Demostración
Pruébala aquí.
Ajusta el viento y la turbulencia, cambia el perfil de renderizado o arrastra la tela directamente.
Arrastra cualquier punto libre.
Núcleo de 14 kB comprimido
TypeScript o React.
El mismo solver sin dependencias está disponible mediante ambos puntos de entrada.
Leer el inicio rápidoimport { createFlagCloth } from 'flag-cloth';
const flag = createFlagCloth({
container: document.querySelector('#flag'),
texture: '/signal.webp',
segments: { x: 32, y: 20 },
attachment: 'left',
wind: { strength: 7, turbulence: .35 },
interaction: { enabled: true },
});Integración Verlet
Observa cómo funciona el solver.
El viento mueve las partículas mientras las restricciones estructurales, diagonales y de flexión mantienen unida la cuadrícula. Cambia la sujeción, ajusta el viento o arrastra cualquier punto libre.
Arrastra cualquier partícula blanca
flag-cloth