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

Question

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

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

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

К примеру :

<svg width="400px" height="300px" preserveAspectRatio="none">
  <defs>
    <style>
      #path1{fill:none; stroke:red; stroke-width:2px;}
    </style>
  </defs>
  <g style="transform:translate(220px,-50px)" preserveAspectRatio="none">
    <path id="path1" fill="none" stroke="red"
        d="m 154 187 c -197 -86 -363  -135 -371 0z" />
  </g>
</svg>

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

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

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

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

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

Что значит получать координаты кривых? Построить их с помощью отрезков прямых? — MBo, Apr 09 '19 at 00:49
@MBo да ! не программно ...т.е не corel не люстра не инкскапе а именно в ручную ..как их рисовать ...той формы который надо — Резидент Казахстана, Apr 09 '19 at 01:00
но остальные точки нет см. абзац после формулы — MBo, Apr 09 '19 at 01:43
@MaximLensky визуально достаточно легко представить местонахождение этих точек, если один раз увидеть нечто такое http://bl.ocks.org/joyrexus/5715642 — Stranger in the Q, Apr 09 '19 at 04:57
@StrangerintheQ оо спасибо за полезную ссылку — Резидент Казахстана, Apr 09 '19 at 05:03
@MaximLensky не за что, если соединить контрольные точки между собой, видно ребра многоугольника, к которому линия стремится, если всегда видеть эти ребра, то легче визуально понять как проходит сама кривая — Stranger in the Q, Apr 09 '19 at 05:08

MBo · Accepted Answer · 2019-04-09T01:42:22.573

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

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)

Alexandr_TT · Answer 2 · 2019-04-09T11:51:03.670

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

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

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

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

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

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
 width="400" height="400" viewBox="0 0 400 400" &gt;  

<path fill="dodgerblue" stroke="gold" stroke-width="3" d="M70,111 C73,23 241,33 352,111 " >
    <animate
   attributeName="d"
   dur="3s"
   values="M70,111 C73,23 241,33 352,111;
           M70,111 C190,58 349,39 352,111;
     M70,111 C73,23 241,33 352,111"
   repeatCount="indefinite">
</animate>

  </path>

</svg>

странно что то ...мне уведомление об ответе не пришло, поставил + — Резидент Казахстана, Apr 09 '19 at 23:06

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

2 Answers2

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