this

_.md

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

config.json

{"description":"this","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}

inlet.js

//WORK HARDER NOT SMARTER
//menial work for tributary goofballs


var angle = 14;//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 lineWidth = 25;
var boxHeight = 250;

var svg  = d3.select('svg');
var startPoint = {x : 332, y: 96};
var rectSize = {l: lineWidth, w: 271, h : 193};
var colors = {top: '#124850', left: '#2eb4c7', right: '#1a6671'};



//G
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 355, y: 102};
rectSize = {l: 236, w: lineWidth , h : 193};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 335, y: 107};
rectSize = {l: 52, w: 251, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 334, y: 275};
rectSize = {l: 26, w: 250, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 372, y: 222};
rectSize = {l: lineWidth, w: 265, h : 81};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 349, y: 211};
rectSize = {l: 34, w: 250, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

//E
startPoint = {x : 402, y: 124};
rectSize = {l: lineWidth, w: 250, h : 194};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 422, y: 129};
rectSize = {l: 38, w: 251, h : lineWidth}
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 424, y: 299};
rectSize = {l: 38, w: 250, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 424, y: 215};
rectSize = {l: 30, w: 250, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

//L
startPoint = {x : 470, y: 139};
rectSize = {l: lineWidth, w: 250, h : 194};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 492, y: 313};
rectSize = {l: 38, w: 250, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

//A
startPoint = {x : 491, y: 145};
rectSize = {l: 73, w: lineWidth, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 537, y: 250};
rectSize = {l: lineWidth, w: lineWidth, h : lineWidth};
createBox(svg, startPoint, rectSize, colors, 'mainBox');


startPoint = {x : 467, y: 150};
rectSize = {l: 73, w: lineWidth, h : 198};
createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 508, y: 162};
rectSize = {l: lineWidth, w: lineWidth, h : 194};
//createBox(svg, startPoint, rectSize, colors, 'mainBox');

//C

startPoint = {x : 412, y: 190};
rectSize = {l: lineWidth, w: 48, h : lineWidth};
//createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 412, y: 356};
rectSize = {l: lineWidth, w: 48, h : lineWidth};
//createBox(svg, startPoint, rectSize, colors, 'mainBox');

startPoint = {x : 331, y: 192};
rectSize = {l: 53, w: lineWidth, h : 194};
//createBox(svg, startPoint, rectSize, colors, 'mainBox');




//I
startPoint = {x : 318, y: 211};
rectSize = {l: lineWidth, w: lineWidth, h : 194};
createBox(svg, startPoint, rectSize, colors, '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}];
  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
    });
}