quick_equidistant

_.md

[ Launch: quick_bisectors ] 6452591 by zeffii
[ Launch: quick_bisectors ] 6450341 by zeffii
[ Launch: coffee_template ] 6449183 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6399870 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382272 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382237 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6379220 by zeffii
[ Launch: boomstick_motion_wcolor ] 6376715 by zeffii
[ Launch: boomstick_motion2 ] 6365156 by zeffii
[ Launch: boomstick_motion ] 6364686 by zeffii
[ Launch: boomstick ] 6364584 by zeffii
[ Launch: zeffii default ] 6364028 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"quick_equidistant","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"injet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"utils.coffee":{"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/555Az59.gif"}

inlet.coffee

tributary.tolist = (points...) ->
  plist = []
  for p in points
    for c in [p.x, p.y]
  	  plist.push c
  plist

intersect = tributary.intersect
distance = tributary.distance
equid = tributary.from3points
tolist = tributary.tolist  
  
d3.select("body").style "background-color", d3.rgb(25, 25, 25)

svg = d3.select("svg")
group1 = svg.append("g").classed("group1", true)

group1
.attr("transform", "translate(" + [37, 150] + ")")
.style
  fill: "none"
  stroke: "#aeaeae"

tributary.duration = 689
tributary.loop_type = 'pingpong'
nm = tributary.anim
  
dots = [
  {x: nm(107,50), y: 70, col: '#ae1283'},     # maroon
  {x: 175, y: 14, col: '#696969'},    # grey
  {x: 113, y: 291, col: '#1FFF00'},]  # green

epi_object = equid(dots)
line1 = epi_object.line1
line2 = epi_object.line2
p_center = epi_object.p

group1.append('path')
.attr
  'd': 'M' + tolist(line1.p1, line1.p2) 

group1.append('path')
.attr
  'd': 'M' + tolist(line2.p1, line2.p2) 


group1.append("path")
.style
  'fill': '#DAF6FF'
  'fill-opacity': 0.136752
  'stroke': '#D690AF'
  'stroke-width': 1.16
  'stroke-dasharray': "5,5"
.attr
  'd': 'M' + tolist(dots...) + 'z'

dots.push {x: p_center.x, y:p_center.y, col: '#FFFFFF'}

balls = group1.selectAll('circle').data(dots)  
balls.enter()
.append('circle')
.attr
  r: 5.0
  transform: (d) -> "translate(" + [d.x, d.y] + ")"
.style
  fill: (d) -> d.col

circle_rad = distance(p_center, dots[0])
group1.append('circle')
.attr
  'r': circle_rad
  'transform': 'translate(' + [p_center.x, p_center.y] + ')'  

style.css

.cm-s-elegant.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-elegant div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-elegant span.cm-variable { color:#22EFFF; }
.cm-s-elegant span.cm-variable-2 { color: #FFCCB4; }
.cm-s-elegant span.cm-variable-3 { color: white; }
.cm-s-elegant span.cm-string { color: Chartreuse; }
.cm-s-elegant span.cm-string-2 {color: Chartreuse;}
.cm-s-elegant span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-elegant span.cm-bracket { color: #EBEFE7; }
.cm-s-elegant pre { color:#FFF; }
.cm-s-elegant span.cm-qualifier { color:#C0C0C0; }
.cm-s-elegant span.cm-comment { color: #AFB4B4;}
.cm-s-elegant span.cm-property {color: #FDA676;}
.cm-s-elegant span.cm-number { color: #FF92EE;}
.cm-s-elegant span.cm-keyword { color: #FFFF18; }
.cm-s-elegant .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-elegant .CodeMirror-gutters {background: #505050;}
.cm-s-elegant .CodeMirror-linenumber {color: #D3D3D3;}

utils.coffee

tributary.distance = (pos1, pos2) ->
  a = Math.max(pos1.x, pos2.x) - Math.min(pos1.x, pos2.x)
  b = Math.max(pos1.y, pos2.y) - Math.min(pos1.y, pos2.y)
  Math.sqrt((a * a) + (b * b))


tributary.circle_circle_bisector = (p0, p1) ->
  # literal translation from C to .coffee of
  # http://paulbourke.net/geometry/circlesphere/tvoght.c
  r0 = r1 = tributary.distance(p0, p1) * 0.65

  [x0, y0] = [p0.x, p0.y]
  [x1, y1] = [p1.x, p1.y]
  [dx, dy] = [x1 - x0, y1 - y0]

  d = Math.sqrt((dy*dy) + (dx*dx));

  return None if (d > (r0 + r1)) or (d < Math.abs(r0 - r1))

  a = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;
  x2 = x0 + (dx * a/d);
  y2 = y0 + (dy * a/d);

  h = Math.sqrt((r0*r0) - (a*a));
  rx = -dy * (h/d);
  ry = dx * (h/d);

  p1: {x: x2 + rx, y: y2 + ry} 
  p2: {x: x2 - rx, y: y2 - ry}

  
tributary.intersect = (line1, line2) ->
  [x1,y1,x2,y2] = [line1.p1.x, line1.p1.y, line1.p2.x, line1.p2.y]
  [x3,y3,x4,y4] = [line2.p1.x, line2.p1.y, line2.p2.x, line2.p2.y]
  [bx, by_, dx, dy] = [x2 - x1, y2 - y1, x4 - x3, y4 - y3]

  b_dot_d_perp = (bx * dy) - (by_ * dx)
  return None if b_dot_d_perp is 0
  
  [cx, cy] = [x3 - x1, y3 - y1]
  t = (cx * dy - cy * dx) / b_dot_d_perp
  
  x: x1 + t * bx, 
  y: y1 + t * by_

  
tributary.from3points = (points) ->
  
  [a, b, c] = [points...]
  line1 = tributary.circle_circle_bisector(a, b)
  line2 = tributary.circle_circle_bisector(b, c)
  p_center = tributary.intersect(line1, line2)
  
  p: p_center
  line1: line1
  line2: line2