Path-Line Reflection

This example builds on the previous Path-Line Intersection block by picking the path-line intersection that is closest to the line's starting point, computing the angle of intersection and the angle of reflection, and then drawing a reflection line. See the Bottled Gas Animation block for an example that uses this functionality.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.polygon line {
  fill: none;
  stroke: #000;
  stroke-width: 0.5;
}

.polygon circle {
  fill: #000;
  stroke: #fff;
  cursor: move;
}

.reflection {
  fill: none;
  stroke: #000;
}

</style>

<body>

var n_segments = 100;

var svg = d3.select("svg");
var path = svg.select("path");

var polygon = svg.append("g")
    .attr("class", "polygon")
    .datum([[300, 350], [660, 200]]);

var highlights = svg.append("g");

polygon.append("line")
    .attr("stroke-dasharray", "5, 5")
    .call(positionLine);

polygon.selectAll("circle")
    .data(function(d) { return d; })
  .enter().append("circle")
    .call(positionCircle)
    .attr("r", 4.5)
    .call(d3.behavior.drag()
      .origin(function(d) { return {x: d[0], y: d[1]}; })
      .on("drag", function(d) {
        d[0] = d3.event.x, d[1] = d3.event.y;
        d3.select(this).call(positionCircle);
        polygon.select("line").call(positionLine);
        compute_angle();
      }));

var pathEl = path.node();
var pathLength = pathEl.getTotalLength();
var line = polygon.select("line");

function positionCircle(circle) {
  circle
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });
}

var dist_btwn_pts = function(pt1, pt2) {
  return Math.pow(Math.pow(pt1.x - pt2.x,2) + Math.pow(pt1.y - pt2.y,2) , 0.5);
}

var btwn = function(a, b1, b2) {
  if ((a >= b1) && (a <= b2)) { return true; }
  if ((a >= b2) && (a <= b1)) { return true; }
  return false;
}

var path_line_intersections = function(pathEl, line) {

}

var first_path_line_intersection = function(pathEl, line) {

}

var draw_reflection = function(pt, angle, int_seg ) {

var angle_text = Math.abs(angle);
  if (angle_text > 90) { angle_text = Math.abs(180 - angle_text); }
  if (angle_text > 90) { angle_text = Math.abs(180 - angle_text); }
  
  highlights.selectAll("text").remove();
  highlights.selectAll("line").remove();

highlights.append("text")
     .attr("x", pt.x + 10)
     .attr("y", pt.y + 10)
     .text(angle_text.toPrecision(4) + "º");

highlights.append("line")
     .attr("class", "reflection")
     .attr("x1", pt.x)
     .attr("y1", pt.y)
     .attr("x2", pt.x + 20 * (int_seg.x2 - int_seg.x1))
     .attr("y2", pt.y + 20 * (int_seg.y2 - int_seg.y1))
     .attr("transform", "rotate(" + angle + " " + pt.x + " " + pt.y + ")");

highlights.append("line")
     .attr("class", "reflection")
     .attr("x1", pt.x)
     .attr("y1", pt.y)
     .attr("x2", line.attr('x1'))
     .attr("y2", line.attr('y1'));
            
}

var compute_angle = function() {

var intersection = first_path_line_intersection(pathEl, line);
  
  if (typeof(intersection) != "string") {
    var int_pt = intersection[0];
    var int_seg = intersection[1];
    var line2 = {x1: line.attr('x1'), x2: line.attr('x2'), 
                 y1: line.attr('y1'), y2: line.attr('y2')};
    var angle = angle_btwn_lines(line2, int_seg);

draw_reflection( int_pt, angle, int_seg );

} else {

highlights.selectAll("text").remove();
    highlights.selectAll("line").remove();
  
  }
    
}

compute_angle();

</script>

https://d3js.org/d3.v3.min.js