Enter the VioletNotes Garden

// https://brm.io/matter-js/demo/#constraints — 本页即按此逐参数运行
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composite = Matter.Composite,
    Constraint = Matter.Constraint,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    Bodies = Matter.Bodies;

var engine = Engine.create(),
    world = engine.world;

var render = Render.create({
    element: document.body,
    engine: engine,
    options: { width: 800, height: 600, showAngleIndicator: true }
});
Render.run(render);
var runner = Runner.create();
Runner.run(runner, engine);

// —— ① stiff global anchor
var body = Bodies.polygon(150, 200, 5, 30),
    constraint = Constraint.create({ pointA: { x: 150, y: 100 }, bodyB: body, pointB: { x: -10, y: -10 } });
Composite.add(world, [body, constraint]);
// —— ② soft global anchor
body = Bodies.polygon(280, 100, 3, 30);
constraint = Constraint.create({ pointA: { x: 280, y: 120 }, bodyB: body, pointB: { x: -10, y: -7 }, stiffness: 0.001 });
Composite.add(world, [body, constraint]);
// —— ③ damped soft global anchor
body = Bodies.polygon(400, 100, 4, 30);
constraint = Constraint.create({ pointA: { x: 400, y: 120 }, bodyB: body, pointB: { x: -10, y: -10 }, stiffness: 0.001, damping: 0.05 });
Composite.add(world, [body, constraint]);
// —— ④ revolute single
body = Bodies.rectangle(600, 200, 200, 20);
var ball = Bodies.circle(550, 150, 20);
constraint = Constraint.create({ pointA: { x: 600, y: 200 }, bodyB: body, length: 0 });
Composite.add(world, [body, ball, constraint]);
// —— ⑤ revolute multi
body = Bodies.rectangle(500, 400, 100, 20, { collisionFilter: { group: -1 } });
ball = Bodies.circle(600, 400, 20, { collisionFilter: { group: -1 } });
constraint = Constraint.create({ bodyA: body, bodyB: ball });
Composite.add(world, [body, ball, constraint]);
// —— ⑥ stiff multi
var a = Bodies.polygon(100, 400, 6, 20),
    b = Bodies.polygon(200, 400, 1, 50);
constraint = Constraint.create({ bodyA: a, pointA: { x: -10, y: -10 }, bodyB: b, pointB: { x: -10, y: -10 } });
Composite.add(world, [a, b, constraint]);
// —— ⑦ soft multi
a = Bodies.polygon(300, 400, 4, 20);
b = Bodies.polygon(400, 400, 3, 30);
constraint = Constraint.create({ bodyA: a, pointA: { x: -10, y: -10 }, bodyB: b, pointB: { x: -10, y: -7 }, stiffness: 0.001 });
Composite.add(world, [a, b, constraint]);
// —— ⑧ damped soft multi
a = Bodies.polygon(500, 400, 6, 30);
b = Bodies.polygon(600, 400, 7, 60);
constraint = Constraint.create({ bodyA: a, pointA: { x: -10, y: -10 }, bodyB: b, pointB: { x: -10, y: -10 }, stiffness: 0.001, damping: 0.1 });
Composite.add(world, [a, b, constraint]);

// 四面静态墙
Composite.add(world, [
    Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
    Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
    Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
    Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);

var mouse = Mouse.create(render.canvas),
    mouseConstraint = MouseConstraint.create(engine, {
        mouse: mouse,
        constraint: { angularStiffness: 0, render: { visible: false } }
    });
Composite.add(world, mouseConstraint);
render.mouse = mouse;
Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: 800, y: 600 } });