adamschwartz/matter-js-compound-body-set-part-position.html

## matter-js-compound-body-set-part-position.html
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>

  <script>
    const Engine = Matter.Engine
    const Render = Matter.Render
    const Runner = Matter.Runner
    const MouseConstraint = Matter.MouseConstraint
    const Mouse = Matter.Mouse
    const World = Matter.World
    const Body = Matter.Body
    const Bodies = Matter.Bodies
    const Vertices = Matter.Vertices

    const engine = Engine.create()
    const world = engine.world
    const render = Render.create({
      element: document.body,
      engine: engine,
      options: {
        width: Math.min(document.documentElement.clientWidth, 800),
        height: Math.min(document.documentElement.clientHeight, 600),
        showAxes: true,
        showCollisions: true,
        showConvexHulls: true
      }
    });

    Matter.Render.run(render)

    const runner = Runner.create()
    Runner.run(runner, engine)

    const partA = Bodies.rectangle(0,  0, 50, 50, { inertia: Infinity })
    const partB = Bodies.rectangle(0, 50, 50, 50, { inertia: Infinity })

    const body = Body.create({
      parts: [partA, partB],
      inertia: Infinity,
      friction: .002,
      restitution: 0,
      sleepThreshold: Infinity
    })

    Body.setPosition(body, { x: 400, y: 0 })

    setTimeout(function(){
      body.force.y = -.2
      setTimeout(function(){
        Body.setPosition(partB, { x: partB.position.x, y: partB.position.y + 25 })
      }, 100);
    }, 3000)

    ground = Bodies.rectangle(400, 400, 800, 20)
    ground.isStatic = true

    World.add(world, [body, ground])

    const mouse = Mouse.create(render.canvas)

    const mouseConstraint = MouseConstraint.create(engine, {
      mouse: mouse,
      constraint: {
        stiffness: 0.2,
        render: {
          visible: false
        }
      }
    })

    World.add(world, mouseConstraint)

    render.mouse = mouse
  </script>
</body>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.js"></script>

	<script>
	const Engine = Matter.Engine
	const Render = Matter.Render
	const Runner = Matter.Runner
	const MouseConstraint = Matter.MouseConstraint
	const Mouse = Matter.Mouse
	const World = Matter.World
	const Body = Matter.Body
	const Bodies = Matter.Bodies
	const Vertices = Matter.Vertices

	const engine = Engine.create()
	const world = engine.world
	const render = Render.create({
	element: document.body,
	engine: engine,
	options: {
	width: Math.min(document.documentElement.clientWidth, 800),
	height: Math.min(document.documentElement.clientHeight, 600),
	showAxes: true,
	showCollisions: true,
	showConvexHulls: true
	}
	});

	Matter.Render.run(render)

	const runner = Runner.create()
	Runner.run(runner, engine)

	const partA = Bodies.rectangle(0, 0, 50, 50, { inertia: Infinity })
	const partB = Bodies.rectangle(0, 50, 50, 50, { inertia: Infinity })

	const body = Body.create({
	parts: [partA, partB],
	inertia: Infinity,
	friction: .002,
	restitution: 0,
	sleepThreshold: Infinity
	})

	Body.setPosition(body, { x: 400, y: 0 })

	setTimeout(function(){
	body.force.y = -.2
	setTimeout(function(){
	Body.setPosition(partB, { x: partB.position.x, y: partB.position.y + 25 })
	}, 100);
	}, 3000)

	ground = Bodies.rectangle(400, 400, 800, 20)
	ground.isStatic = true

	World.add(world, [body, ground])

	const mouse = Mouse.create(render.canvas)

	const mouseConstraint = MouseConstraint.create(engine, {
	mouse: mouse,
	constraint: {
	stiffness: 0.2,
	render: {
	visible: false
	}
	}
	})

	World.add(world, mouseConstraint)

	render.mouse = mouse
	</script>
	</body>