#308 twenty-five suns

_.md

[ Launch: #308 twenty-five suns ] 4964299 by enoex
[ Launch: #308 twenty-five suns ] 4964298 by enoex
[ Launch: #308 twenty-five suns ] 4964114 by enjalot

config.json

{"description":"#308 twenty-five suns","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

//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 = 36;
var w = 128;
var spacing = 0;
var rots = [0,1,1,1,3,2,3,3,0,0,1,0,3,1,2,1,2,1,2,1,2,3,2,3,2];
var cx = 10;
var cy = 10;

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

var blur = 7;
blur *= 0.1;

var pathStyle = {
    fill: "none",
    stroke: "#ff0000",
    "stroke-opacity": 0.5,
    "stroke-width": 2
  }

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

function drawSun(g) {
  g.append("rect")
  .attr({
    width: w,
    height: w,
    fill: "none",
    //stroke: "#0000ff"
  })
  var lines = g.selectAll("line.ray")
    .data(d3.range(n))
    .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)
}

svg.selectAll("g.sun")
 .data(d3.range(nsuns*nsuns))
 .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] + ")";
})
.attr("filter", "url(#morph)")
.each(function(d) {
  drawSun(d3.select(this))
})

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")