#307 Aster (reverse)

_.md

[ Launch: #307 Aster (reverse) ] 5870516 by enjalot
[ Launch: stella ] 5866690 by zeffii
[ Launch: zeffii default ] 5862028 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"#307 Aster (reverse)","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},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"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/R7Wk8tx.png"}

inlet.js

// #307 Aster  After @Tilman
// http://geometrydaily.tumblr.com/post/34831225246/
//implemented by @zeffii

d3.select("body").style("background-color", d3.rgb(225,225,225))

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

tributary.loop_type = "pingpong" //"off", "period"
var petal_height = tributary.sw/11,
    petal_width = petal_height/2,
    max_stroke_width = 0.6,
    num_symbols = 36,
    data = d3.range(num_symbols)
    rot = 0;
    scale =1.2;

// define one petal
defs.append("g").append("path")
.attr("d", function(d,i){
  var a = petal_height / 2,
      b = petal_height,
      c = petal_width / 2;
  return "M"+ [0,0,-c, -a, 0, -b, c, -a] + "Z"
})
.attr("id", 'petal')

// define cluster of petals
var to = 86, // tendral_offset
    td = 52, // tendral_dif
    rot_list = [0, to, (to + td), -to, -(to + td)];

var symbol = defs.append("g").attr("id", 'petals')
.attr("transform", "rotate(" + 19 + ")scale(4)")

rot_list.forEach(function(rot){
  symbol.append("use")
  .attr("xlink:href", '#petal')
  .attr("transform", "rotate(" + rot + ")")
})


tributary.init = function(g) {
  // define drawing space in svg
  var group1 = g.append("g").classed("group1", true)
  .attr("transform", "translate(" + [tributary.sw/2, tributary.sh/2] + ")")
  .style({"stroke": "#363636", "fill": "#B3B3B3"})
  
  var petals = group1.selectAll("use").data(data);
  petals.enter()
  .append("use")
  .attr("xlink:href", '#petals')
}

tributary.run = function(g,t) {
  rot = 0;
  scale = 1.2;
  max_stroke_width = 0.6;
  
  petals = g.select(".group1").selectAll("use")
  petals
  .attr("transform", function(d, i){
    var rotation = "rotate(" + rot + ")";
    var scale_component = "scale("+ scale + ")";
    start_x = 29/(2 + i*3)
    rot -=  0.0869*360 * t
    scale /= 1.07
    return scale_component + rotation
  })
  .style({
    "stroke-width": function(d){ return max_stroke_width *= 1.07 },
    "stroke-opacity":0.2,
    "fill-opacity": 0.4
  })
  
}



/* 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;}

.time_controls {
  display: none;
}
svg {
  background-color:#fbfbfb;
}
#display {
  overflow:none;
  background-color:#fbfbfb;
 
}
body {
  overflow:none;
  background-color:#fbfbfb;
  padding:0;
  margin:0;
}