dots

_.md

[ Launch: dots ] 6497226 by georules

config.json

{"description":"dots","endpoint":"","display":"svg","public":true,"require":[{"name":"seedrandom","url":"http://davidbau.com/encode/seedrandom-min.js"},{"name":"protovis","url":"http://mbostock.github.io/protovis/protovis-r3.2.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},"dots.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"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/KqohPAj.gif","inline-console":false}

dots.json

[{"x":283,"y":420,"c":"hsl(53.90213762888595,100%,50%)","d":0.5,"r":10},
 {"x":269,"y":484,"c":"hsl(64.27076511244896,100%,50%)","d":0.5,"r":10},
 {"x":271,"y":11,"c":"hsl(256.30766898186,100%,50%)","d":0.5,"r":10},
 {"x":446,"y":157,"c":"hsl(17.973936387708502,100%,50%)","d":0.5,"r":10},
 {"x":340,"y":26,"c":"hsl(275.429985614387,100%,50%)","d":0.5,"r":10},
 {"x":201,"y":58,"c":"hsl(155.69430921835723,100%,50%)","d":0.5,"r":10},
 {"x":202,"y":295,"c":"hsl(248.8021681901017,100%,50%)","d":0.5,"r":10},
 {"x":343,"y":113,"c":"hsl(156.80140749187004,100%,50%)","d":0.5,"r":10},
 {"x":35,"y":345,"c":"hsl(53.63444445401732,100%,50%)","d":0.5,"r":10},
 {"x":495,"y":345,"c":"hsl(155.21509674241088,100%,50%)","d":0.5,"r":10}]

inlet.js

var attraction = {x:250,y:250}
var svg = d3.select("svg");

Math.seedrandom("seed");

var dots = tributary.dots;

    
var rand = function(min,max)	{
  return Math.random() * (max - min) + min;
}


var gendot = function(x,y,c,d) {
  var dot = {x: x | rand(0,500), 
         y: y | rand(0,500), 
         c: "hsl(" + Math.random() * 360 + ",100%,50%)",
         d: 0.5,
         r: 10}
  dots.push(dot)
}

var w = document.body.clientWidth,
    h = document.body.clientHeight,
    nodes = pv.range(200).map(function(i) {
      return {x: w * Math.random(),
              y: h * Math.random(),
              r: 2 + Math.random() * 8};
    });


var tick = function(data, dt) {
  var dtt = dt * 100
  var s = 1;
  dots.forEach(function(e,i) {
    e.x = e.x + dtt * s * Math.cos(e.d)
    e.y = e.y + dtt * s* Math.sin(e.d)
    div = 5
    
    e.d = e.d + Math.abs(attraction.x - e.x)
    
    if (e.x < 0) e.x = 0
    if (e.y < 0) e.y = 0
    if (e.x > 500) e.x = 500
    if (e.y > 500) e.y = 500
  })
  updateData(data)
}

var tlast = 0
tributary.run = function(g,t)	{
  tdiff = t-tlast
  if (tdiff < 10) tick(dots, tdiff)
  tlast = t
}

var updateData = function(data) {
  var circle = svg.selectAll("circle").data(data).attr(
    {
    "cx":function(d) {return d.x},
     "cy":function(d) {return d.y},
    "r":function(d) {return d.r}
    })
  .style(
    {
      fill: function(d) {return d.c}
    })
}

var circle = svg.selectAll("circle").data(dots).enter().append("circle").attr(
  {
    "cx":function(d) {return d.x},
    "cy":function(d) {return d.y},
    "r":function(d) {return d.r}
  })
.style(
  {
    fill: function(d) {return d.c}
  })
console.log(JSON.stringify(dots))