Point-Along-Path Interpolation

This example demonstrates how to use the getTotalLength and getPointAtLength methods on SVG path elements to interpolate a point along a Catmull–Rom spline.

A related technique is stroke dash interpolation.

forked from mbostock's block: Point-Along-Path Interpolation

forked from antonyross's block: Point-Along-Path Interpolation

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

circle {
  /*fill: steelblue; */
  stroke: #fff;
  stroke-width: 3px;
}

</style>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var points = [
  [200, 200],
  [500, 200],
  [500, 400],
  [200, 400],
  
];
  var points2 = [
  [100, 200],
  [400, 200],
  [400, 400],
  [100, 400],
  
];

var w = 960;
var h = 500;
  
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

// Text to show "stopwatch"
svg.append("text").text("hey").attr("x", 700).attr("y", 50)

///////////////  VECTOR  ///////////////////////

class Vector
  {
    constructor(x,y)
     {
       this.x = x;
       this.y = y;     
     }
    
    
    static add(v1, v2)
    {
      return new Vector(v1.x + v2.x, v1.y + v2.y) 
    }
    
    
    static subtract(v1, v2)
    {
      return new Vector(v1.x - v2.x, v1.y - v2.y) 
    }

copy()
    {
      return new Vector(this.x, this.y);
    }
    
      
    limit(max)
     {
        var magnitude = this.magnitude();

if(magnitude > max)
          {
            this.normalize();
            this.multiply(max);            
          }
			}
    
     normalize()
      {  
        var magnitude = this.magnitude();
        this.x/= magnitude; 
        this.y/= magnitude;
      }
      
     multiply(n)
      {
        this.x *= n;
        this.y *= n;
      }
    
    divide(n)
     {
        this.x /= n;
        this.y /= n;
     }
     add(v)
			{
				this.x += v.x;
				this.y += v.y;
			}
  
		 magnitude()
      {
        return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
      }
    
     dot(v)
    {
      return (this.x * v.x) + (this.y * v.y);
    }
    
    static angleBetween(v1, v2)
    {
      dot_product = v1.dot(v2);
      theta = Math.acos(dot_product/(v1.magnitude() * v2.magmitude()));
      return theta;
    }
      
 }

///////////////  RUNNER  ///////////////////////
  
class Runner
 {
     constructor(r, color, path, coordinates)
     {
       this.r = r;
       this.color = color;
       this.path = path;
       this.location = new Vector(coordinates[0], coordinates[1]);
       this.velocity = new Vector(0, 0);//Math.random() * 5;
       this.acceleration = new Vector(-.001, .01);
       this.maxspeed = 10;
       this.maxforce = 10;
       this.mass = 10;
     }
     
     get_random_color()
      {
        var colors = ["red", "green", "blue", "orange"]
        var random_color = Math.floor(Math.random()*colors.length);
        return colors[random_color];
      }
     
     checkEdges()
     {
        if(this.location.x > w)
          {
            //this.location.x = 0;
            this.velocity.x *= -1;
          }
        else if(this.location.x < 0)
          {
            //this.location.x = w;
            this.velocity.x *= -1;
          }

if(this.location.y > h)
          {
            //this.location.y = 0;
            this.velocity.y *= -1;
          }
        else if(this.location.y < 0)
          {
            //this.location.y = h;
            this.velocity.y *= -1;
          }
			}
   
      applyForce(force)
      {
				//force.divide(mass);
        this.acceleration.add(force);
      }

update()
      {
        this.velocity.add(this.acceleration);
        this.velocity.limit(this.topspeed);
        this.location.add(this.velocity);
        // this.acceleration.multiply(0);
      }
   
   		
   		seek(target)
      {
        var desired = Vector.subtract(target, location);
        desired.normalize();
        desired.multiply(maxspeed);
        var steer = Vector.subtract(desired, velocity);
        steer.limit(maxforce);
        this.applyForce(steer);
      }
   
  		follow(path) 
  		{
 
          // Step 1: Predict the vehicle’s future location.
          predict = this.velocity.copy();
          predict.normalize();
          predict.multiply(25);
          predicted_location = Vector.add(this.location, predict);

// Step 2: Find the normal point along the path.
          a = path.start;
          b = path.end;
          normalPoint = getNormalPoint(predicted_location, a, b);

// Step 3: Move a little further along the path and set a target.
          direction = Vector.sub(b, a);
          direction.normalize();
          direction.multiply(10);
          target = Vector.add(normalPoint, direction);

// Step 4: If we are off the path, seek that target to stay on the path.
          distance = Vector.distance(normalPoint, predict_location);
          if (distance > path.radius) 
          {
            seek(target);
          }
      }
   
   		getNormalPoint(predicted_location, path_start, path_end)
   		{
        start_to_predicted = Vector.sub(predicted_location, path_start);
    		start_to_end = Vector.sub(path_end, path_start);  // Vector that points from start to end
 
    		start_to_end.normalize(); // Using the dot product for scalar projection
    		start_to_end.mult(start_to_predicted.dot(start_to_end));

normalPoint = Vector.add(path_start, start_to_end); // Finding the normal point along the line segment
 
    		return normalPoint;
      }
         
 }

class Path
{
  
  constructor(path)
     {
       this.path_length = 0;
       this.radius = 0;
       this.start = 0;
       this.end = 0;
     }
}

///////////////////////////////////////////////
  
var dataset = [];
  
var path = svg.append("path")
    .data([points])
    .attr("d", d3.svg.line()
    .tension(0) // Catmull–Rom
    .interpolate("cardinal-closed"));

var path2 = svg.append("path")
    //.data([points])
		.attr("d", "M70 60 C 70 180, 370 180, 370 60")
		.attr({fill:"transparent", stroke:"black", "stroke-width":4});

d3.select("svg").on("click", function()
{
      // get the mouse position coordinates
      var coordinates = [0, 0];
      coordinates = d3.mouse(this);

dataset.push(new Runner(15, "blue", 1, coordinates));

var circles = svg.selectAll("circle")	//Select all circles
                        .data(dataset);

circles.enter()
              .append("circle")
              .attr({cx:0, cy:0, fill: function(d){return d.get_random_color()}})
              .attr("r", function(d){return d.r})
              //.transition()
              //.duration(2000)
              //.attr("transform", translator()); //"translate(" + points[0] + ")")
              //.each("end", transition);

transition();

d.checkEdges(); // make sure objects remain on screen; bounce back
              d.update();			// update the object's position

// return the updated translated position
              return "translate(" + d.location.x + "," + d.location.y + ")";
            };
          };
      }
  
});

</script>

https://d3js.org/d3.v3.min.js