hexagones

_.md

[ Launch: hexagones ] 33927d59684902b80b0c by enjalot
[ Launch: hexagones ] 0fbcff9edbba10ca3f24 by enjalot

config.json

{"description":"hexagones","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}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/p1bxJ3c.png","inline-console":false}

inlet.js

// probably from beesandbombs.tumblr.com
// http://i.imgur.com/ePjfPqI.gifv

//magic variables that will always be the width and height of the display
var width = tributary.sw; 
var height = tributary.sh;


//the dimensions of each blade (rectangle)
var bladewidth = 6;
var bladeheight = 68;

//the number of prop (prop is set of 3 blades) is based on display's dimensions
var cols = Math.floor(width/bladeheight);
var rows = height / bladeheight;
var num = cols * rows;

var colwidth = bladeheight*2;
var colheight = colwidth;

var data = d3.range(num).map(function(i) {
  var blades = d3.range(3).map(function(j) {
    return { r: j * 120, h: bladeheight, w: bladewidth }
  })
  return {
    i: i,
    blades: blades
  }
})

var color = d3.scale.linear()
    .domain([0, rows/4])
    .interpolate(d3.interpolateHsl)
    .range(['#ea002b', '#23cb6f'])


var svg = d3.select("svg").append("g")
svg.attr("transform", "translate(-30, -30)");

var gs = svg.selectAll("g.prop")
  .data(data)

gs.enter().append("g").classed("prop", true)

gs.attr({
  transform: function(d,i) {
    var j = Math.floor(i/cols);
    var x = (i % cols) * (colwidth - bladeheight/3.5 - bladewidth/2) + (j % 2 ? bladeheight*0.85 : bladewidth);

    var y = j * (colheight - bladeheight/2 - bladewidth/2);
    var even = tributary.anim(0, 120);
    var odd = tributary.anim(120, 240)
    
    
    var r = j % 2 ? even : odd;

    return "translate(" + [x, y] + ")rotate(" + r + ")";
  }
})
.attr({
  fill: function(d,i) {
    var ii = i % cols;
    var j = Math.floor(i/cols);
    var ci = cols/3;
    var cj = rows/3;
    var dist = Math.sqrt((ci-ii)*(ci-ii) + (cj-j)*(cj-j))
    var index = dist / tributary.anim(1, rows/2);
    return color(index);
  }
})

var bs = gs
  .selectAll("rect.blade")
  .data(function(d) { return d.blades })

bs.enter().append("rect").classed("blade", true)

bs.attr({
  width: function(d) { return d.w },
  height: function(d) { return d.h },
  transform: function(d) { return "rotate(" + d.r + "," + [d.w/2, 0] + ")translate(" + [0, 0] + ")" }
})

style.css

svg {
  background: #042b3d;
}

.blade {
  rx: 2;
  ry: 2;
}