Кривые Безье только своими руками

#svg

Увидел в Youtube видео, где очевидно опытный svg специалист рисует всё руками так
как любой векторный редактор генерирует кучу лишнего кода : https://www.youtube.com/watch?v=_y2YZux5wZI

Так вот: я не совсем понял, как и откуда он брал эти координаты кривой. 

Вопрос в том, каким образом руками, без специального программного обеспечения получать
координаты кривых?

К примеру :








Тут есть координаты :

                 m 154 187 

                 c -197 -86 

                -363  -135 

                -371 0z


как их получить в ручную ... ? как произвести расчёт ..естественно для минимизации
SVG разметки точек и прочего 

Я умею пользоваться corel illustrator, inkscape, но интересует именно как, делать
кривые руками.  

В codepen я сделал некую демонстрацию : https://codepen.io/topicstarter/pen/oOYywb

где есть path и точно по координатом яя расположил circle и самое интересное что
совпали всего две точки это начало и конец пути но остальные точки нет 


    

Ответы

Ответ 1

Кубическая кривая Безье задаётся параметрическим уравнением с использованием контрольных
точек.

P(t) = P0 * (1-t)^3 + 3 * P1 * t * (1-t)^2 + 3 * P2 * t^2 * (1-t) + P3 * t^3


P0 и P3 - начальная и конечная точки, P1 и P2 - контрольные точки, которые в общем
случае не лежат на кривой, они задают направление кривой из конечных точек.

По этому уравнению можно рассчитать точки кривой (отдельно X и Y координаты) с нужным
шагом по t - например, с шагом 0.01 в диапазоне t = 0..1 и соединить их отрезками.

На практике чаще применяется рекурсивный метод деления (Bezier subdivision) с использованием
алгоритма де Кастельжо - находится средняя точка кривой

P(1/2) = 1/8* (P0 + 3P1 + 3P2 + P3)


и оценивается, насколько она удалена от отрезка, соединяющего начальную и конечную
точку. Если близко - можно просто нарисовать отрезок прямой, если далеко - кривая делится
на две кривых, для каждой процедура повторяется. Это позволяет строить меньше отрезков
на плавных участках и больше на участках с большой кривизной для более точного воспроизведения
формы, т.е. метод адаптивен.

Ещё большей адаптивности (вернее, более точной оценки необходимости дальнейшего разбиения)
можно достичь, например, с помощью адаптивного разбиения Максима Шеманарева (есть код на C)


Ответ 2

Так вот: я не совсем понял как и откуда он брал эти координаты кривой  


Судя по наличию в формуле патча  d="m 154 187 c -197 -86 -363  -135 -371 0z" команды
 "С" это Кубическая кривая Безье      

  

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

Вот ваша кривая  

   

Чем удобен такой генератор по сравнению с векторными редакторами? 


Код чистый, который можно без изменений копировать. 
Двигая контрольные точки виден сам процесс изменения кривой 
Скопировав несколько положений кривой можно делать различные анимации
с атрибутом "d"   


Пример анимации