mnutt/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Update the rope lengths using update(leftLength, rightLength).

  
## chalk.js
var width = 960,
    height = 500;

var motors = [
  {x: 0, y: 0},
  {x: 920, y: 0}
];

var motorDistance = motors[1].x - motors[0].x;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

var canvas = svg.append("g")
    .attr("transform", "translate(" + 20 + "," + 20 + ")");

canvas.selectAll('.motor')
  .data(motors)
  .enter().append("circle")
    .classed("motor", true)
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 10);

var leftRope = canvas.append("line").classed("rope", true)
var rightRope = canvas.append("line").classed("rope", true)
var chalk = canvas.append("circle").classed("chalk", true)

function update(l1, l2) {
  if(l1 + l2 < motorDistance) { throw("Ropes too short!"); }
  if(angle(l1, l2) > Math.PI / 2) { throw("Off the left side"); }
  if(angle(l2, l1) > Math.PI / 2) { throw("Off the right side"); }
  if(Math.sin(angle(l1, l2)) * l1 > height - 20) { throw("Hit the floor"); }

  var data = [l1, l2];

  leftRope.datum(data)
    .transition().ease('linear')
    .attr('x1', motors[0].x)
    .attr('y1', motors[0].y)
    .attr('x2', function(d) { return motors[0].x + Math.cos(angle(d[0], d[1])) * d[0]; })
    .attr('y2', function(d) { return motors[0].y + Math.sin(angle(d[0], d[1])) * d[0]; })

  rightRope.datum(data)
    .transition().ease('linear')
    .attr('x1', motors[1].x)
    .attr('y1', motors[1].y)
    .attr('x2', function(d) { return motors[1].x - Math.cos(angle(d[1], d[0])) * d[1]; })
    .attr('y2', function(d) { return motors[1].y + Math.sin(angle(d[1], d[0])) * d[1]; })

  chalk.datum(data)
    .transition().ease('linear')
    .attr("r", 10)
    .attr("cx", function(d) { console.log(angle(d[0], d[1])); return motors[0].x + Math.cos(angle(d[0], d[1])) * d[0]; })
    .attr("cy", function(d) { return motors[0].y + Math.sin(angle(d[0], d[1])) * d[0]; })
}

function angle(l1, l2) {
  return Math.acos((l1 * l1 + motorDistance * motorDistance - l2 * l2) / (2 * l1 * motorDistance));
}

update(500, 500);

## index.html
<html>
  <head>
    <style>
      svg {
        fill: #000;
        background-color: #000;
      }
      .motor {
        fill: #555;
      }
      .chalk {
        fill: #FFF;
      }
      .rope {
        stroke-width: 3;
        stroke: #FFF;
      }
    </style>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>

  <body>
    <script src="chalk.js"></script>
  </body>
</html>
	var width = 960,
	height = 500;

	var motors = [
	{x: 0, y: 0},
	{x: 920, y: 0}
	];

	var motorDistance = motors[1].x - motors[0].x;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	var canvas = svg.append("g")
	.attr("transform", "translate(" + 20 + "," + 20 + ")");

	canvas.selectAll('.motor')
	.data(motors)
	.enter().append("circle")
	.classed("motor", true)
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 10);

	var leftRope = canvas.append("line").classed("rope", true)
	var rightRope = canvas.append("line").classed("rope", true)
	var chalk = canvas.append("circle").classed("chalk", true)

	function update(l1, l2) {
	if(l1 + l2 < motorDistance) { throw("Ropes too short!"); }
	if(angle(l1, l2) > Math.PI / 2) { throw("Off the left side"); }
	if(angle(l2, l1) > Math.PI / 2) { throw("Off the right side"); }
	if(Math.sin(angle(l1, l2)) * l1 > height - 20) { throw("Hit the floor"); }

	var data = [l1, l2];

	leftRope.datum(data)
	.transition().ease('linear')
	.attr('x1', motors[0].x)
	.attr('y1', motors[0].y)
	.attr('x2', function(d) { return motors[0].x + Math.cos(angle(d[0], d[1])) * d[0]; })
	.attr('y2', function(d) { return motors[0].y + Math.sin(angle(d[0], d[1])) * d[0]; })

	rightRope.datum(data)
	.transition().ease('linear')
	.attr('x1', motors[1].x)
	.attr('y1', motors[1].y)
	.attr('x2', function(d) { return motors[1].x - Math.cos(angle(d[1], d[0])) * d[1]; })
	.attr('y2', function(d) { return motors[1].y + Math.sin(angle(d[1], d[0])) * d[1]; })

	chalk.datum(data)
	.transition().ease('linear')
	.attr("r", 10)
	.attr("cx", function(d) { console.log(angle(d[0], d[1])); return motors[0].x + Math.cos(angle(d[0], d[1])) * d[0]; })
	.attr("cy", function(d) { return motors[0].y + Math.sin(angle(d[0], d[1])) * d[0]; })
	}

	function angle(l1, l2) {
	return Math.acos((l1 * l1 + motorDistance * motorDistance - l2 * l2) / (2 * l1 * motorDistance));
	}

	update(500, 500);
	<html>
	<head>
	<style>
	svg {
	fill: #000;
	background-color: #000;
	}
	.motor {
	fill: #555;
	}
	.chalk {
	fill: #FFF;
	}
	.rope {
	stroke-width: 3;
	stroke: #FFF;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>

	<body>
	<script src="chalk.js"></script>
	</body>
	</html>