delaunay stroke

_.md

[ Launch: voronoi delaunay stroke ] 5789937 by enjalot
[ Launch: voronoi delaunay animation ] 5789829 by enjalot
[ Launch: voronoi anim ] 5789531 by enjalot

config.json

{"description":"delaunay stroke","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"points.json":{"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},"state.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"ui.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/I0P9Obi.png"}

inlet.js

/*

Double click to add a point
Drag a point to move it around
Double click a point to remove it

*/


var geomPoints, voronoi, delaunay;
var svg;
var n = tributary.points.length;
var t = 0;

tributary.nclones = 20;
tributary.clone_opacity = 0.1;
tributary.loop_type = "pingpong"

var drag = d3.behavior.drag()
.on("drag", function(d,i) {
  d.x += d3.event.dx;
  d.y += d3.event.dy;
  update();
})
.on("dragend", function() {
  //save();
});


d3.select("svg").on("dblclick", function() {
  var mouse = d3.mouse(this);
  tributary.points.push({x: mouse[0], y: mouse[1], value: 10});
  svg.selectAll("circle").remove()
  svg.selectAll("path").remove();
  update(0);
  //save();
})

var path = d3.svg.line()

tributary.init = function(g) {
  svg = g.append("g");
}

function update() {
  process();
  
  //draw voronoi
  var vpaths = svg.selectAll("path.voronoi")
    .data(voronoi)
  vpaths.enter()
    .append("path").classed("voronoi", true);
  vpaths.exit().remove();
  if(tributary.state.useV) {
    vpaths.attr("d", path)
  } else {
    vpaths.remove();
    //vpaths.attr("d", null);
  }
  
  //draw delaunay
  var dpaths = svg.selectAll("path.delaunay")
    .data(delaunay)
  dpaths.enter()
    .append("path").classed("delaunay", true)
  dpaths.exit().remove();
  if(tributary.state.useD) {
    dpaths.attr("d", path)
    .style("stroke-dasharray", function(d,i) {
      var len = this.getTotalLength()
      return [len*t, len]
    });
  } else {
    dpaths.remove()
    //dpaths.attr("d", null);
  }

  var circles = svg.selectAll("circle.point")
    .data(tributary.points)
  circles.enter()
    .append("circle").classed("point", true)
    .call(drag)
    .on("dblclick", function(d) {
      d3.event.cancelBubble = true;
      var ind = tributary.points.indexOf(d);
      tributary.points.splice(ind, 1);
      n = tributary.points.length;
      update();
      //save();
    })
  circles.exit().remove();
  circles
  .attr({
    cx: function(d) { return d.x },
    cy: function(d) { return d.y },
    r: 10
  })
  .each(function() {
    this.parentNode.appendChild(this);
  })
  if(tributary.state.useP) {
    circles.attr("opacity", 1);
  } else {
    circles.attr("opacity", 0);
  }
  
}

//progressively build out the voronoi/delaunay
//progressively draw the voronoi paths/delaunay

function process() {
  geomPoints = tributary.points.map(function(d) {
    return [d.x, d.y];
  })
  voronoi = d3.geom.voronoi(geomPoints);
  delaunay = d3.geom.delaunay(geomPoints); 
}

function save() {
  var cm = tributary.getCodeEditor("points.json");
  cm.setValue(JSON.stringify(tributary.points, null, 2));
  cm = tributary.getCodeEditor("state.json");
  cm.setValue(JSON.stringify(tributary.state, null, 2));
}

tributary.run = function(g, tt) {
  //n = Math.round(t * tributary.points.length);
  t = tt;
  update();
}



tributary.drawUI();
tributary.update = update;
tributary.save = save;

points.json

[
  {
    "x": 85,
    "y": 174,
    "value": 10
  },
  {
    "x": 175,
    "y": 298,
    "value": 10
  },
  {
    "x": 166,
    "y": 497.8125,
    "value": 10
  },
  {
    "x": 95,
    "y": 356.8125,
    "value": 10
  },
  {
    "x": 266,
    "y": 171.8125,
    "value": 10
  },
  {
    "x": 217,
    "y": 425.8125,
    "value": 10
  },
  {
    "x": 475,
    "y": 525.8125,
    "value": 10
  },
  {
    "x": 336,
    "y": 563.8125,
    "value": 10
  },
  {
    "x": 350,
    "y": 91.8125,
    "value": 10
  },
  {
    "x": 592,
    "y": 432.8125,
    "value": 10
  },
  {
    "x": 504,
    "y": 117.8125,
    "value": 10
  },
  {
    "x": 486,
    "y": 324.8125,
    "value": 10
  },
  {
    "x": 439,
    "y": 61.8125,
    "value": 10
  },
  {
    "x": 215,
    "y": 42.8125,
    "value": 10
  },
  {
    "x": 603,
    "y": 94.8125,
    "value": 10
  },
  {
    "x": 604,
    "y": 271.8125,
    "value": 10
  },
  {
    "x": 374,
    "y": 228.8125,
    "value": 10
  },
  {
    "x": 351,
    "y": 419.8125,
    "value": 10
  },
  {
    "x": 439,
    "y": 427.8125,
    "value": 10
  },
  {
    "x": 575,
    "y": 515.8125,
    "value": 10
  },
  {
    "x": 670,
    "y": 362.8125,
    "value": 10
  },
  {
    "x": 688,
    "y": 192.8125,
    "value": 10
  },
  {
    "x": 494,
    "y": 590.8125,
    "value": 10
  },
  {
    "x": 277,
    "y": 600.8125,
    "value": 10
  },
  {
    "x": 123,
    "y": 555.8125,
    "value": 10
  },
  {
    "x": 456,
    "y": 241.8125,
    "value": 10
  },
  {
    "x": 543,
    "y": 553.8125,
    "value": 10
  },
  {
    "x": 405,
    "y": 529.8125,
    "value": 10
  },
  {
    "x": 258,
    "y": 305.8125,
    "value": 10
  },
  {
    "x": 404,
    "y": 306.8125,
    "value": 10
  },
  {
    "x": 333,
    "y": 309.8125,
    "value": 10
  },
  {
    "x": 191,
    "y": 136.8125,
    "value": 10
  },
  {
    "x": 329,
    "y": 58.8125,
    "value": 10
  },
  {
    "x": 513,
    "y": 56.8125,
    "value": 10
  },
  {
    "x": 682,
    "y": 273.8125,
    "value": 10
  },
  {
    "x": 643,
    "y": 144.8125,
    "value": 10
  },
  {
    "x": 567,
    "y": 61.8125,
    "value": 10
  },
  {
    "x": 621,
    "y": 427.8125,
    "value": 10
  },
  {
    "x": 556,
    "y": 533.8125,
    "value": 10
  },
  {
    "x": 153,
    "y": 593.8125,
    "value": 10
  },
  {
    "x": 238,
    "y": 272.8125,
    "value": 10
  },
  {
    "x": 280,
    "y": 272.8125,
    "value": 10
  },
  {
    "x": 335,
    "y": 272.8125,
    "value": 10
  },
  {
    "x": 381,
    "y": 211.8125,
    "value": 10
  },
  {
    "x": 347,
    "y": 172.8125,
    "value": 10
  },
  {
    "x": 220,
    "y": 164.8125,
    "value": 10
  },
  {
    "x": 186,
    "y": 216.8125,
    "value": 10
  },
  {
    "x": 154,
    "y": 321.8125,
    "value": 10
  },
  {
    "x": 155,
    "y": 418.8125,
    "value": 10
  },
  {
    "x": 232,
    "y": 455.8125,
    "value": 10
  },
  {
    "x": 291,
    "y": 455.8125,
    "value": 10
  },
  {
    "x": 377,
    "y": 462.8125,
    "value": 10
  },
  {
    "x": 436,
    "y": 442.8125,
    "value": 10
  },
  {
    "x": 634,
    "y": 516.8125,
    "value": 10
  },
  {
    "x": 590,
    "y": 587.8125,
    "value": 10
  },
  {
    "x": 714,
    "y": 569.8125,
    "value": 10
  },
  {
    "x": 703,
    "y": 441.8125,
    "value": 10
  },
  {
    "x": 724,
    "y": 279.8125,
    "value": 10
  },
  {
    "x": 691,
    "y": 85.8125,
    "value": 10
  },
  {
    "x": 609,
    "y": 53.8125,
    "value": 10
  }
]

state.json

{
  "useD": true,
  "useV": false,
  "useP": false
}

style.css

#display {
  background-color: #000000
}

.voronoi {
  fill: none;
  pointer-events: none;
}
.voronoi, .voronoiButton {
  stroke: #1FADAD;
  stroke-width: 3;
}

.delaunay {
  fill: none;
  stroke-opacity: 0.7;
  pointer-events: none;
}
.delaunay, .delaunayButton {
  stroke: #4ABD8F;
  stroke-width: 3;
}

.point {
  fill: #7183DD;
}
.point, .pointButton {
  stroke: #7183DD;
  stroke-width: 3;
}

.saveButton {
  stroke: #ffffff;
  stroke-width: 3;
}

text {
  font-size: 14px;
  fill: #ffffff;
  pointer-events: none;
}

.selected {
  stroke: #ffffff;
  stroke-width: 1;
}

ui.js

tributary.drawUI = function() {
  var svg = d3.select("svg");
  var bw = 114;
  var bh = 20;
  svg.append("rect")
  .classed("voronoiButton", true)
  .attr({
    x: tributary.sw - bw - 10,
    y: tributary.sh - 3*bh - 20,
    width: bw,
    height: bh
  }).on("click", function(d,i) { 
    tributary.state.useV = !tributary.state.useV;
    d3.select(".voronoiText").classed("selected", tributary.state.useV);
    d3.event.cancelBubble = true; 
    tributary.update();
  })
  svg.append("text")
  .text("show voronoi").classed("voronoiText", true)
  .attr({
    x: tributary.sw - bw + 2,
    y: tributary.sh - 3*bh -5
  });
  
  svg.append("rect")
  .classed("delaunayButton", true)
  .attr({
    x: tributary.sw - bw - 10,
    y: tributary.sh - 2*bh - 15,
    width: bw,
    height: bh
  }).on("click", function(d,i) { 
    tributary.state.useD = !tributary.state.useD;
    d3.select(".delaunayText").classed("selected", tributary.state.useD)
    d3.event.cancelBubble = true; 
    tributary.update();
  })
  svg.append("text")
  .text("show delaunay").classed("delaunayText", true)
  .attr({
    x: tributary.sw - bw - 1,
    y: tributary.sh - 2*bh -1
  });
  
  svg.append("rect")
  .classed("pointButton", true)
  .attr({
    x: tributary.sw - bw - 10,
    y: tributary.sh - bh - 10,
    width: bw,
    height: bh
  }).on("click", function(d,i) { 
    tributary.state.useP = !tributary.state.useP; 
    d3.select(".pointsText").classed("selected", tributary.state.useP)
    d3.event.cancelBubble = true; 
    tributary.update();
  })
  svg.append("text")
  .text("show points").classed("pointsText", true)
  .attr({
    x: tributary.sw - bw + 9,
    y: tributary.sh - bh + 4
  });
  
  svg.append("rect")
  .classed("saveButton", true)
  .attr({
    x: tributary.sw - bw*2 - 20,
    y: tributary.sh - bh - 10,
    width: bw,
    height: bh
  }).on("click", function(d,i) { 
    d3.event.cancelBubble = true; 
    tributary.save();
  })
  svg.append("text")
  .classed("write", true)
  .text("write to json")
  .attr({
    x: tributary.sw - bw*2,
    y: tributary.sh - bh + 4
  });
  d3.select(".pointsText").classed("selected", tributary.state.useP)
  d3.select(".voronoiText").classed("selected", tributary.state.useV)
  d3.select(".delaunayText").classed("selected", tributary.state.useD)
}