#278 Around (looks ok)

_.md

[ Launch: #278 Around (looks ok) ] 5501568 by jaybowles
[ Launch: #278 Around (cp maybe) ] 4995151 by zeffii
[ Launch: #278 Around ] 4990895 by zeffii
[ Launch: zeffii default inlet ] 4988855 by zeffii
[ Launch Inlet ]
Gist #4485126 [ Launch Inlet ]
Gist #4470504 [ Launch Inlet ]
Gist #4469595 [ Launch Inlet ]
Gist #4466941 [ Launch Inlet ]
Gist #4461697 [ Launch Inlet ]
Gist #4461508 [ Launch Inlet ]
Gist #4458395 [ Launch Inlet ]
Gist #4452401 [ Launch Inlet ]
Gist #4452384
Gist #4452367
Gist #4450163 An inlet to tributary

config.json

{"description":"#278 Around (looks ok)","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},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"periodictabledump3.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"helpers.js":{"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,"tab":"edit","display_percent":0.43346738058538115,"hidepanel":false,"thumbnail":"http://i.imgur.com/BlgBUdl.png"}

helpers.js

function translate(x, y){
  return "translate(" + [x, y] + ")"
}  
function rotate(amount){
  return "rotate(" + amount + ")"
}  
function scale(){
  var args = arguments;
  var injection = (args.length === 1) ? args[0] : [args[0], args[1]];
  return "scale(" + injection + ")"
}

// web font lookup
var font_array = ['Roboto:400,100:latin'];
WebFontConfig = {
  google: { families: font_array }
};

(function() {
    var wf = document.createElement('script');
    var dlp = document.location.protocol;
    wf.src = ('https:' == dlp ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})(); 
  
// alias console.log as log()
  
function log(text) { return console.log(text); }  

inlet.js

// whiskey. nearly
// uses an incomplete twisted group to clip path overlay

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

var rect_dim = 58
var num_squares = 224;
var num_visible_squares = 44;

var clip_dims = 104;
var data = d3.range(num_squares);
var data2 = d3.range(num_visible_squares);

var square_group = defs.append("g")
	.attr("id", "sq_rect")
    .append("rect")
	.attr({"height": rect_dim, "width": rect_dim})
	.style({"fill": "#421212", "stroke": "#E07C7C"})
	.attr({"transform": "translate(" + [-rect_dim/2, -rect_dim/2] + ")"})

var a_group = defs.append("g").attr("id", "sq_rects")
var b_group = defs.append("g").attr("id", "sq_rects2")

function create_rotated_squares(group_name, data_in){
  var rects = group_name.selectAll("g.swiv")
      .data(data_in)
      .enter()
      .append("g")
      .classed("swiv", true)
      .attr("transform", function(d,i){ 
          var rot = (360/num_squares) * i;
          var rads = rad(rot);
          var x = Math.sin(rads) * 206;
          var y = Math.cos(rads) * 78;
          return "translate(" + [x, y] + ") rotate(" + (-630/num_squares)*i + ")"
      })
      .append("use")
      .attr("xlink:href", "#sq_rect")
}

create_rotated_squares(a_group, data)
create_rotated_squares(b_group, data2)

var chip = defs.append("rect")
	.attr("id", "clip_shape")
	.attr({"height": clip_dims, "width": clip_dims})
	.attr({"transform": "translate("+[ -50, 50 ] + ")"})

                       
var cp = defs.append("clipPath")
	.attr("id", "clip_path")
	.append("use")
	.attr("xlink:href", "#clip_shape")



svg.append("use").attr("transform", "translate(" + [316,264] + ")")
	.attr("xlink:href", "#sq_rects")


var masks = svg.append("g")
	.attr("transform", "translate(" + [3,-90] + ")")

// mutual transforms
var cpos = {x: 313, y: 354, rot: 0};

masks.append("use")
	.attr("xlink:href", "#sq_rects2")
	.style("clip-path", "url(#clip_path)")
	.attr("transform", "translate(" + [cpos.x,cpos.y] + ")")


// clip shape bounding box
masks.append("use")
	.attr("xlink:href", "#clip_shape")
	.style({"stroke": "#132323", "stroke-width": 1 + "px", "fill": "none", "stroke-opacity": 0.0})
	.attr("transform", "translate(" + [cpos.x,cpos.y] + ")")


function rad(deg) { 
  return ((2 * Math.PI) / 360) * deg 
}