Como Criar Simulações Físicas com Matter.js
O Matter.js é uma biblioteca JavaScript que permite criar simulações físicas realistas em 2D. Com ela você pode:
Criar corpos com propriedades físicas (peso, atrito, elasticidade)
Simular colisões e interações entre objetos
Desenvolver jogos e experiências interativas
Exemplo Prático: Simulação de Corpos Físicos
Aqui está a animação que usaremos como referência:
Passo 1: Configurando o ambiente
Antes de começarmos a programar, certifique-se de ter um ambiente de desenvolvimento configurado:
Um editor de código (VS Code)
- Um navegador (Google Chrome)
Arquivo de template
Passo 2: Declaração de variáveis
Aqui estamos declarando as variáveis que serão usadas para armazenar os módulos do Matter.js e os corpos físicos.
// Módulos do Matter.js
const Engine = Matter.Engine;
const World = Matter.World;
const Bodies = Matter.Bodies;
// Variáveis do jogo
var engine, world;
var bloco1, bloco2, bloco3;
var chao;
Engine: Controla a simulação físicaWorld: Contém todos os corpos físicosBodies: Cria formas com propriedades físicas
Passo 4: Função setup()
A função setup() é executada apenas uma vez e configura o ambiente do jogo.
createCanvas(400,400): Cria uma área de desenho de 550×600 pixels
function setup(){
createCanvas(550,600);
Agora criamos o motor de física:
// Cria o motor de física
engine = Engine.create();
world = engine.world;
Engine.create(): Inicializa o motor de físicaengine.world: Acessa o mundo físico criado
Vamos configurar as opções do chão, sabendo que ele é um corpo estático:
// Configuração do chão (corpo estático)
var opcoesChao = {
isStatic: true
};
isStatic: true: Faz o corpo ficar imóvel (perfeito para chão e paredes)
Agora criamos o corpo do chão:
// Cria o chão
chao = Bodies.rectangle(275, 590, 550, 20, opcoesChao);
World.add(world, chao);
Bodies.rectangle(): Cria um retângulo físico nas coordenadas (275,590) com 550×20 pixelsWorld.add(): Adiciona o corpo ao mundo físico
E criamos mais três corpos com propriedades diferentes:
// Bloco 1 - Esfera elástica
var opcoesBloco1 = {
restitution: 0.8,
friction: 0.01
};
bloco1 = Bodies.circle(150, 50, 20, opcoesBloco1);
Bodies.circle(): Cria um círculo físicorestitution: 0.8: Define um quique alto (80% da energia conservada)friction: 0.01: Muito pouco atrito
// Bloco 2 - Caixa pesada
var opcoesBloco2 = {
restitution: 0.2,
friction: 0.5
};
bloco2 = Bodies.rectangle(300, 50, 60, 60, opcoesBloco2);
Bodies.rectangle(): Cria um retangulo físicorestitution: 0.2: Quique baixo (20% da energia)friction: 0.5: Muito Atrito médio
// Bloco 3 - Placa longa
var opcoesBloco3 = {
restitution: 0.3,
friction: 0.1
};
bloco3 = Bodies.rectangle(450, 50, 120, 40, opcoesBloco3);
// Adiciona todos ao mundo
World.add(world, bloco1);
World.add(world, bloco2);
World.add(world, bloco3);
Bodies.rectangle(): Cria um retangulo físicorestitution: 0.3: O bloco terá um quique médio (conserva 30% da energia ao colidir)friction: 0.1: Baixo atrito (facilita deslizar sobre superfícies)World.add(): Adiciona o corpo ao mundo físico
Passo 5: Função draw()
A função draw() é chamada continuamente para atualizar e renderizar:
background("lightblue"): Define o fundo da tela como azul.Engine.update(): Calcula todas as interações físicas a cada frame
function draw() {
background("lightblue");
// Atualiza a física
Engine.update(engine);
Agora, renderizando os corpos para aparecem na tela:
// Desenha o chão
fill("green");
rect(chao.position.x, chao.position.y, 550, 20);
// Desenha os blocos
fill("red");
ellipse(bloco1.position.x, bloco1.position.y, 20);
fill("blue");
rect(bloco2.position.x, bloco2.position.y, 60, 60);
fill("yellow");
rect(bloco3.position.x, bloco3.position.y, 120, 40);
}
fill:preenchimento com cor do corpoposition.x/y: Acessa a posição atual do corpo
