text on path

_.md

[ Launch: text on path ] 1a1d57a02f11daffc162 by rickdg
[ Launch: Another Inlet ] 5279441 by enjalot

config.json

{"description":"text on path","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5835087719298245,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"thumbnail":"http://i.imgur.com/j02i5ot.png","ajax-caching":true}

inlet.js

//last video with this: http://www.youtube.com/watch?v=vG4JwXkFCs8
//code: http://tributary.io/inlet/4101113/
//http://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands

var text = "When it all falls down";
var fontsize = 58;


function move(p) {
  return [" M", p.x, p.y].join(" ");
}

function lineSeg(p) {
  return [" L", p.x, p.y].join(" ");
}

function arcSeg(p) {
  //A r r rotation large-arc sweep x y
  return [" A", p.r, p.r, p.rot, p.c, p.d, p.x, p.y].join(" ");
}

function bezSeg(p) {
  //x1,y1 and x2,y2 are control points
  return [" C", p.x1, p.y1, p.x2, p.y2, p.x, p.y].join(" ");
}
function smoothSeg(p) {
  //x2,y2 is the control point
  return [" S", p.x2, p.y2, p.x, p.y].join(" ");
}

function qbezSeg(p) {
  //x1 y1 x y
  return [" Q", p.x1, p.y1, p.x, p.y].join(" ");
}
function qsmoothSeg(p) {
  //x y
  return [" T", p.x, p.y].join(" ");
}


var pathD = move({x: 90, y: 79})
    + qbezSeg({x: 654, y: 87, x1: 19, y1: 105})
    
var svg = d3.select("svg");



tributary.init = function(g,i) {
  g.append("path")
  .attr("d", pathD)
  .attr("id", "mypath" + i)
  .style({
    fill: "none"
    /*,stroke: "#000000",
    "stroke-width": 2,
    "stroke-linecap": "round",
    "stroke-linejoin": "round"*/
  })
  
  g.append("text")
    .attr({
      "font-size": fontsize
    })
    .append("textPath")
    .attr({
      "xlink:href": "#mypath" + i
    })
    .text(text);
}

tributary.run = function(g,t,i) {
  var pathD = move({x: 90, y: 79})
    + qbezSeg({x: 654, 
               y: 87 + t * 1000, 
               x1: 19, 
               y1: 105 + t * 798})
  g.select("path")
  .attr("d", pathD);

}