verlet-js editable + brushable

_.md

[ Launch: verlet-js editable + brushable ] 5431762 by enjalot
[ Launch: verlet-js editable ] 5431703 by enjalot
[ Launch: verlet-js ] 5431559 by enjalot

config.json

{"description":"verlet-js editable + brushable","endpoint":"","display":"canvas","public":true,"require":[{"name":"verlet-js","url":"http://enjalot.github.io/verlet-js/verlet.js"}],"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},"shape.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"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/N81JHJ8.png"}

inlet.js

//verlet-js: http://subprotocol.com/2013/04/18/introducing-verlet-js.html
var width = tributary.sw;
var height = tributary.sh;

var sim;
var segment;
var slider;


tributary.init = function(ctx) {  
  // simulation
  sim = new VerletJS(width, height, tributary.canvas);
  sim.friction = 1;

  // entities
  var segments = [];
  var pins = [];
  tributary.shape.forEach(function(p,i) {
    segments.push(new Vec2(p.x, p.y))
    if(p.pin) pins.push(p.i = i)
  });
  segment = sim.lineSegments(segments, 0.02);
  pins.forEach(function(pin) {
	segment.pin(pin);
  })

  d3.select("#display").selectAll("svg").remove();
  var svg = d3.select("#display").insert("svg",  ":first-child")
  .attr({width: tributary.sw, height: tributary.sh});
  var xscale = d3.scale.linear()
    .domain([0, 1])
    .range([0, tributary.sw]);

  var yscale = d3.scale.linear()
      .domain([0, 1])
      .range([0, tributary.sh]);
  
  var brush = d3.svg.brush()
      .x(xscale)
      .y(yscale);
  
  
  slider = svg.append("g")
      .attr("transform", "translate(" + [0, 0] + ")");
  
  brush(slider);
  slider.selectAll("rect.background")
  

  
}

d3.select("#display").on("mouseup", saveShape);
d3.select("#display").on("mousemove", function(e) { 
  //brush component steals our mouse events
  var rect = tributary.canvas.getBoundingClientRect();
  sim.mouse.x = d3.event.clientX - rect.left;
  sim.mouse.y = d3.event.clientY - rect.top;
  
  //if canvas isn't dragging, we want to start brush
  var nearest = sim.nearestEntity();
  if(nearest) {
    d3.select("#display").select("svg").style("display", "none")
    //slider.selectAll("rect.background").style("display","none")
    //.attr("pointer-events", "none");
  } else {
    d3.select("#display").select("svg").style("display", "")
    //slider.selectAll("rect.background").style("display","")
    //.attr("pointer-events", "all");
  }
})

tributary.run = function(ctx, t) {
  if(sim) {
    sim.frame(8);
    sim.draw();
  }
  
}

function saveShape() {
  console.log("EVT", d3.event);
  if(!segment) return;
  var particles = segment.particles;
  
  for(var i = 0, l = segment.particles.length; i < l; i++) {
    tributary.shape[i].x = particles[i].pos.x;
    tributary.shape[i].y = particles[i].pos.y;
  }
  var cm = tributary.getCodeEditor("shape.json")
  cm.setValue(JSON.stringify(tributary.shape));
  console.log("saved");
}

shape.json

[{"pin":1,"i":0,"x":546,"y":54},{"pin":0,"x":447.9529326600701,"y":191.64261944616183},{"pin":1,"i":2,"x":380,"y":76},{"pin":0,"x":317.9679268717514,"y":195.4367481785876},{"pin":1,"i":4,"x":254,"y":59},{"pin":0,"x":194.84466739703845,"y":236.91930945903042},{"pin":1,"i":6,"x":72,"y":69}]

style.css

.background {
  /*display:none;*/
}

.extent { 
  visibility: visible !important;
  fill: #C200A3;
  fill-opacity: 0.14;
}

.resize rect {
  visibility: visible !important;
  /*fill: #00E753;*/
  fill-opacity: 0.5;
  fill:none;
  stroke: none;
}
#display svg {
  position:absolute;
  top:0;
  left:0;
}