Skip to content

Instantly share code, notes, and snippets.

@davidyang

davidyang/README.md

Forked from mnutt/README.md
Created November 4, 2013 21:50
Show Gist options
  • Save davidyang/7309772 to your computer and use it in GitHub Desktop.
Save davidyang/7309772 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

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

Raw
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);
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment