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: [email protected]

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
2. Primeros pasos
3. Proyectos creados con mui.js - cuerpos

Instalación

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.

<canvas id="mi-canvas"></canvas>

2. Importaciones

En un archivo TypeScript importa la herramienta de dibujo y el generador de formas geométricas.

import { Dibujante, Forma } from 'muijs-cuerpos'

3. Definiendo un cuadrado

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
})

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.

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.

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)

Y tu cuadrado:

Proyectos creados con mui.js - cuerpos

• Figuras geométricas y colisiones
• boids
• Juego de la Vida
• Vida y partículas