## mui.js - cuerpos
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
Sitio Web (en desarrollo)
NPM
## Descripción
__'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
## Contenidos
1. [Instalación](#instalacion)
2. [Primeros pasos](#primeros-pasos)
3. [Proyectos creados con mui.js - cuerpos](#ejemplos)
## Instalación
```bash
npm install muijs-cuerpos
```
## Primeros pasos
### 1. Canvas
__'mui.js - cuerpos'__ utiliza el elemento HTML Canvas.
Para dibujar, tienes que tener en tu proyecto un canvas con su id definida.
```html
```
### 2. Importaciones
En un archivo TypeScript importa la herramienta de dibujo y el generador de formas geométricas.
```typescript
import { Dibujante, Forma } from 'muijs-cuerpos'
```
### 3. Definiendo un cuadrado
La herramienta __Forma__ permite crear distintas formas geométricas.
Usaremos el método __rectangulo__:
```typescript
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.
```typescript
const Cuadrado: Forma = Forma.rectangulo(75, 75, 50, 50, {
colorRelleno: 'yellow',
colorTrazo: 'blue',
grosorTrazo: 6
})
```
### 4. Herramienta para dibujar
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.
```typescript
const NuevoDibujante: Dibujante = Dibujante.crearConIdCanvas("mi-canvas")
```
### 5. Dibujar el cuadrado
Puedes pasarle el cuadrado a la instancia de __Dibujante__ para dibujar tu primer cuadrado.
```typescript
NuevoDibujante.dibujar(Cuadrado)
```
El código final se vería así:
```typescript
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)
```
Y tu cuadrado:
## Proyectos creados con mui.js - cuerpos
- Figuras geométricas y colisiones
- boids
- Juego de la Vida
- Vida y partículas