moving perticle

_.md

[ Launch: Tributary inlet ] 8683389 by Y4suyuki

config.json

{"description":"moving perticle","endpoint":"","display":"svg","public":true,"require":[],"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}},"fullscreen":false,"play":false,"loop":false,"restart":true,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/z6fLugo.png"}

inlet.js

var svg_w = 400,
    svg_h = 400;

var v_h = 5,
    v_l = 1;

var svg = d3.select('svg')
.attr('width', svg_w)
.attr('height', svg_h);

var start_pos = [10, 40, 70, 100],
    toll_pos = [190, 220]

var data = [
  {pos:  10, v: v_h, id: 1},
  {pos:  40, v: v_h, id: 2},
  {pos:  70, v: v_h, id: 3},
  {pos: 100, v: v_h, id: 4},
  {pos: 130, v: v_h, id: 5},
  {pos: 140, v: v_h, id: 6}
  ];

var ps = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function(d) { return d.pos; })
.attr('cy', 50)
.attr('r', 5)
.attr('fill', '#59E4F7');

var toll = svg.append('rect')
.attr('x', toll_pos[0])
.attr('y', 50)
.attr('width', toll_pos[1] - toll_pos[0])
.attr('height', 20)
.attr('fill', '#81F88F');


function check_collision(p) {
  //check if any particles are near to this particle

  var this_pos = parseInt(p.attr('cx'), 10),
      this_d = p.datum();
  
  var new_ps = ps.filter(function(d) { return d.id > this_d.id; })
  .filter(function (d) {
    var _this = d3.select(this);
    var e = parseInt(_this.attr('cx'), 10) - this_pos;
    var res = e > 0 && e < 20;
    console.log(d.id + ', ' + this_d.id + ': ' + e + ', ' + res);
    return res;
  });

  return new_ps[0].length > 0;
}


function update_ps() {
  ps.each(function() {
    var p = d3.select(this),
        cp = parseInt(p.attr('cx'), 10);
    //console.log('cp: ' + cp);
    if (toll_pos[0] < cp && cp < toll_pos[1]) {
      // in the toll
      p.attr('cx', (cp + v_l));
    } else if ( check_collision(p) ){
      p.attr('cx', (cp + v_l)%svg_w);
    } else {
      // no constraints run in v_h
      p.attr('cx', (cp + v_h)%svg_w);
    }
  })
}


setInterval(update_ps, 30);