[dot append: 03] electron

_.md

[ Launch: [dot append: 03] electron ] 6285004 by jgautsch

config.json

{"description":"[dot append: 03] electron","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.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/lAdd66k.png"}

inlet.js

var svg = d3.select("svg");
var cx = tributary.sw/2;
var cy = tributary.sh/2;
var outr = 200;

var outer = svg.append("circle")
.attr({
  cx: cx,
  cy: cy,
  r: outr,
  fill: "none",
  stroke: "#188600",
  "stroke-width": 4
});

var electron = svg.append("circle")
.attr({
  cx: cx + outr,
  cy: cy,
  r: 15,
  fill: "#067BA8"
});

var drag = d3.behavior.drag()
.on("drag", function() {
	var mx = d3.mouse(this)[0];
 var my = d3.mouse(this)[1];
 
  var omega = Math.atan2(mx - cx, my - cy);
  var nx = outr * Math.sin(omega);
  var ny = outr * Math.cos(omega);
  
  if (nx > 0) {
    electron.attr({
      fill: "#ff00ff"
    })
  } else {
    electron.attr({
      fill: "#00ff00"
    })
  }
  
  electron.attr({
    cx: cx + nx,
    cy: cy + ny
  })
  
});

electron.call(drag);