Finding highest point in a a curve generated following two rect lines

Question

I'm using JSXGraph to graph two rect lines, in the intersection I need to create a curve following the two lines and connecting the point B with the point C, then I need to find the highest point of that curve. There are any approach that I could use?

Answer 1

As noted in the comment, the problem as stated has not a unique solution. One possibility would be to choose one of the many spline curves. I would propose a very simple approach using highschool mathematics: Take a polynomial f of degree three which runs through the points B and C and whose derivative at B is equal to the slope of the line AB and whose derivative at C is equal to the slope of the line CD.

To make things easier, we assume that the x-coordinate of B is 0, and the x-coordinate of C is 1. Further, we denote the slope of the line AB with s1 and the slope of line CD with s2. For the general solution we will have to multiply s1 and s2 later on by C_x - B_x.

Now, we have to compute the parameters a,b,c,d of the polynomial

f(x) = ax^3 + bx^2 + cx + d.

This can be done by noting that

• f(0) = B_y
• (f(1) = a + b + c + d
• f'(0) = c = s_1
• f'(1) = 3a + 2b + c = s_1,

see the function f in the code below. When we know the polynomial f, the maximum of f can be determined easily by computing a root of the derivative

f'(x) = 3ax^2 + 2bx + c

Here is the code:

var A, B, C, D, l1, l2, f, g, maximum, curve, E;

A = board.create('point', [-4,-2]);
B = board.create('point', [-2,2]);
C = board.create('point', [1, 2]);
D = board.create('point', [3, 0]);

l1 = board.create('line', [A, B]);
l2 = board.create('line', [C, D]);

f = function(x) {
  var dx = C.X() - B.X(),
    s1 = l1.getSlope() * dx,
    s2 = l2.getSlope() * dx,
    a, b, c, d;

  d = B.Y();
  c = s1;
  a = s2 - s1 - 2 * (C.Y() - c - d);
  b = C.Y() - c - d - a;
  return a * x * x * x + b * x * x + c * x + d;
};

g = function(x) {
  return f((x - B.X()) / (C.X() - B.X()));
};

maximum = function() {
  var dx = C.X() - B.X(),
    s1 = l1.getSlope() * dx,
    s2 = l2.getSlope() * dx,
    a, b, c, d, x1, x2, x, dis;
  d = B.Y();
  c = s1;
  a = s2 - s1 - 2 * (C.Y() - c - d);
  b = C.Y() - c - d - a;

  dis = 4 * b * b - 12 * a * c;
  x1 = (-2 * b + Math.sqrt(dis)) / (6 * a);
  x2 = (-2 * b - Math.sqrt(dis)) / (6 * a);
  if (6 * a * x1 + 2 * b < 0) {
    x = x1;
  } else {
    x = x2;
  }
  x = x * (C.X() -  B.X()) + B.X();
  return [x, g(x)];
};

curve = board.create('functiongraph', [g], {strokeCOlor: 'red', strokeWidth: 3});
E = board.create('point', [maximum]);

See it live at https://jsfiddle.net/bv5mgy7k/8/