BOXES

_.md

[ Launch: this ] 5508561 by gelicia
[ Launch: this ] 5503546 by gelicia

config.json

{"description":"BOXES","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":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/bpqYYa2.png"}

inlet.js

var angle = 34;//this is the angle of the empty space until the polygon starts
//the angle of the start point will realy be 180 - (angle*2)
//this doesn't need to be dynamic, it is because I like to play :3
var rightAngle = 90;

var svg  = d3.select('svg');
var startPoint = {x : 83, y: -60};
var rectSize = {l: 50, w: 76, h : 50};
var colors = [{top: '#124850', left: '#2eb4c7', right: '#1a6671'},
             {top: '#504112', left: '#C7842E', right: '#71551A'}];

var spacing = {horizontal: 81,
               vertical : 76};

var rows = { horizontal : 6,
            vertical: 6};

for (var i = 0; i < rows.horizontal; i++){
  for (var j = rows.vertical; j > 0; j--){
    var thisColor = (i+j) % 2 === 0 ? colors[0] : colors[1];
    //I wish I was smart enough to figure out spacing automatically :(
    //Its like cosines and shit
    var thisStart = {x: startPoint.x + (spacing.horizontal * i), 
                     y: startPoint.y + (spacing.vertical * j)};
	createBox(svg, thisStart, rectSize, thisColor, 'mainBox');
  
  }  
}

function createBox(svg, startPoint, rectSize, colors, id){
  
  var top = [{x:startPoint.x, "y":startPoint.y},//0 top
           //1 right
        {"x": startPoint.x + (rectSize.l * Math.cos(angle * (Math.PI/180))),
         "y": startPoint.y + (rectSize.l * Math.sin(angle * (Math.PI/180)))}];
  //2 bottom
  top.push({x: top[1].x + (rectSize.w * Math.cos((180-angle) * (Math.PI/180))),
             y : top[1].y + (rectSize.w * Math.sin((180-angle) * (Math.PI/180)))});  
  //3 left
  top.push({x: top[2].x - (rectSize.l * Math.cos(angle * (Math.PI/180))),
             y : top[2].y - (rectSize.l * Math.sin(angle * (Math.PI/180)))}); 
  
  var left =[{x: top[3].x, y: top[3].y},
             {x: top[2].x, y: top[2].y}];
  
  left.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  left.push({x: top[3].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[3].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  var right =[{x: top[1].x, y: top[1].y},
             {x: top[2].x, y: top[2].y}];
  
  //this doesn't need to be dynamic, it is because I like to play :3
  right.push({x: top[2].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[2].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  right.push({x: top[1].x  + (rectSize.h * Math.cos(rightAngle * (Math.PI/180))), 
             y: top[1].y + (rectSize.h * Math.sin(rightAngle * (Math.PI/180))) });
  
  
  
  svg.selectAll("polygon #top" + id)
    .data([top])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.top,
      //'fill-opacity':'0.1',
      id: 'top' + id
    });
  
  svg.selectAll("polygon #left" + id)
    .data([left])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.left,
      id: 'left' + id
    });
  
  svg.selectAll("polygon #right" + id)
    .data([right])
    .enter().append("polygon")
    .attr({
      points: function(d) { 
          return d.map(function(d) { return [d.x,d.y].join(","); }).join(" ");},
      fill: colors.right,
      id: 'right' + id
    });
}