@Joker555

Объясните мне пожалуйста. Я не могу понять как превратить эти значения:

// Pn = x, y
P0 = [0, 0],
P1 = [0.32, 0.64],
P2 = [0.45, 1],
P3 = [1, 1]

В одно число:

P0 = 0;
P1 = ???;
P2 = ???;
P3 = 1;


Что бы это расчитало текущую точку:

var P = Math.pow(1-t, 3)*P0 + 3*t*Math.pow(1-t, 2)*P1 + 3*Math.pow(t, 2)*(1-t)*P2 + Math.pow(t, 3)*P3;


Единственное, что я понял, мне необходимо для каждой точки сделать это:

1. Посчитать вес опорной точки;
2. Умножить вес на координату этой опорной точки;

1. - я нашел базисную функцию, которая это делает. Хз как она работает, как я понял это не нужно знать.
2. - на какую координату умножить вес? У меня кордината же это x,y . Помогите разобраться в этой путанице.

0

@Excalibur921

b(t)=(1-t)P0+tP1
Значит:
x(t)=(1-t)*x0+t*x1
y(t)=(1-t)*y0+t*y1

z(t)=(1-t)*z0+t*z1

1

@Joker555

Объясните пожалуйста, что это означает по порядку? Я не могу вдуплить, что мне с этим делать

0

@Excalibur921

Самое простое:
В цикле For заполнить массив координат ломанной подставляя t от 0 до 1 c шагом 0.1 в эти формулы.
x(t)=(1-t)*x0+t*x1
y(t)=(1-t)*y0+t*y1

Наверно следующий вопрос будет а как их просто собрать?
Кривые Безье
А следующий и что с ними можно простое?
Повторить параметрическую кривую

Или брать хитрый t.
http://rsdn.org/article/multimedia/Bezier.xml

0

@Joker555

почему x0 и x1? Это как? Блин..(( я ничего не пойму( Можете скинуть функцию вами написанную для расчета точки по координатам?

0

@Excalibur921

P0 = [0, 0],
P1 = [0.32, 0.64],

P0 = [x0, y0],
P1 = [x1, y1]…

0

@Joker555

короче я разобрался как найти точки X и Y по отдельности. Но не понимаю как их соединить в одну... В статье, которую вы дали не понятно, а ссылка битая в посте

Добавлено через 1 час 54 минуты
Excalibur921, не знаю, может вы не увидели ответ. Буду ждать его от вас)

0

@Excalibur921

Ненужно ничего соединять. В цикле находите координаты ломанной и все.
Погуглить инфы море по Безье. Все ссылки работают.

1

@Joker555

хорошо, тогда объясните мне следующее. Как вычисляет безье CSS? P1 и P4 точки там уже заданы, они всегда равны

P1 = 0, 0
P4 = 1, 1

Доступны для регулирования только P2 и P3.

Соответетственно cubic-bezier(0.32, 0.64, 0.45, 1):

P2 = 0.32, 0.64
P3 = 0.45, 1

И что он берет при вычислении? Например у меня ширина 0 до 100% меняется в CSS. Вот что он берет за основу при расчете ширины с помощью безье в течении заданного времени. Ибо у меня анимация разница, с использованием Y и X (не важно). Т.е. по итогу я получаю X и Y на текущем шаге времени, я пробовал это:

x*100
y*100

ни один из результатов не совпадает с CSS. Они похожи, но все равно разняться.

0

@Excalibur921

Наверно в вашем случае кривая используется как настраиваемая по форме функция.
Гляньте формулы “ Виды кривых Безье” https://ru.wikipedia.org/wiki/Кривая_Безье
Несколько формул для t. Нужно найти t при известной X координате на кривой подставив x0,y0… и X значение в искомой точке кривой в те формулы при определенных условиях. Там написаны они. Или найти t подставив y0,y1.. и Y значение в искомой точке кривой.

Итого: у вас есть 4 точки определяющие форму кривой, подставляете в формулы для поиска t например X координату точки на кривой получите какой t нужно было брать.
Зная t подставляем в формулу y(t) получаем Y.

0

@Joker555

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

Добавлено через 37 минут
Короче как я понял мне нужно найти производную, но как не пойму пока...

0

@Excalibur921

Никакие производные не нужны. Все формулы есть. Подставить и сделать.

0

@Joker555

я все равно так и не понял) короче я нашел готовую библиотеку на JS))) Но все равно интересно было бы узнать как же сделать ее самому, ведь осталось чуть)

0