globe with Inertia dragging with versor

Add inertia issue #27 to versor rotation of the globe.

Includes a modified versor.js, allowing the multiplication of the final rotation by a delta to the power alpha.

Original research by Philippe Rivière for visionscarto.net.

forked from Fil's block: Inertia dragging with versor

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://unpkg.com/d3"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="versor.js"></script>
<script>

var width = 960,
    height = 500;

var projection = d3.geoOrthographic();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geoPath()
    .projection(projection)
    .context(context);

canvas.call(
    d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
  );

var render = function() {},
    v0, // Mouse position in Cartesian coordinates at start of drag gesture.
    r0, // Projection rotation as Euler angles at start.
    q0; // Projection rotation as versor at start.
  var inertia = {};

function dragstarted() {
    v0 = versor.cartesian(projection.invert(d3.mouse(this)));
    r0 = projection.rotate();
    q0 = versor(r0);
    if (inertia.timer) inertia.timer.stop();
    inertia = {};
  }

function dragged() {
    var inv = projection.rotate(r0).invert(d3.mouse(this));
    if (isNaN(inv[0])) return;
    var v1 = versor.cartesian(inv),
        q1 = versor.multiply(q0, versor.delta(v0, v1)),
        r1 = versor.rotation(q1);
    projection.rotate(r1);
    render();

inertia.q1 = q1;
    inertia.v0 = inertia.v1;
    inertia.v1 = v1;
    inertia.date = inertia.datenew;
    inertia.datenew = performance.now();
  }
   
  function dragended() {
    if (!inertia.v0) return;
    var inv = projection.rotate(r0).invert(d3.mouse(this));
    if (isNaN(inv[0])) return;
    var v2 = versor.cartesian(inv);
    var A = 10;
    var K = A * (performance.now() - inertia.date);
    inertia.timer = d3.timer(function(e) {
      var ee = Math.exp( - e / K ); // eased time
      var q2 = versor.multiply(inertia.q1, versor.delta(inertia.v0, v2, A * (1 - ee))),
          r2 = versor.rotation(q2);
      projection.rotate(r2);
      render();
      if (ee < 0.05) inertia.timer.stop();
    }, 50);
  }
  
  
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
  if (error) throw error;

var land = topojson.feature(world, world.objects.land);

render = function() {
    context.clearRect(0, 0, width, height);

context.beginPath();
    path(land);
    context.fill();

context.strokeStyle = 'black';
    context.beginPath();
    path({type:"Sphere"});
    context.lineWidth = 2.5;
    context.stroke();
    
    var p = projection.rotate().map(d => Math.floor(10*d)/10);
    context.fillText(`λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`, 10, 10 )
  };

render();

});

d3.select(self.frameElement).style("height", height + "px");

</script>

https://unpkg.com/d3

https://d3js.org/topojson.v2.min.js