레슨 4 / 8·20분
제약조건과 복합체
Constraint 심화와 Composite 활용
Constraint는 두 바디 사이의 물리적 연결을 정의하며, 포인트 제약, 거리 제약, 마우스 제약 등 다양한 형태가 있습니다. Composite는 여러 바디와 제약을 하나의 단위로 묶어 복잡한 구조물(체인, 브릿지, 소프트바디 등)을 만들 수 있게 합니다. Composites 모듈은 자주 사용되는 복합 구조를 미리 만들어 제공합니다.
javascript
const { Composite, Composites, Constraint, Bodies, World } = Matter;
// ── 체인(Chain) 만들기 ──
// Composites.chain으로 바디들을 순차적으로 연결
const group = Composite.create();
// 체인 구성용 바디 5개 생성
const chainBodies = [];
for (let i = 0; i < 5; i++) {
const link = Bodies.rectangle(200 + i * 50, 100, 40, 20, {
density: 0.005,
frictionAir: 0.02,
render: { fillStyle: '#e67e22' },
});
chainBodies.push(link);
Composite.add(group, link);
}
// 인접 바디끼리 Constraint로 연결
for (let i = 0; i < chainBodies.length - 1; i++) {
const link = Constraint.create({
bodyA: chainBodies[i],
bodyB: chainBodies[i + 1],
length: 30,
stiffness: 0.8,
render: { strokeStyle: '#d35400' },
});
Composite.add(group, link);
}
// 첫 번째 링크를 고정점에 연결
const anchor = Constraint.create({
pointA: { x: 200, y: 50 },
bodyB: chainBodies[0],
length: 30,
stiffness: 1,
});
Composite.add(group, anchor);
World.add(engine.world, group);Composites 유틸리티
javascript
// ── Composites.stack — 바디 스택 만들기 ──
// stack(x, y, columns, rows, columnGap, rowGap, callback)
const stack = Composites.stack(200, 200, 5, 4, 0, 0,
function (x, y) {
return Bodies.rectangle(x, y, 40, 40, {
render: { fillStyle: '#3498db' },
});
}
);
World.add(engine.world, stack);
// ── Composites.softBody — 소프트바디 ──
// softBody(x, y, columns, rows, gapX, gapY, crossBrace, radius, options)
const soft = Composites.softBody(400, 100, 6, 4, 20, 20, true, 10, {
render: { fillStyle: '#2ecc71' },
});
World.add(engine.world, soft);
// ── Composites.car — 간단한 자동차 ──
const car = Composites.car(150, 400, 100, 30, 25);
World.add(engine.world, car);
// ── Composites.newtonsCradle — 뉴턴의 요람 ──
const cradle = Composites.newtonsCradle(300, 50, 5, 25, 150);
World.add(engine.world, cradle);- •Composite.create() — 빈 복합체 생성
- •Composite.add(composite, items) — 바디, 제약, 하위 복합체 추가
- •Composites.stack() — 격자 형태로 바디 배열 생성
- •Composites.chain() — 바디들을 순차적으로 체인 연결
- •Composites.softBody() — 연결된 바디 격자로 부드러운 물체 구현
- •Composites.car() — 바디와 바퀴로 구성된 자동차
- •Composites.newtonsCradle() — 뉴턴의 요람 데모 구조물
💡
softBody의 crossBrace 매개변수를 true로 설정하면 대각선 제약이 추가되어 구조가 더 안정적으로 유지됩니다. false면 격자가 쉽게 찌그러지므로, 안정적인 구조가 필요하면 항상 true를 사용하세요.