d3 draggable object example #4 – parametric + improved selection identification

Write a function to: given a line L and a reference point p_ref, find the target point p_tgt in L, such that the line through p_ref and p_tgt is perpendicular to L. p_tgt is the point in L that's closest to p_ref

/* given a line L through points pt1,pt2,
 * find the point p on the line such that the line through p,target_pt
 * is perpendicular to L
 *
 * point = {x,y}
 * target_pt, pt1, pt2 :: point
 * return :: point
 */
ex.find_perpendicular = function(target_pt, pt1, pt2, clip_flag)
{
/*
 *                               * (x2,y2) = pt2
 *                             /
 *                           /
 *                         /  L
 *                   p   /
 *                     *
 *                   /   \  M
 *                 /       \
 * pt1 = (x1,y1) *           \
 *                            * (x0,y0) pt0
 *
 * parameterise the line L through pt1,pt2:
 *    L comprises the points L(t) = pt1 + t*(pt2-pt1)
 * given a particular point p = L(t0),  consider the line M
 * through L(t0) and (x0,y0)
 *    M comprises the points M(s) = pt0 + s*(L(t0)-pt0)
 *
 * we seek t such that the line M(s) through L(t) and (x0,y0)
 * is perpendicular to L.
 *
 * A vector lv parallel to L is (pt2-pt1).
 *   lv = (x2-x1,y2-y1)
 * A vector mv parallel to the line thru L(t)
 *   L(t) = pt1 + t*(pt2-pt1) = (1-t)*pt1 + t*pt2
 * and pt0 is:
 *   mv = L(t)-pt0
 *      = ((1-t)*x1 + t*x2) - x0,
 *         (1-t)*y1 + t*y2) - y0)
 *
 *  lv . mvT
 *      = (x2-x1)*[(1-t)*x1 + t*x2 - x0]

 *         + (y2-y1)*[(1-t)*y1 + t*y2 - y0]
 *
 * lv. mvT is 0 when lv and mv are _|_:
 *   (x2-x1)*[(1-t)*x1 + t*x2 - x0] = -(y2-y1)*[(1-t)*y1 + t*y2 - y0]
 *   (x2-x1)*[-t*x1 + t*x2 + x1-x0] = -(y2-y1)*[-t*y1 + t*y2 + y1-y0]
 *   t*(x2-x1)*[-x1 + x2] + (x2-x1)*(x1-x0) = t*[-(y2-y1)]*[-y1 + y2] + -(y2-y1)*(y1-y0)
 *   t*(x2-x1)^2 + t*(y2-y1)^2 = -(x2-x1)*(x1-x0) - (y2-y1)*(y1-y0)
 *
 *            (x2-x1)*(x1-x0) + (y2-y1)*(y1-y0)
 *   t = -1 * ---------------------------------
 *                 (x2-x1)^2 + (y2-y1)^2
 *
 *   L(t) = pt1 + t*(pt2 - pt1)
 */
var pt0 = target_pt;

var dx2 = pt2.x - pt1.x;
var dy2 = pt2.y - pt1.y;

var dx1 = pt1.x - pt0.x;
var dy1 = pt1.y - pt0.y;

var t = -((dx2*dx1) + (dy2*dy1)) / (dx2*dx2 + dy2*dy2);

/* if clip_flag is true:
 * constrain t to [0,1]
 */
if(clip_flag) {
    if(t < 0.0)
    t = 0.0;
    if(t > 1.0)
    t = 1.0;
}

var xt = pt1.x + t * dx2;
var yt = pt1.y + t * dy2;

return {x: xt, y: yt};
} /*find_perpendicular*/

/* update selection circle
 * for an event at Point pt
 */
fx_view.fx_update_select
= function(p, target_pt_v)
{
/* find point on {x,f(x)} that's closest to
 * mouse location (i.e. to d3.event)
 */
var mid_pt_ix
    = pt.find_closest_ix(p, target_pt_v);

/* establish three neighboring points;
 * ideally around best_px_ix,  but stay within target_pt_v
 */
if(mid_pt_ix - 1 < 0)
    ++mid_pt_ix;
if(mid_pt_ix + 1 >= target_pt_v.length)
    --mid_pt_ix;

var pt0 = target_pt_v[mid_pt_ix - 1];
var pt1 = target_pt_v[mid_pt_ix];
var pt2 = target_pt_v[mid_pt_ix + 1];

/* find best points on line segments [pt0,pt1] and [pt1,pt2] respectively */
var perp_lo_pt = pt.find_perpendicular(d3.event, pt0, pt1, true /*clip_flag*/);
var perp_hi_pt = pt.find_perpendicular(d3.event, pt1, pt2, true /*clip_flag*/);

/* choose nearest of perp_lo_pt and perp_hi_pt */
var perp_pt = pt.find_closest(d3.event, [perp_lo_pt, perp_hi_pt]);

fx_view.fx_select_circle
    .attr("cx", perp_pt.x)
    .attr("cy", perp_pt.y);
} /*fx_update_select*/

This step is identical to the similar step in example #3 At the top of the .org file:

#+html_head: <script type="text/javascript" src="/ext/d3/d3.js"></script>
#+html_head: <script type="text/javascript" src="point.js"></script>
#+html_head: <script type="text/javascript" src="fx.js"></script>
#+html_head: <script type="text/javascript" src="fx_view.js"></script>
#+html_head: <script type="text/javascript" src="parametric-drag-example.js"></script>

This also follows the same model we used in example #3.

#+begin_html
<div id="frame"></div>
<script type="text/javascript">
  window.onload = function() { ex.start(this); }
</script>
#+end_html