tmcw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    another riff off of geometrydaily

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font:normal 12px/20px 'Georgia';
        text-align:center;
        background:url(data:image/png;base64,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) #222;
    }
    path {
        stroke:#15234d;
        stroke-width:1.5;
        fill:transparent;
    }
    a { display:block; }
</style>
<body>
<a href='http://geometrydaily.tumblr.com/post/31794922896/262-binary-suns-a-new-minimal-geometric'>inspired by geometrydaily</a>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var g = d3.select('body').append('svg')
        .attr('width', 600)
        .attr('height', 600)
        .append('g')
        .attr('transform', 'translate(300, 400)rotate(-45)');

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

//
//      x(0,0) y(300,0)
//

// right angle

// 1 side is 1 unit
// cos = adjacent / hypot
// cos(x) = 1 / hypot
// hypot = 1 / cos(x)

// x = 1/a
// ax = 1
// a = 1/x

function unit(angle) {
    return [
        Math.cos(angle),
        Math.sin(angle)
    ];
}

function mult(x, y) {
    return x.map(function(_) {
        return _ * y;
    });
}

function gen(i) {
   var r = 150;
   var angle = Math.PI * 1.5 * (i / 38), l;
   if (angle < Math.PI/4) {
       l = (1/Math.cos(angle)) * r;
   } else if (angle < Math.PI / 2) {
       l = (1/Math.sin(angle)) * r;
   } else if (angle < (Math.PI * 3/4)) {
       l = (1/Math.sin(angle)) * r;
   } else if (angle < Math.PI * 1.25) {
       l = Math.abs((1/Math.cos(angle)) * r);
   } else if (angle < (Math.PI * 2)) {
       l = Math.abs((1/Math.sin(angle)) * r);
   }
   return [
       [0, 0],
       mult(unit(angle), l)
    ];
}

g.selectAll('path.a')
    .data(d3.range(0, 39).map(gen))
    .enter()
    .append('path')
    .attr('class', 'a')
    .attr('d', line);

g.selectAll('path.b')
    .data(d3.range(0, 39).map(gen))
    .enter()
    .append('path')
    .attr('class', 'b')
    .attr('d', line)
    .attr('transform', function() {
        return 'rotate(180, 0, 0)translate(-150, 0)';
    });

</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font:normal 12px/20px 'Georgia';
	text-align:center;
	background:url(data:image/png;base64,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) #222;
	}
	path {
	stroke:#15234d;
	stroke-width:1.5;
	fill:transparent;
	}
	a { display:block; }
	</style>
	<body>
	<a href='http://geometrydaily.tumblr.com/post/31794922896/262-binary-suns-a-new-minimal-geometric'>inspired by geometrydaily</a>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var g = d3.select('body').append('svg')
	.attr('width', 600)
	.attr('height', 600)
	.append('g')
	.attr('transform', 'translate(300, 400)rotate(-45)');

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

	//
	// x(0,0) y(300,0)
	//

	// right angle

	// 1 side is 1 unit
	// cos = adjacent / hypot
	// cos(x) = 1 / hypot
	// hypot = 1 / cos(x)

	// x = 1/a
	// ax = 1
	// a = 1/x

	function unit(angle) {
	return [
	Math.cos(angle),
	Math.sin(angle)
	];
	}

	function mult(x, y) {
	return x.map(function(_) {
	return _ * y;
	});
	}

	function gen(i) {
	var r = 150;
	var angle = Math.PI * 1.5 * (i / 38), l;
	if (angle < Math.PI/4) {
	l = (1/Math.cos(angle)) * r;
	} else if (angle < Math.PI / 2) {
	l = (1/Math.sin(angle)) * r;
	} else if (angle < (Math.PI * 3/4)) {
	l = (1/Math.sin(angle)) * r;
	} else if (angle < Math.PI * 1.25) {
	l = Math.abs((1/Math.cos(angle)) * r);
	} else if (angle < (Math.PI * 2)) {
	l = Math.abs((1/Math.sin(angle)) * r);
	}
	return [
	[0, 0],
	mult(unit(angle), l)
	];
	}

	g.selectAll('path.a')
	.data(d3.range(0, 39).map(gen))
	.enter()
	.append('path')
	.attr('class', 'a')
	.attr('d', line);

	g.selectAll('path.b')
	.data(d3.range(0, 39).map(gen))
	.enter()
	.append('path')
	.attr('class', 'b')
	.attr('d', line)
	.attr('transform', function() {
	return 'rotate(180, 0, 0)translate(-150, 0)';
	});

	</script>
	</body>