Как нарисовать «симпатичные» кривые Безье динамически?

Question

Я сделал небольшую скрипку: https://jsfiddle.net/ahvonenj/yp0o728h/

Вы можете нажать левой кнопкой мыши вниз, чтобы переместить красный круг и кривая Безье обращается между двумя точками обновляется, но не так, как я хотел бы, чтобы работать.

Я хотел бы рассчитать контрольные точки динамически, так что кривая выглядит примерно так:

Случай A:

Случай B:

Случай C:

Итак, в основном я хочу, чтобы кривая всегда делала небольшую «симпатичную» кривую от точки А до точки В, независимо от того, как точки расположены. Рисование прямой линии выглядит не очень красиво, поэтому я хотел бы использовать кривую Безье, чтобы линия слегка изогнулась.

Проблема заключается в вычислении позиций контрольных точек. Как это достигается, и есть ли простой способ сделать это, поскольку я видел много приложений, которые, по-видимому, используют динамические кривые безье повсюду.

Поскольку код необходим для сопровождения jsfiddle-ссылки, вот линия, которая в настоящее время рисует кривой Безье со статическими контрольными точками:

ctx.bezierCurveTo(20, 100, 200, 100, c2.x, c2.y); 

Я надеюсь, что я не должен делать массовые расчеты прийти с позициями контрольной точки.

Answer 1

Не массовые расчеты: https://jsfiddle.net/khrismuc/6fjhLkbv/

var dx = c2.x - c1.x; 
var dy = c2.y - c1.y; 

ctx.beginPath(); 
ctx.moveTo(c1.x, c1.y); 
ctx.bezierCurveTo(c1.x + dx * 0.33, c1.y, c1.x + dx * 0.67, c2.y, c2.x, c2.y); 
ctx.stroke(); 

Если вы хотите, чтобы они были наклонены таким образом, вычисление контрольных точек является немного более сложным.