voronoi delaunay drawing

_.md

[ Launch: voronoi anim ] 5789531 by enjalot

config.json

{"description":"voronoi delaunay drawing","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":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,"thumbnail":"http://i.imgur.com/zc3ezCl.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 = d3.select("svg").append("g")
var n = tributary.points.length;

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();
  //save();
})

var path = d3.svg.line()

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);
  } 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);
  }
  
}
update();

//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.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": 358,
    "y": 320.8125,
    "value": 10
  },
  {
    "x": 323,
    "y": 391.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
  }
]

state.json

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

style.css

#display {
  background-color: #000000
}

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

.delaunay {
  fill: none;

  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: 10,
    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: 27,
    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)
}