snowflake3

_.md

[ Launch: snowflake3 ] 6726542 by zeffii
[ Launch Inlet ]
Gist #4397252 [ Launch Inlet ]
Gist #4397064 [ Launch Inlet ]
Gist #4391938 [ Launch Inlet ]
Gist #4389758 [ Launch Inlet ]
Gist #4381188 [ Launch Inlet ]
Gist #4380030 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"snowflake3","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"snowfl.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5005560557767211,"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,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/0ii1HIr.gif"}

inlet.js

var svg = d3.select("svg");

function posTo(t, p){
  return ["", t, p.x, p.y].join(" ")
}

function posTo2(t, p){
  return ["", t, p.x1, p.y1, p.x2, p.y2].join(" ")
}

function random_between(i, j){
  return i + Math.floor(Math.random() * (j - i + 1))
}

function make_path(c1,c2,c3,c4,c5){
  return posTo('M', {x:c1, y:c2})
      + posTo('L', {x:c1, y:-c2})
      + posTo('M', {x:c3, y:-c4})
      + posTo2('L', {x1:c1, y1:-c5, x2:-c3, y2:-c4})
      + posTo('M', {x:c3, y:c4})
      + posTo2('L', {x1:c1, y1:c5, x2:-c3, y2:c4})
}

function draw_flake(pos){

  var flake_group = svg.append("g").classed("flake", true)
      .attr("transform", "translate("+ [pos.x, pos.y] +") scale(.3)")
      .style({"fill": "none",
              "stroke": "3D7DAB",
              "stroke-opacity": 1.0,
              "stroke-width": 32 + "px"})

  var c1 = 0, 
      c2 = random_between(47,163), 
      c3 = random_between(25,78), 
      c4 = random_between(20,127), 
      c5 = random_between(22,121);
     
  flake_group.append("path")
    .attr({"id": "arm"+pos.name, 
            "d": make_path(c1,c2,c3,c4,c5)})
           
  flake_group.append("use").attr({
    "xlink:href": "#arm"+pos.name,
    "transform": "rotate(-60)"
  })
    
  flake_group.append("use").attr({
    "xlink:href": "#arm"+pos.name,
    "transform": "rotate(-120)"
  })

}

var items_wide = 6;

function get_location(i){
    var x = 74 + 86 * (i % items_wide);
    var y = 61 + 102 * Math.floor(i / items_wide);
  return {name: i, x: x, y: y}
}

var num_units = 7 * items_wide
for (var i in d3.range(0, num_units)){
  var pos = get_location(parseInt(i));
  draw_flake(pos)
}