Tributary inlet

_.md

[ Launch: Tributary inlet ] 4711747 by roundrobin

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//Hello
function Path(canvas, path){
  this.canvas = canvas;
  this.dataPoints = [];
  
  if(path != undefined){
      this.path = path;
  
  } else {
    
    this.path = this.canvas.append('svg:path')
    .attr("stroke","black")
    .attr("stroke-width",3)
    .attr("fill","none");
  
  }
   
}
Path.prototype.el  = function(wayPoint){
	return this.path;  
}

Path.prototype.add  = function(wayPoint){
  this.dataPoints.push(wayPoint);

}


Path.prototype.canvas  = function(){
   return this.canvas;
}


Path.prototype.render  = function(){
  var cx = 0, cy = 0;
  for(var i=0; i < this.dataPoints.length; i++){
    var el = this.dataPoints[i];
    

    var op = el[0];
    
    if(op === 'M' || op === 'L'){
    
        cx = el[1];
		cy = el[2];
    }
    if(op === 'C'){
        cx = el[5];
		cy = el[6];
    }
    if(op === 'Q' || op === 'S' || op === 'T'){
        cx = el[3];
		cy = el[4];

    }
	if(op === 'H'){
        cx = el[1];

    }
	if(op === 'V'){
        cy = el[1];

    }    

    this.canvas.append("circle")
    .attr({
      r: 5,
      cx: cx,
      cy: cy,
      fill: "#FF00FF",
      class: "pointers",
      opacity: "0"
    });
    
  }
  this.path.attr("d",this.pathWay());
}

Path.prototype.showPoints  = function(){
	this.canvas.selectAll(".pointers")
        .attr({opacity: "1"});
  
}
Path.prototype.hidePoints  = function(){
	this.canvas.selectAll(".pointers")
        .attr({opacity: "0"});
  
}


Path.prototype.pathWay  = function(){
  var way = '';
  
  for(var i=0; i < this.dataPoints.length; i++){
    var elem = this.dataPoints[i];
    	way += elem.join(' ');
  }
  return way;
} 

var svg = d3.select("svg");




var path = new Path(svg)
//path.canvas().attr("transform","translate("+[50,46]+")");

	
path.add(['m',1,0]);
path.add(['l',64,133]);
path.add(['Q',64,334,100,200]);
path.add(['C',64,334,100,200,300,400]);
path.add(['H',100]);
path.add(['V',300]);
path.add(['S',200,22,22,22]);
path.add(['T',249,60,453,22]);


path.render();
path.showPoints()