#268 Stairway

_.md

[ Launch: #268 Stairway ] 5971635 by jzgit
[ Launch: zeffii default ] 5501195 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"#268 Stairway","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},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"datamatc.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,"thumbnail":"http://i.imgur.com/KSjGFXN.png"}

datamatc.js

/*
var data = [
  {shape: tpath1, position: [ 0, 0], rotation: 0, color: colors[0]},
  {shape: tpath1, position: [ 0, 19], rotation: 0, color: colors[0]},
  {shape: tpath2, position: [ 0, 0], rotation: 0, color: colors[1]},
  {shape: tpath1, position: [ 0, 0], rotation: -90, color: colors[2]},
  {shape: tpath2, position: [ 0, 0], rotation: -90, color: colors[3]},
  {shape: tpath1, position: [ 0, 0], rotation: -180, color: colors[4]},
  {shape: tpath2, position: [ 0, 0], rotation: -180, color: colors[5]},
  {shape: tpath1, position: [ 0, 0], rotation: -270, color: colors[5]},
  {shape: tpath2, position: [ 0, 0], rotation: -270, color: colors[5]},
  {shape: tpath2, position: [tw,tw], rotation: 0, color: colors[5]},
  {shape: tpath1, position: [tw,tw], rotation: 0, color: colors[4]},
  {shape: tpath2, position: [tw,tw], rotation: 90, color: colors[3]},
  {shape: tpath1, position: [tw,tw], rotation: 90, color: colors[2]},
  {shape: tpath2, position: [tw,tw], rotation: 180, color: colors[1]},
  {shape: tpath1, position: [tw,tw], rotation: 180, color: colors[0]}
];
*/

inlet.js

// after http://geometrydaily.tumblr.com/post/32196442103/
// #268 Stairway

var offwhite = d3.rgb(225,225,225);
d3.select("body").style("background-color", offwhite)

var svg = d3.select("svg");
var group1 = svg.append("g").classed("group1", true);

group1.attr("transform", "translate(" + [228, 173] + ")")

var tw = 163,
    tpath1 = "M " + [0,0,tw,0,tw,-tw] + "z",
    tpath2 = "M " + [0,0,tw,-tw,0,-tw] + "z",
    tpaths = [tpath1, tpath2],
    colors = ['#5E0336', '#770244', '#8D0451', '#A5045F', '#B30065','#C5006F'],
    data = [], 
    sign = -1,
	pos, rot, tpath, col, choice, token, j;

for (var i in d3.range(14)){
    j = +i;
    token = (j>=8);
     
	// shape selection  
    choice = j%2 === 0 ? 0 : 1;
    if (token) choice = j%2 === 0 ? 1 : 0
    tpath = tpaths[choice];
    
    // position selection
    pos = token ? [tw,tw] : [0, 0];
    
    // rotation magic
    rot = sign * Math.floor(j/2) * 90
    if (token) rot = Math.abs(rot + 360)
    
    // color picking..
    choice = j
    if (j >= 5 ) choice = 5
    if (j > 8 ) choice = 4 - ((j+1) % 5)
    col = colors[choice]
     
    data.push({position: pos, shape: tpath, rotation: rot, color: col})
}


// set default styling, also looks cool without stroke.
group1.style({"stroke": offwhite, "stroke-width": 1.4})

// prepare path selections for data array
var triangles = group1.selectAll("path").data(data);

// for each item in data do:
triangles.enter()
	.append("path")
	.attr("d", function(d){ return d.shape})
	.style({"fill": function(d){ return d.color }})
	.attr("transform", function(d){
		var translate = "translate(" + d.position + ")";
        var rotate = "rotate(" + d.rotation + ")";
		return translate + rotate
	})



   
   
   
   

/* EOF */

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}