var velocity = { x: 0, y: 0 }

const updateValues = ({ position }) => {
  if (position.changed) {
    velocity = position.velocity
  }
}

tornis.watchViewport(updateValues)

let Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

let engine = Engine.create();

function init() {
  let numm = Math.random();
  $("canvas").remove();

  let width = $(window).width();
  let height = $(window).height();
  let vmin = Math.min(width, height);

  engine.events = {};
  World.clear(engine.world);
  Engine.clear(engine);

  engine = Engine.create();

  let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
      wireframes: false,
      background: 'transparent',
      width: width,
      height: height
    }
  });

  World.add(engine.world, [
    Bodies.rectangle(width / 2, height + 50, width, 100, {
      isStatic: true,
      render: {
        fillStyle: "green"
      }
    }),
    Bodies.rectangle(width / 2, -50, width, 100, {
      isStatic: true,
      render: {
        fillStyle: "blue"
      }
    }),
    Bodies.rectangle(-50, height / 2, 100, height, {
      isStatic: true,
      render: {
        fillStyle: "orange"
      }
    }),
    Bodies.rectangle(width + 50, height / 2, 100, height, {
      isStatic: true,
      render: {
        fillStyle: "pruple"
      }
    }),
  ]);

  for (let i = 0; i < 300; i++) {
    let radius = Math.round(10 + (Math.random() * vmin / 30));
    let size = Math.random() * height / 4;
    World.add(engine.world, Bodies.circle(
      Math.random() * width,
      size,
      radius, {
        mass: size / 5,
        render: {
          fillStyle: ['#EA1070', '#EAC03C', '#25DDBC', '#007DB0', '#252B7F', '#FF6040'][Math.round(Math.random() * 6 - 0.5)]
        }
      }
    ))
  }

  Engine.run(engine);

  Render.run(render);
  let num = 0;
  function update() {
    engine.world.gravity.x = velocity.x / 2;
    engine.world.gravity.y = velocity.y + 1;
    idRAF = requestAnimationFrame(update.bind(this));
  }
  update();
}

init();

$(window).resize(function() {
  init();
});