transition azimuthal projection, from orthographic to equal area [UNLISTED]

forked from transition azimuthal projection, from orthographic to equal area

<!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>
  
  
// import from math
var cos = Math.cos, sin = Math.sin, acos = Math.acos, asin = Math.asin, sqrt = Math.sqrt, atan2 = Math.atan2;

// import from d3-geo
function azimuthalRaw(scale) {
  return function(x, y) {
    var cx = cos(x),
        cy = cos(y),
        k = scale(cx * cy);
    return [
      k * cy * sin(x),
      k * sin(y)
    ];
  }
}

function azimuthalInvert(angle) {
  return function(x, y) {
    var z = sqrt(x * x + y * y),
        c = angle(z),
        sc = sin(c),
        cc = cos(c);
    return [
      atan2(x * sc, z * cc),
      asin(z && y * sc / z)
    ];
  }
}
  
  
  
var width = 960,
    height = 500,
    m = 10;

// en alpha = z
  // on a x pixels = scale(cx)*sin(x) = sqrt(alpha / (1 + (alpha - 1) * cos(x))) * sin(x)
  // 
var projectionRaw = function() {
    var forward = azimuthalRaw(function(cxcy) {
      return Math.pow(2 / (1 + cxcy), alpha / 2);
    });
    // exact inverse only for alpha = 0 and alpha = 1
    forward.invert = azimuthalInvert(function(z) {
      return (1 + alpha) * asin(z / (1 + alpha));
    });
    return forward;
  },
  alpha = 1,
  projection = d3.geoProjection(projectionRaw());
   
  
  
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);

// standard position = positionstart + t * velocity
          // var position = inertia.position.map((d,i) => d + t * inertia.velocity[i])
          // moved(position);
          
          
          // versor position = quaternionstart * rotation^t
          var q1 = versor.multiply(q0, versor.delta(v0, v1, inertia.t * 1000)),
              r1 = versor.rotation(q1);
          projection.rotate(r1);
          render();
          
          if (inertia.t > 1) {
            inertia.timer.stop();
            inertia.velocity = [0,0];
            inertia.t = 1;
          }
        });
  			if (ended) ended(inertia.position);
      };
    },
    position: [0,0],
    velocity: [0,0], // in pixels/s
    time: 0,
    timer: null,
  };

canvas.call(
    d3.drag()
    .on("start", inertia.start(dragstarted))
    .on("drag", inertia.move(dragged))
    .on("end", inertia.end(dragstarted, dragged, 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.

function dragstarted(position) {
    v0 = versor.cartesian(projection.invert(position));
    r0 = projection.rotate();
    q0 = versor(r0);
  }

function dragged(position) {
    var inv = projection.rotate(r0).invert(position);
    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();
  }
   
  function dragended() {}
  
  
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();
    
    context.beginPath();
    context.moveTo(
      inertia.position[0] + inertia.velocity[0] / 10,
      inertia.position[1] + inertia.velocity[1] / 10
    );
    context.lineTo(
      inertia.position[0] + inertia.velocity[0] * inertia.t / 10,
      inertia.position[1] + inertia.velocity[1] * inertia.t / 10
    );
    context.strokeStyle = "red"; 
    context.stroke(); 
    
    var p = projection.rotate().map(d => Math.floor(10*d)/10);
    context.fillText(`λ = ${p[0]}, φ = ${p[1]}, γ = ${p[2]}`, 10, 10 )
    context.fillText(`ɑ = ${Math.floor(100*alpha)/100}, clip=${Math.floor(100 * projection.clipAngle())/100}`, 10, 30 );
    
  };

render();

if (1) var tt = d3.timer(function(e) {
    alpha = (1 - Math.cos(e/400)) / 2;
    var z = 2 * atan2(alpha, 1-alpha) / Math.PI;
    projection
      .clipAngle(90 + alpha * alpha * alpha * alpha * 90  - 1e-5)
      //.fitExtent([[m,m],[width-m,height-m]], {type:"Sphere"})
    render();
    //tt.stop();
  });

});

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

</script>

https://unpkg.com/d3

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