geometry daily #129

_.md

[ Launch: geometry daily #129 ] 4943065 by enoex
[ Launch: geometry daily #129 ] 4942307 by enjalot

config.json

{"description":"geometry daily #129","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}},"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 challenge with @tmcw
//http://geometrydaily.tumblr.com/post/22651630890/129-abloom-a-new-minimal-geometric-composition

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

var line = d3.svg.line()
.x(function(d) {
  return d.x;
})
.y(function(d) {
  return d.y;
})

function circle(g, cx, cy, r) {
  g.append("circle")
  .attr({
    cx: cx,
    cy: cy,
    r: r
  })
}
function tri(g, theta0, cx, cy, r) {
  var theta = -Math.PI/2 + theta0;
  var top = {
    x: r * Math.cos(theta) + cx,
    y: r * Math.sin(theta) + cy
  }
  theta = -Math.PI - Math.PI/6 + theta0
  var left = {
    x: r * Math.cos(theta) + cx,
    y: r * Math.sin(theta) + cy
  }
  theta = Math.PI/6 + theta0
  var right = {
    x: r * Math.cos(theta) + cx,
    y: r * Math.sin(theta) + cy
  }
  g.append("path")
  .attr("d", line([top, left, right, top]))
}
function circleTri(g, cx, cy, r) {
  //we want to draw a circle with an equilateral triangle inside of it
  //many times
  circle(g, cx, cy, r)
  //draw the triangle
  //top point
  tri(g, 0, cx, cy, r)
  tri(g, Math.PI, cx, cy, r)
}

var radius = tributary.sh/2 - 2;
var cx = tributary.sw/2;
var cy = tributary.sh/2;

circle(svg, cx, cy, radius);
tri(svg, 0, cx, cy, radius)
tri(svg, Math.PI, cx, cy, radius)

circle(svg, cx, cy, radius/2)
tri(svg, Math.PI, cx, cy, radius/2)

//lets make 6 circles with half the radius centered at 6 points
//around the big circle
for(var i = 0; i < 6; i++) {
  var theta = i * Math.PI / 3 + Math.PI/6;
  var r = radius / 2;
  var lcx = r * Math.cos(theta) + cx;
  var lcy = r * Math.sin(theta) + cy;
  circle(svg, lcx, lcy, r)
  if(i % 2 == 0) {
    tri(svg, Math.PI, lcx, lcy, r);
  } else {
    tri(svg, 0, lcx, lcy, r);
  }
  
}

style.css

circle {
  fill: none;
  stroke: #1FB41F;
  stroke-width: 2;
  opacity: 0.4
}

path {
  fill: none;
  stroke: #1FB41F;
  stroke-width: 2;
  opacity: 0.3
}