var two = new Two({
  type: Two.Types.canvas,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

var physics = new Physics(2);

var mouse = new Two.Vector();
var vector = new Two.Vector();
var lines = [];

window.addEventListener('mousemove', function(e) {

  mouse.set(e.clientX, e.clientY);

}, false);

var sword;

var svg = two.interpret(document.querySelector('#sword'));

  sword = two.makeGroup();
  sword.scale = 3;
  sword.rect = svg.getBoundingClientRect();

  var drag = 0.33;
  var mass = 0.5;
  var strength = 1;
  var length = sword.rect.height;

  var spring = physics.makeSpring(
    physics.makeParticle(mass, mouse.x, mouse.y),
    physics.makeParticle(mass, mouse.x, mouse.y - length),
    strength, 0.7, length
  );
  spring.path = new Two.Path([new Two.Anchor(), new Two.Anchor()]);
  spring.a.position = spring.path.vertices[0];
  spring.b.position = spring.path.vertices[1];

  spring.a.makeFixed();
  var dragging = false;

  window.addEventListener('mousedown', function(e) {

    mouse.set(e.clientX, e.clientY);
    physics.gravity.set(0, 0);
    spring.a.velocity.clear();
    spring.a.force.clear();
    spring.b.velocity.clear();
    spring.b.force.clear();
    spring.constant = 1;
    spring.damping = 1;
    dragging = true;

  }, false);

  window.addEventListener('mousemove', function(e) {

    mouse.set(e.clientX, e.clientY);

    if (dragging) {

      spring.a.velocity.clear();
      spring.a.force.clear();

      spring.b.velocity.clear();
      spring.b.force.clear();

    }

  }, false);

  window.addEventListener('mouseup', function(e) {

    physics.gravity.set(0, 1);
    dragging = false;
    spring.constant = strength;
    spring.damping = 0.7;

  });

  for (var i = 0; i < 5; i++) {

    var pct = i / 4;
    var ir = (pct * length * 0.25 + length * 0.75) * 0.8;
    var or = ir;
    var line = new Two.ArcSegment(0, 0, ir, or, - Math.PI / 2, - Math.PI / 2, 32);

    line.linewidth = 2;
    line.stroke = '#ccc';
    line.cap = 'round';
    line.opacity = 0.66;

    sword.add(line);
    lines.push(line);

  }

  sword.add(svg);

  two.bind('update', function(frameCount) {

    physics.update();

    sword.translation.addSelf(
      vector.copy(mouse)
        .subSelf(sword.translation)
        .multiplyScalar(drag)
    );

    spring.a.position.copy(sword.translation);

    var angle = Two.Utils.angleBetween(
      spring.a.position, spring.b.position);

    var rotation = sword.rotation;
    sword.rotation = angle - Math.PI / 2;
    var rd = (sword.rotation - rotation);
    var visible = Math.abs(rd) > 0.001;

    if (rd > Math.PI) {
      rd -= Math.PI * 2;
    } else if (rd < - Math.PI) {
      rd += Math.PI * 2;
    }

    for (var i = 0; i < lines.length; i++) {

      if (!visible) {
        lines[i].visible = false;
        continue;
      }

      lines[i].startAngle = - Math.PI / 2;
      lines[i].endAngle = (lines[i].startAngle
        - rd * Math.sqrt((i + 1) / lines.length));

      lines[i].visible = true;
    }

  });