Skip to content

Instantly share code, notes, and snippets.

@enjalot
Last active August 29, 2015 14:24
Show Gist options
  • Save enjalot/8174c35c5d5ad2b83e5d to your computer and use it in GitHub Desktop.
Save enjalot/8174c35c5d5ad2b83e5d to your computer and use it in GitHub Desktop.
phat path draw
{"description":"phat path draw","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/d9s5GuB.png","inline-console":false,"controls":{"Amplitude Top":100,"tang":100,"tangent":52,"tangent at":50,"tangent at ":50,"tangent at percent":59}}
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 = 156
var pathWidth = 13;
var sampleWidth = 10;
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: "#000",
"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) { 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": 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.5,
stroke: "#6d6d6d"
}).call(drag)
.on("dblclick", function(d) {
var index = points.indexOf(d);
console.log(index);
points.splice(index, 1);
d3.event.stopPropagation();
save();
draw();
})
}
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)
}
}
[{"x":48,"y":284},{"x":130,"y":182},{"x":242,"y":360},{"x":50,"y":338},{"x":50,"y":469},{"x":328,"y":423},{"x":270,"y":213},{"x":480,"y":267},{"x":413,"y":429},{"x":634,"y":446},{"x":510,"y":170},{"x":670,"y":243}]
#display {
background: white
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment