Как с помощью синуса построить траекторию полёта птицы?

#javascript #математика #анимация

График траектории должен принимать разную амплитуду.

Это схематический полёт птицы в игре. Птица летит слева направо, график её полёта
просто похож на синус, но нужно как-то менять амплитуду и длину волны:

birds.y = Math.sin(birds.x)+200;


Если так, то она дёргается вверх и вниз на 1, соответственно =) 200 это отступ сверху.

birds.y = 4 * Math.sin(birds.x)+200;


Амплитуда увеличивается на 4, но длина остаётся под вопросом:

birds.y = 100*Math.sin(birds.x/100)+200;


Так получаю более ли менее полёт, но он однообразен.

Так, думаю, будет ещё понятней:


Вот, собственно, ещё для наглядности, под мониторы не подстраивал, но птицу видно =)

На сайте

Может, её к курсу валют прикрутить? =))
    

Ответы

Ответ 1

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

y(x) = 130 + 12 * sin(x / 4) + 47 * sin(x / 3) + 52 * sin(x / 2) + 3 * sin(x * 3)


и получил вот такую кривую:



А вот пример зависимости, которая (наверное) больше подходит к вашей задаче:

y(x) = 130 + 12 * sin(x / 12.5) + 27 * sin(x / 9.5) + 32 * sin(x / 6.25) + 3 * sin(x)




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


Ответ 2

Не обязательно использовать тригонометрию. Плавную кривую можно получать, если рисующий
«карандаш» следует хвостом за точкой-целью – кривая погони. В каждый кадр карандаш
K получает изменение координат как долю вектора из своего положения до точки-цели G,
с коэффициентом замедления/плавности k < 1:

Kx += (Gx - Kx) / k;
Ky += (Gy - Ky) / k;


Попробовать, как это работает – там за мышкой следуют 3 точки, одна за другой – последняя
рисует. Экспериментировал в поиске эстетически приятных кривых.

Такой метод, по-моему, даже больше подойдёт для вашей задачи – можно обходить горы
и спускаться в долины – задавать особенности рельефа малым кол-вом контрольных точек
(и случайно отклонять каждую в небольших диапазонах), где должна побывать «цель» по
ходу анимации.

Точку-цель перемещать по одному разу для каждого «горба» кривой. Т.е. она должна
чередовать верхнюю/нижнюю половину, и чуть случайно отклоняться от строгой «пилы» для
разнообразия. В том моём примере сначала отогнать карандаш влево на середину, и затем
скачками перемещать «цель». У меня получилось так:


Ответ 3

Я бы предложил после каждого перехода Y через ноль менять амплитуду случайно, то
есть вместо 100 ставить 90 или 110.