Playground - 코드 에디터

Matter.js2D 물리 엔진 시뮬레이션

physics.js

// Matter.js 2D Physics Simulation

const { Engine, Render, Bodies, Composite, Mouse, MouseConstraint, Runner } = Matter;

const engine = Engine.create();
const world = engine.world;

const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: false,
    background: '#1a1a2e',
  }
});

// Ground & Walls
const ground = Bodies.rectangle(
  window.innerWidth / 2, window.innerHeight - 20,
  window.innerWidth, 40,
  { isStatic: true, render: { fillStyle: '#334155' } }
);
const wallL = Bodies.rectangle(0, window.innerHeight / 2, 40, window.innerHeight, { isStatic: true, render: { fillStyle: '#334155' } });
const wallR = Bodies.rectangle(window.innerWidth, window.innerHeight / 2, 40, window.innerHeight, { isStatic: true, render: { fillStyle: '#334155' } });

Composite.add(world, [ground, wallL, wallR]);

// Colorful shapes
const colors = ['#6366f1', '#f472b6', '#34d399', '#fbbf24', '#60a5fa', '#f87171', '#a78bfa'];

for (let i = 0; i < 20; i++) {
  const x = 100 + Math.random() * (window.innerWidth - 200);
  const y = 50 + Math.random() * 300;
  const color = colors[Math.floor(Math.random() * colors.length)];

const shape = Math.random() > 0.5
    ? Bodies.circle(x, y, 15 + Math.random() * 25, {
        restitution: 0.6,
        render: { fillStyle: color }
      })
    : Bodies.rectangle(x, y, 30 + Math.random() * 40, 30 + Math.random() * 40, {
        restitution: 0.6,
        render: { fillStyle: color }
      });
  Composite.add(world, shape);
}

// Mouse interaction
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, {
  mouse, constraint: { stiffness: 0.2, render: { visible: false } }
});
Composite.add(world, mouseConstraint);
render.mouse = mouse;

// Run
Render.run(render);
Runner.run(Runner.create(), engine);

Preview

Console

Matter.jsphysics.jsUTF-8

Ln 1, Col 1Spaces: 2