How to use the matter-js.Bodies.rectangle function in matter-js

To help you get started, we’ve selected a few matter-js examples, based on popular ways it is used in public projects.

github GraphQLCollege / graphql-college / components / Burger.js View on Github external
showBurger = () => {
    const bottomBun = Bodies.rectangle(150, 50, 200, 25, {
      render: {
        sprite: {
          texture: "/static/images/bottom-bun.png"
        }
      }
    });
    const ground = Bodies.rectangle(150, 300, 810, 60, {
      isStatic: true,
      render: {
        fillStyle: "#f6f7f8"
      }
    });
    let bodies = [ground];

    if (this.props.burger) {
      if (this.props.burger.topping) {
github krzema12 / hypergravity / src / GravityAnimationModel.js View on Github external
_createRightWall(boundingBox) {
    const positionY = this._middle(boundingBox.top, boundingBox.bottom);
    return PhysicsBodies.rectangle(
      boundingBox.width + WALL_THICKNESS/2, positionY, WALL_THICKNESS, boundingBox.height + WALL_THICKNESS, { isStatic: true });
  }
github krzema12 / hypergravity / src / GravityAnimationModel.js View on Github external
_createBottomWall(boundingBox) {
    const positionX = this._middle(boundingBox.left, boundingBox.right);
    return PhysicsBodies.rectangle(
      positionX, boundingBox.height + WALL_THICKNESS/2, boundingBox.width + WALL_THICKNESS, WALL_THICKNESS, { isStatic: true });
  }
github GraphQLCollege / graphql-college / components / Burger.js View on Github external
const selectToppings = burger => {
  const tomato = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
        texture: "/static/images/tomato.png"
      }
    }
  });
  const lettuce = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
        texture: "/static/images/lettuce.png"
      }
    }
  });
  const bacon = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
        texture: "/static/images/bacon.png"
      }
    }
  });
  const egg = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
github vibertthio / runn / src / renderer / physic.js View on Github external
chordProgression.forEach((chord, index) => {
        const pitch = Note.midi(chord[0] + '2');
        const quantizedStartStep = index * 16;
        const quantizedEndStep = (index + 1) * 16;

        const w = (quantizedEndStep - quantizedStartStep) * unit;
        const h = hUnit * 2;
        const y = this.renderer.height - pitch * hUnit - 10;
        const x = quantizedStartStep * unit + w * 0.5;
        const isLast = (index === chordProgression.length - 1);
        const label = isLast ? 'c-last' : 'c-regular';
        const newBlock = Bodies.rectangle(x, y, w, h, {
          isStatic: true,
          label,
          collisionFilter: {
            category: categories[2],
          },
        });
        if (isLast) {
          this.lastBlockChord = newBlock;
        }
        objects.push(newBlock);
      })
    }
github redbadger / website-honestly / site / pages / our-work / case-study / camden-market / shapes / index.js View on Github external
lineWidth: 0,
    };

    const ground = Bodies.rectangle(window.innerWidth / 2, height, window.innerWidth, 1, {
      isStatic: true,
      render: transparentOpts,
    });
    const ceil = Bodies.rectangle(window.innerWidth / 2, -5, window.innerWidth, 1, {
      isStatic: true,
      render: transparentOpts,
    });
    const leftSide = Bodies.rectangle(-10, height / 2, 10, height + 10, {
      isStatic: true,
      render: transparentOpts,
    });
    const rightSide = Bodies.rectangle(window.innerWidth - 10, height / 2, 10, height + 10, {
      isStatic: true,
      render: transparentOpts,
    });

    window.onresize = () => {
      engine.render.canvas.width = window.innerWidth;
      Body.set(rightSide, 'position', { x: window.innerWidth, y: height });
      Body.set(ground, 'position', { x: window.innerWidth / 2, y: height + 10 });
      Body.set(ground, 'width', window.innerWidth);
    };

    World.add(engine.world, [ground, ceil, leftSide, rightSide, ...loadSvgs(), ...loadSvgs()]);

    const mouseConstraint = MouseConstraint.create(engine, {
      constraint: {
        render: { visible: false },
github GraphQLCollege / graphql-college / components / Burger.js View on Github external
const selectToppings = burger => {
  const tomato = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
        texture: "/static/images/tomato.png"
      }
    }
  });
  const lettuce = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
        texture: "/static/images/lettuce.png"
      }
    }
  });
  const bacon = Bodies.rectangle(150, -90, 180, 15, {
    render: {
      sprite: {
github redbadger / website-honestly / site / pages / our-work / case-study / camden-market / shapes / index.js View on Github external
const transparentOpts = {
      fillStyle: 'transparent',
      strokeStyle: 'transparent',
      lineWidth: 0,
    };

    const ground = Bodies.rectangle(window.innerWidth / 2, height, window.innerWidth, 1, {
      isStatic: true,
      render: transparentOpts,
    });
    const ceil = Bodies.rectangle(window.innerWidth / 2, -5, window.innerWidth, 1, {
      isStatic: true,
      render: transparentOpts,
    });
    const leftSide = Bodies.rectangle(-10, height / 2, 10, height + 10, {
      isStatic: true,
      render: transparentOpts,
    });
    const rightSide = Bodies.rectangle(window.innerWidth - 10, height / 2, 10, height + 10, {
      isStatic: true,
      render: transparentOpts,
    });

    window.onresize = () => {
      engine.render.canvas.width = window.innerWidth;
      Body.set(rightSide, 'position', { x: window.innerWidth, y: height });
      Body.set(ground, 'position', { x: window.innerWidth / 2, y: height + 10 });
      Body.set(ground, 'width', window.innerWidth);
    };

    World.add(engine.world, [ground, ceil, leftSide, rightSide, ...loadSvgs(), ...loadSvgs()]);