tangent

_.md

[ Launch: sampling ] 811484fa83dab4291a2a by enjalot
[ Launch: sampling ] ae8f1e9e966533a0e2e2 by enjalot

config.json

{"description":"tangent","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}},"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/NFQTjvn.png","inline-console":true}

inlet.js

var height = 150;
var points = [
  {x: 100, y: 100},
  {x: 146, y: 114},
  {x: 200, y: 75},
  {x: 250, y: 90}
]

// lets use percentage of the length to determine where we take tangent;
var tangentAt = 25;

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": 3
})

// we get the DOM node
var pathNode = path.node();
var pathLength = pathNode.getTotalLength();
console.log(pathLength)

var point1 = pathNode.getPointAtLength(tangentAt);
console.log(point1.x, point1.y)
var point2 = pathNode.getPointAtLength(tangentAt + 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);
console.log(magnitude);

var vectorLength = 100;
vector.x *= vectorLength/magnitude
vector.y *= vectorLength/magnitude
console.log(vector.x, vector.y)

svg.append("line")
.attr({
  x1: point1.x,
  y1: point1.y,
  x2: point1.x + vector.x,
  y2: point1.y + vector.y,
  stroke: "#e15555"
})

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"
})