Matter.Render

    2. const fglayer = scene.layer('fglayer');
    4. const {Engine, World, Render, Runner, Common, Composites, Mouse, MouseConstraint, Bodies} = Matter;
    6. // create engine
    7. const engine = Engine.create(),
    8.   world = engine.world;
    10. // create renderer
    11. const render = Render.create({
    12.   layer: fglayer,
    13.   engine,
    14.   options: {
    15.     showAngleIndicator: true,
    16.     background: '#fff',
    17.     wireframes: false,
    18.   },
    19. });
    21. Render.run(render);
    23. // create runner
    24. const runner = Runner.create();
    25. Runner.run(runner, engine);
    27. // add bodies
    28. const stack = Composites.stack(20, 20, 10, 5, 0, 0, (x, y) => {
    29.   let sides = Math.round(Common.random(1, 8));
    31.   // triangles can be a little unstable, so avoid until fixed
    33.   // round the edges of some bodies
    34.   let chamfer = null;
    35.   if(sides > 2 && Common.random() > 0.7) {
    36.     chamfer = {
    37.       radius: 10,
    38.     };
    39.   }
    41.   const width = 64;
    42.   switch (Math.round(Common.random(0, 1))) {
    43.     case 0:
    44.       if(Common.random() < 0.6) {
    45.         return Bodies.rectangle(x, y, Common.random(25, 50), Common.random(25, 50), {chamfer});
    46.       } if(Common.random() < 0.8) {
    47.         return Bodies.rectangle(x, y, Common.random(80, 120), Common.random(25, 30), {chamfer});
    48.       }
    50.       return Bodies.rectangle(x, y, width, width, {
    51.         chamfer,
    52.         render: {
    53.           sprite: {
    54.             attrs: {
    55.               textures: {
    56.                 src: 'https://p5.ssl.qhimg.com/t01bd0523f7bc9241c2.png',
    57.                 srcRect: [32, 32, 64, 64],
    58.               },
    59.               size: [width, width],
    60.             },
    61.           },
    62.         },
    63.       });
    64.       return Bodies.polygon(x, y, sides, Common.random(25, 50), {chamfer});
    65.     default:
    66.       break;
    67.   }
    68. });
    70. World.add(world, stack);
    72. World.add(world, [
    73.   // walls
    74.   Bodies.rectangle(400, 0, 800, 50, {isStatic: true}),
    75.   Bodies.rectangle(400, 600, 800, 50, {isStatic: true}),
    76.   Bodies.rectangle(800, 300, 50, 600, {isStatic: true}),
    77.   Bodies.rectangle(0, 300, 50, 600, {isStatic: true}),
    78. ]);
    80. // add mouse control
    81. const mouse = Mouse.create(render.canvas),
    82.   mouseConstraint = MouseConstraint.create(engine, {
    83.     mouse,
    84.     constraint: {
    85.       stiffness: 0.2,
    86.       render: {
    87.         visible: false,
    88.       },
    89.     },
    90.   });
    92. World.add(world, mouseConstraint);
    94. // keep the mouse in sync with rendering