shanewholloway/README.md

## README.md

      
    Raw
  

              README.md
            
          
    After reading about Easy wireframe display with Barycentric coordinates, I started thinking about generating those coordinates uniquely for each vertex.
Is it possible to assign each vertex of an Apollonian network a single
Barycentric coordinate, such that the Barycentric coordinate would be unique for
each triangle to which the vertex belongs? For example, a Triakis Tetrahedron is
polyhedron with an Apollonian graph structure.
For instance in the example network here, can a function B(m) be defined
to give Barycentric coordinates valid for triangles mnp, mon, and
mpo?
Given points m=[0,0]; n=[0,1]; o=[-1,-1]; p=[1,-1]
and triangles [m,n,p], [m,o,n], [m,p,o],
what is [B(m), B(n), B(o), B(p)]?

  
## index.html
<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8" />
  <title>Barycentric Coordinates</title>
  <meta name="author" content="Shane Holloway" />

<style>
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
circle { fill: transparent; stroke: black }
line { stroke: #284 }
text { font-size: 24px; color: black;
  -o-transform: translate(5px,1em);
  -ms-transform: translate(5px,1em);
  -moz-transform: translate(5px,1em);
  -webkit-transform: translate(5px,1em);
  transform: translate(5px,1em);
}
</style>

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<script>
var points = [
 {label:'m', vertex:[ 0, 0], baycentric:[]}
,{label:'n', vertex:[ 0, 1], baycentric:[]}
,{label:'o', vertex:[-1,-1], baycentric:[]}
,{label:'p', vertex:[ 1,-1], baycentric:[]}
]
var pts = points.reduce(function(r,e){r[e.label]=e; return r}, {})
var edges = [
 [pts.m, pts.n]
,[pts.m, pts.o]
,[pts.m, pts.p]
,[pts.n, pts.o]
,[pts.n, pts.p]
,[pts.o, pts.p]
]

var viewWidth = 600, viewHeight = 400, stageHeight = 1.5*(1 - -1)
var scale = viewHeight/stageHeight;
function pt_x(d) { return scale*d.vertex[0] }
function pt_y(d) { return scale*d.vertex[1] }

var svg = d3.select("body").append("svg")
    .attr("width", viewWidth).attr("height", viewHeight)
  .append("g")
    .attr("transform", "translate(" + viewWidth / 2 + "," + viewHeight / 2 + ")")
  .append("g");

var vis_edges = svg.selectAll('line')
    .data(edges)
  .enter().append('line')
    .attr('x1', function(d) { return pt_x(d[0]) })
    .attr('y1', function(d) { return pt_y(d[0]) })
    .attr('x2', function(d) { return pt_x(d[1]) })
    .attr('y2', function(d) { return pt_y(d[1]) })


var vis_points = svg.selectAll('circle')
    .data(points)
  .enter()
    .append('circle')
      .attr('r', 5)
      .attr('cx', pt_x)
      .attr('cy', pt_y)

var vis_labels = svg.selectAll('text')
    .data(points)
  .enter()
    .append('text')
      .attr('x', pt_x)
      .attr('y', pt_y)
      .text(function(d){ return d.label})

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8" />
	<title>Barycentric Coordinates</title>
	<meta name="author" content="Shane Holloway" />

	<style>
	body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	circle { fill: transparent; stroke: black }
	line { stroke: #284 }
	text { font-size: 24px; color: black;
	-o-transform: translate(5px,1em);
	-ms-transform: translate(5px,1em);
	-moz-transform: translate(5px,1em);
	-webkit-transform: translate(5px,1em);
	transform: translate(5px,1em);
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<body>
	<script>
	var points = [
	{label:'m', vertex:[ 0, 0], baycentric:[]}
	,{label:'n', vertex:[ 0, 1], baycentric:[]}
	,{label:'o', vertex:[-1,-1], baycentric:[]}
	,{label:'p', vertex:[ 1,-1], baycentric:[]}
	]
	var pts = points.reduce(function(r,e){r[e.label]=e; return r}, {})
	var edges = [
	[pts.m, pts.n]
	,[pts.m, pts.o]
	,[pts.m, pts.p]
	,[pts.n, pts.o]
	,[pts.n, pts.p]
	,[pts.o, pts.p]
	]

	var viewWidth = 600, viewHeight = 400, stageHeight = 1.5*(1 - -1)
	var scale = viewHeight/stageHeight;
	function pt_x(d) { return scale*d.vertex[0] }
	function pt_y(d) { return scale*d.vertex[1] }

	var svg = d3.select("body").append("svg")
	.attr("width", viewWidth).attr("height", viewHeight)
	.append("g")
	.attr("transform", "translate(" + viewWidth / 2 + "," + viewHeight / 2 + ")")
	.append("g");

	var vis_edges = svg.selectAll('line')
	.data(edges)
	.enter().append('line')
	.attr('x1', function(d) { return pt_x(d[0]) })
	.attr('y1', function(d) { return pt_y(d[0]) })
	.attr('x2', function(d) { return pt_x(d[1]) })
	.attr('y2', function(d) { return pt_y(d[1]) })


	var vis_points = svg.selectAll('circle')
	.data(points)
	.enter()
	.append('circle')
	.attr('r', 5)
	.attr('cx', pt_x)
	.attr('cy', pt_y)

	var vis_labels = svg.selectAll('text')
	.data(points)
	.enter()
	.append('text')
	.attr('x', pt_x)
	.attr('y', pt_y)
	.text(function(d){ return d.label})

	</script>