2D 物理引擎初探：這篇筆記整理了我第一次使用 Matter.js 製作 2D 物理互動的經驗。和一般動畫不同，物理引擎的重點在於讓物件之間的碰撞、重力與約束關係自然發生。
審閱狀態：可審閱後發布
這篇筆記整理了我第一次使用 Matter.js 製作 2D 物理互動的經驗。和一般動畫不同，物理引擎的重點在於讓物件之間的碰撞、重力與約束關係自然發生。
Matter.js 提供了剛體、世界、引擎、渲染器與碰撞事件等基本模組。理解這些角色之後，就能把畫面上的物件轉換成具有物理行為的元素。
初學時最容易混淆的是畫面座標與物理世界之間的關係。你看到的是 canvas 上的圖形，但真正被計算的是物理引擎中的 body。
這類工具很適合做互動式首頁、小遊戲、展示頁或資料視覺化效果。只要控制好物件數量與更新頻率，就能在網頁中加入有趣的互動層次。
建議發佈前補上簡單 demo、Matter.js 初始化程式碼，以及常見參數如 restitution、friction、density 的效果比較。
以下整理原文中的圖片、連結、程式碼與 MDX component，作為延伸閱讀與技術參考。
<html>
<head>
<script src="matter.js"></script>
</head>
...
</html>
npm install matter-js
var Engine = Matter.Engine,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
//由於渲染的部分交給p5js所以這部分直接註解掉
/*
var Render = Matter.Render;
var render = Render.create({
element: document.body,
engine: engine
});
*/
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
const width=400, height=400
const mouseCollideRadius = 30;
// module aliases
var Engine = Matter.Engine,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine,boxA,boxB,ground;
function setup() {
createCanvas(400, 400);
engine = Engine.create();
boxA = Bodies.rectangle(width/2, height/2, 80, 80);
boxB = Bodies.rectangle(width/3, 50, 80, 80);
ground = Bodies.rectangle(width, height, 810, 60, { isStatic: true });
Composite.add(engine.world, [boxA, boxB, ground]);
var runner = Runner.create();
Runner.run(runner, engine);
}
function draw() {
background(220);
circle(mouseX, mouseY, mouseCollideRadius);
rect(boxA.position.x, boxA.position.y, 80,80 );
rect(boxB.position.x, boxA.position.y, 80,80 );
}
這篇筆記整理了我第一次使用 Matter.js 製作 2D 物理互動的經驗。和一般動畫不同，物理引擎的重點在於讓物件之間的碰撞、重力與約束關係自然發生。
適合想理解 2D 物理引擎初探 背後實作、設計取捨與學習脈絡的讀者。