phat path draw mod

_.md

[ Launch: phat path draw mod ] 949666200d92677416ce by enjalot
[ Launch: phat path draw ] 8174c35c5d5ad2b83e5d by enjalot
[ 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 draw mod","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},"points.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/P5CwNyd.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 cm = tributary.getCodeEditor("points.json");
var points = JSON.parse(cm.getValue())
// 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 = 142

var pathWidth = 21;
var sampleWidth = 18;

var circleRadius = 18;

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")
.style({
  fill: "none",
  stroke: "none",
  "stroke-width": pathWidth
})

var drag = d3.behavior.drag()
.on("drag", function(d) {
  d.x = d3.mouse(this)[0];
  d.y = d3.mouse(this)[1];
  draw()
})
.on("dragend", function() {
  save();
})

svg.on("dblclick", function() {
  points.push({x: d3.mouse(this)[0], y: d3.mouse(this)[1] });
  draw();
  save();
})

function draw() {
  path.attr("d", line(points));
  
  var pathNode = path.node();
  var tangent = getTangent(pathNode, tangentAt);

  tangent.v.x *= vectorScale
  tangent.v.y *= vectorScale
  
  

  var perp = rotate2d(tangent.v, 90);
  
  
 
  var node = path.node()
  var samples = getSamples(node, numSamples);
  
  
  var slines = svg.selectAll("line.perp")
  .data(samples);
  slines.exit().remove();
  slines.enter()
  .append("line").classed("perp", true)
  slines
  .attr({
    x1: function(d,i) { return d.point.x - d.perp.x * scale(i) },
    y1: function(d,i) { return d.point.y - d.perp.y * scale(i) },
    x2: function(d,i) { return d.point.x + d.perp.x * scale(i) },
    y2: function(d,i) { return d.point.y + d.perp.y * scale(i) },
    stroke: "#5f55e1",
    "stroke-width": sampleWidth,
    "stroke-opacity": 0.5,
    //"stroke-linecap": "round"
  })
  
  var circles = svg.selectAll("circle")
    .data(points);
  circles.exit().remove();
  circles
    .enter().append("circle")
  circles
    .attr({
      cx: function(d) { return d.x },
      cy: function(d) { return d.y },
      r: circleRadius,
      fill: "#de9090",
      "fill-opacity": 0.06,
      stroke: "#c9c9c9"
    }).call(drag)
  .on("dblclick", function(d) {
    var index = points.indexOf(d);
    console.log(index);
    points.splice(index, 1);
    d3.event.stopPropagation();
    save();
    draw();
  })
  
 
}

function scale(i) {
  return 0.69696 * Math.sin(6 * i/numSamples * 2 * Math.PI);
}


function save() {
  setTimeout(function() {
  
  var newpoints = [];
  points.forEach(function(d) { newpoints.push(d) });
    
  cm.setValue(JSON.stringify(newpoints));
  }, 10)
}


draw();




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

points.json

[{"x":27,"y":300},{"x":197,"y":190},{"x":264,"y":343},{"x":50,"y":338},{"x":50,"y":469},{"x":328,"y":423},{"x":289,"y":228},{"x":487,"y":222},{"x":470,"y":347},{"x":423,"y":442},{"x":676,"y":457},{"x":534,"y":202},{"x":644,"y":237}]

style.css

#display {
  background: white
}