davidyang/README.md

## README.md

      
    Raw
  

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

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

var Motor = function(x, y, name) {
  this.x = x;
  this.y = y;
  this.name = name;
};

var motors = [
  new Motor(  0,    0, "top left"),
  new Motor(920,    0, "top right"),
  new Motor(  0,  460, "bottom left"),
  new Motor(920,  460, "bottom right")
];

var Line = function(motor, name) {
  this.motor = motor;
};

Line.prototype.name = function() {
  this.motor.name;
};

var lines = [];
motors.forEach(function(motor) {
  lines.push(new Line(motor));
});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("click", function(event) {
      drawLinesToGondola(d3.event.x - 30, d3.event.y - 30);
    });

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

lines.forEach(function(line) {
  line.canvas_line = canvas.append("line").classed("rope", true);
});

var chalk = canvas.append("circle").classed("chalk", true)

function drawLinesToGondola(chalk_x, chalk_y) {
  lines.forEach(function(line) {
    line.canvas_line.datum(line)
      .transition().ease('linear')
      .attr('x1', line.motor.x)
      .attr('y1', line.motor.y)
      .attr('x2', chalk_x)
      .attr('y2', chalk_y)
  });

  chalk.datum([chalk_x, chalk_y])
    .transition().ease('linear')
    .attr("r", 10)
    .attr("cx", function(d) {return d[0]})
    .attr("cy", function(d) {return d[1]});

};

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];

  topLeftRope.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]; })

  topRightRope.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);
drawLinesToGondola(300, 300);

## 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 Motor = function(x, y, name) {
	this.x = x;
	this.y = y;
	this.name = name;
	};

	var motors = [
	new Motor( 0, 0, "top left"),
	new Motor(920, 0, "top right"),
	new Motor( 0, 460, "bottom left"),
	new Motor(920, 460, "bottom right")
	];

	var Line = function(motor, name) {
	this.motor = motor;
	};

	Line.prototype.name = function() {
	this.motor.name;
	};

	var lines = [];
	motors.forEach(function(motor) {
	lines.push(new Line(motor));
	});

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on("click", function(event) {
	drawLinesToGondola(d3.event.x - 30, d3.event.y - 30);
	});

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

	lines.forEach(function(line) {
	line.canvas_line = canvas.append("line").classed("rope", true);
	});

	var chalk = canvas.append("circle").classed("chalk", true)

	function drawLinesToGondola(chalk_x, chalk_y) {
	lines.forEach(function(line) {
	line.canvas_line.datum(line)
	.transition().ease('linear')
	.attr('x1', line.motor.x)
	.attr('y1', line.motor.y)
	.attr('x2', chalk_x)
	.attr('y2', chalk_y)
	});

	chalk.datum([chalk_x, chalk_y])
	.transition().ease('linear')
	.attr("r", 10)
	.attr("cx", function(d) {return d[0]})
	.attr("cy", function(d) {return d[1]});

	};

	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];

	topLeftRope.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]; })

	topRightRope.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);
	drawLinesToGondola(300, 300);
	<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>