phat path

_.md

[ Launch: perpendicular tangent on path ] 137845deaa0ff77abaeb by enjalot
[ Launch: tangent ] ce4c4409fb80559de2bd by enjalot
[ Launch: sampling ] 811484fa83dab4291a2a by enjalot
[ Launch: sampling ] ae8f1e9e966533a0e2e2 by enjalot

config.json

{"description":"phat path","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/d9s5GuB.png","inline-console":false,"controls":{"Amplitude Top":100,"tang":100,"tangent":52,"tangent at":50,"tangent at ":50,"tangent at percent":59}}

inlet.js

var height = 150;
var points = [
  {x: 100, y: 100},
  {x: 185, y: 153},
  {x: 300, y: 82},
  {x: 474, y: 190}
]

// lets use percentage of the length to determine where we take tangent;
var tangentAt = 38;
// the amount to phatten the path by
var vectorScale = 20;
// the number of samples
var numSamples = 89

var line = d3.svg.line()
.x(function(d) { return d.x })
.y(function(d) { return d.y })
.interpolate("cardinal")
//.interpolate("basis")

var svg = d3.select("svg")


var path = svg.append("path")
.attr("d", line(points))
.style({
  fill: "none",
  stroke: "#000",
  "stroke-width": 4
})

// we get the DOM node
var pathNode = path.node();
var tangent = getTangent(pathNode, tangentAt);

tangent.v.x *= vectorScale
tangent.v.y *= vectorScale
console.log(tangent)


var perp = rotate2d(tangent.v, 90);

svg.append("line")
.attr({
  x1: tangent.p.x,
  y1: tangent.p.y,
  x2: tangent.p.x + tangent.v.x,
  y2: tangent.p.y + tangent.v.y,
  stroke: "#e15555",
  "stroke-width": 2
})
svg.append("line")
.attr({
  x1: tangent.p.x,
  y1: tangent.p.y,
  x2: tangent.p.x + perp.x,
  y2: tangent.p.y + perp.y,
  stroke: "#5f55e1",
  "stroke-width": 2
})



var circles = svg.selectAll("circle")
.data(points)
.enter().append("circle")
.attr({
  cx: function(d) { return d.x },
  cy: function(d) { return d.y },
  r: 5,
  fill: "none",
  stroke: "#6d6d6d"
})

var node = path.node()
var samples = getSamples(node, numSamples);


var line90 = d3.svg.line()
.x(function(d) { return d.point.x + d.perp.x })
.y(function(d) { return d.point.y + d.perp.y })
.interpolate("cardinal")

var line270 = d3.svg.line()
.x(function(d) { return d.point.x - d.perp.x })
.y(function(d) { return d.point.y - d.perp.y })
.interpolate("cardinal")


var path90 = svg.append("path")
.attr("d", line90(samples))
.style({
  fill: "none",
  stroke: "#d725e4",
  "stroke-width": 1
})



var path270 = svg.append("path")
.attr("d", line270(samples))
.style({
  fill: "none",
  stroke: "#25dde4",
  "stroke-width": 1
})

/*
svg.selectAll("line.tangent")
.data(samples)
.enter()
.append("line").classed("tangent", true)
.attr({
  x1: function(d) { return d.point.x },
  y1: function(d) { return d.point.y },
  x2: function(d) { return d.point.x + d.tangent.v.x },
  y2: function(d) { return d.point.y + d.tangent.v.y },
  stroke: "#e15555",
  "stroke-width": 1
})
*/

svg.selectAll("line.perp")
.data(samples)
.enter()
.append("line").classed("tangent", true)
.attr({
  x1: function(d) { return d.point.x - d.perp.x },
  y1: function(d) { return d.point.y - d.perp.y },
  x2: function(d) { return d.point.x + d.perp.x },
  y2: function(d) { return d.point.y + d.perp.y },
  stroke: "#5f55e1",
  "stroke-width": 3,
  "stroke-opacity": 0.5,
  "stroke-linecap": "round"
})

/*
var rects = svg.selectAll("rect")
.data(samples)
.enter().append("rect")
.attr({
  x: function(d) { return d.point.x },
  y: function(d) { return d.point.y },
  width: 5,
  height: function(d) { return 10 }
})
*/


function getSamples(path, num) {
  var len = path.getTotalLength()
  var p, t;
  var result = []
  for(var i = 0; i < num; i++) {
    p = path.getPointAtLength(i * len/num);
    t = getTangent(path, i/num * 100);
    t.v.x *= vectorScale
    t.v.y *= vectorScale

    result.push({
      point: p, 
      tangent: t,
      perp: rotate2d(t.v, 90)
    });
  }
  return result
}

function getTangent(path, percent) {
  // returns a normalized vector that describes the tangent
  // at the point that is found at *percent* of the path's length
  var fraction = percent/100;
  if(fraction < 0) fraction = 0;
  if(fraction > 0.99) fraction = 1;
  
  var len = path.getTotalLength();
  var point1 = path.getPointAtLength(fraction * len - 0.1);
  var point2 = path.getPointAtLength(fraction * len + 0.1);
 
  var vector = { x: point2.x - point1.x, y: point2.y - point1.y }
  var magnitude = Math.sqrt(vector.x*vector.x + vector.y*vector.y);
  vector.x /= magnitude;
  vector.y /= magnitude;

  return {p: point1, v: vector };
}

function rotate2d(vector, angle) {
  //rotate a vector 
  angle *= Math.PI/180; //convert to radians
  return {
    x: vector.x * Math.cos(angle) - vector.y * Math.sin(angle),
    y: vector.x * Math.sin(angle) + vector.y * Math.cos(angle)
  }
}

style.css

#display {
  background: white
}