Motor simulador y graficador de cuerpos rígidos
Completamente en Español
Proyecto de estudio
Creado por Nicolás Donoso
Versión actual: muijs-cuerpos@0.53.8
'mui.js - cuerpos' es un motor para simular y graficar interacciones entre cuerpos rígidos.
Hasta el momento permite:
- crear y dibujar figuras geométricas
- crear cuerpos con formas geométricas
- mover y acelerar cuerpos
- detectar colisiones entre cuerpos y con cuerpos contenedores
- crear cuerpos atractores y repulsores
- crear cuadrículas y pintar sus celdas según su estado
- incorporar controles y eventos con mouse y teclado
- choque elástico entre circunferencias
- grabar canvas
- control de tick y fps
- calcular colisiones con quadtree
npm install muijs-cuerpos
'mui.js - cuerpos' utiliza el elemento HTML Canvas.
Para dibujar, tienes que tener en tu proyecto un canvas con su id definida.
<canvas id="mi-canvas"></canvas>
En un archivo TypeScript importa la herramienta de dibujo y el generador de formas geométricas.
import { Dibujante, Forma } from 'muijs-cuerpos'
La herramienta Forma permite crear distintas formas geométricas. Usaremos el método rectangulo:
Forma.rectangulo(x: number, y: number, base: number, altura: number, opciones?: OpcionesForma & OpcionesGraficasForma)
Los primeros 2 parámetros son para las coordenadas (x, y) de su centro (considera que en el Canvas el eje Y está invertido, el origen está arriba y aumenta hacia abajo).
Los siguientes 2 parámetros son las dimensiones de la figura, en este caso Base y Altura.
El parámetro opcional de estilo permite definir colores y maneras en que será dibujada la figura.
Un ejemplo: En este caso se dibujará un rectángulo centrado en el punto (75, 75), con Base y Altura 50x50 pixeles (por lo tanto será un cuadrado), coloreado de amarillo y con un borde azul de 6 pixeles.
const Cuadrado: Forma = Forma.rectangulo(75, 75, 50, 50, {
colorRelleno: 'yellow',
colorTrazo: 'blue',
grosorTrazo: 6
})
Existen varios métodos para dibujar en el Canvas las figuras que vayas creando.
Uno de ellos es usando la herramienta Dibujante, que cuenta con un método para dibujar formas.
Para usarla, primero hay que instanciarla usando el método crearConIdCanvas, que requiere el id del elemento Canvas.
const NuevoDibujante: Dibujante = Dibujante.crearConIdCanvas("mi-canvas")
Puedes pasarle el cuadrado a la instancia de Dibujante para dibujar tu primer cuadrado.
NuevoDibujante.dibujar(Cuadrado)
El código final se vería así:
import { Dibujante, Forma } from 'muijs-cuerpos'
const Cuadrado: Forma = Forma.rectangulo(75, 75, 50, 50, {
colorRelleno: 'yellow',
colorTrazo: 'blue',
grosorTrazo: 6
})
const NuevoDibujante: Dibujante = Dibujante.crearConIdCanvas("mi-canvas")
NuevoDibujante.dibujar(Cuadrado)