#308 twenty-five suns march

_.md

[ Launch: #308 twenty-five suns march ] 4964495 by enjalot
[ Launch: #308 twenty-five suns dance ] 4964314 by enjalot
[ Launch: #308 twenty-five suns ] 4964114 by enjalot

config.json

{"description":"#308 twenty-five suns march","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":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/vWZmT9A.png"}

inlet.js

//geometry daily challenge
//http://geometrydaily.tumblr.com/post/34901916113/308-twenty-five-suns-a-new-minimal-geometric
//with @tmcw:
//and @sel


var nsuns = 5; //number of suns per row
var n = 20;
var w = 89;
var spacing = 0;
var rots = [0,1,0,1,3,2,3,3,0,0,1,0,3,1,2,1,2,1,2,1,2,3,2,3,2];
var cx = 63;
var cy = 50;

tributary.loop_type = "pingpong";
tributary.duration = 3500;

var theta = Math.PI / 2 / (n-1);

//var blur = 7;
//blur *= 0.1;

var pathStyle = {
    fill: "none",
    stroke: "#ff0000",
    "stroke-opacity": 0.2,
    "stroke-width": 3,
    "stroke-linecap":"round"
  }

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

function drawSun(g) {
  var lines = g.selectAll("line.ray")
    .data(d3.range(n))
  lines
    .enter()
    .append("line").classed("ray", true);
  
  
  lines.attr({
    x1: 0,
    y1: w,
    x2: function(d,i){ 
      var x;
      if(theta * i < Math.PI/4) {
        x = w
      } else {
        x = w * Math.cos(theta * i) / Math.sin(theta*i); 
      }
      return x;
    },
    y2: function(d,i) {
      var y;
      if(theta * i >= Math.PI/4) {
        y = 0;
      } else {
        y = w - w * Math.sin(theta * i) / Math.cos(theta*i);
      }
      return y
    }
  })
  .style(pathStyle)
}
tributary.init = function(g) {
  var suns = g.selectAll("g.sun")
   .data(d3.range(nsuns*nsuns));
  suns
   .enter()
   .append("g").classed("sun", true)
  .attr("transform", function(d,i) {
    var x = cx + (i % nsuns) * (w+spacing);
    var y = cy + parseInt(i/nsuns) * (w+spacing);
    var rot = rots[i] * 90;
    return "translate(" + [x,y] +")" + "rotate(" + [rot, w/2, w/2] + ")";
  })
  .each(function(d) {
    drawSun(d3.select(this))
  })
}

tributary.run = function(g, t) {
  //-0.08 -> 0.027
  theta = Math.PI / 2 / (n-1) + -0.12 + t * 0.135;
  
  //var r = rots.pop();
  //rots.unshift(r)
  
  g.selectAll("g.sun")
  .attr("transform", function(d,i) {
    var x = cx + (i % nsuns) * (w+spacing);
    var y = cy + parseInt(i/nsuns) * (w+spacing);
    var rot = (rots[i] + t) * 90 * t;
    return "translate(" + [x,y] +")" + "rotate(" + [rot, w/2, w/2] + ")";
  })

  .each(function(d) {
    drawSun(d3.select(this))
  })
}
/*
.attr("filter", "url(#morph)")
var defs = svg.append('defs')
var filter = defs.append('filter')
    			.attr('id','morph')
    
filter
.append("svg:feGaussianBlur")
 .attr("in", "SourceGraphic")
  .attr("stdDeviation", blur)
  .attr("result", "blurout")
  */