poopy

var Engine = Matter.Engine,
    Render = Matter.Render,
    Events = Matter.Events,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Bodies = Matter.Bodies;

var canvas = document.getElementById("matterCanvas")

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

    engine.world.gravity.y = 0;

    
// create a renderer
var render = Render.create({
    canvas: canvas,
    engine: engine,
    options: {
        wireframes: false,
        background: 'transparent',
        width: window.innerWidth,
        height: window.innerHeight
    }
});




// create bounds
var ground = Bodies.rectangle(
  (window.innerWidth / 2) + 160, window.innerHeight + 80, window.innerWidth + 320, 160,{render: { fillStyle: '#080808'}, isStatic: true });
var wallLeft = Bodies.rectangle( -80, window.innerHeight / 2, 160,   window.innerHeight, { isStatic: true });
var wallRight = Bodies.rectangle(window.innerWidth + 80, window.innerHeight / 2, 160, 1200, { isStatic: true })
var roof = Bodies.rectangle(
  (window.innerWidth / 2) + 160, -80, window.innerWidth + 320, 160, { isStatic: true })

// Make shapes
var box1 = Bodies.rectangle(70, 500, 150, 150, {render: {fillStyle: "#344FEB"}})
    box1.restitution = .5;

var box2 = Bodies.rectangle(70, 500, 250, 250, {render: {fillStyle: "#EB34E5"}})
    box2.restitution = .5;

var box3 = Bodies.rectangle(70, 500, 300, 300, {render: {fillStyle: "#13C233"}})
    box3.restitution = .5;

window.addEventListener('resize', () => { 
    render.canvas.width = window.innerWidth;
    render.canvas.height = window.innerHeight;

});

// Original Shape
// var illustration = Bodies.rectangle(70, 500, 133, 40, {render: { fillStyle: arts}, chamfer: {radius: 20}})


// add all of the bodies to the world
World.add(engine.world, [
  ground, wallLeft, wallRight, roof, box1, box2, box3
]);

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

World.add(world, mouseConstraint);

// keep the mouse in sync with rendering
render.mouse = mouse;

// Allow page scrolling in matter.js window
mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);

// Detect clicks vs. drags
let click = false;

document.addEventListener('mousedown', () => click = true);
document.addEventListener('mousemove', () => click = false);
document.addEventListener('mouseup', () => console.log(click ? 'click' : 'drag'));

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);