Каким будет эквивалентное уравнение Javascript для этого графика?

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

  • diffx/y = расстояние в пикселях от курсора до исходного местоположения ссылки. Это значение становится отрицательным, если курсор перемещается слева или выше исходного местоположения ссылки (уже рассчитано).
  • spacex/y = расстояние, которое я хочу между курсором и ссылкой

  • calcx/y = рассчитанное число будет добавлено к 'style.top' и 'style.left' ссылки

    calcx = diffx - spacex
calcy = diffy - spacey

link.style.top = calcx
link.style.top = calcy

Если я устанавливаю spacex/y = 0, ссылка располагается по центру курсора
Если я устанавливаю spacex/y = diffx/y, ссылка устанавливается в нормальное положение.

Моя цель – сделать ссылку, слегка наклоненную к курсору (максимум 40 пикселей от исходного положения), и
по мере приближения курсора к ссылке ссылка будет медленно возвращаться в исходное положение.
Когда курсор попадает в пределах, скажем, 100 пикселей, ссылка должна (плавно) прыгать к курсору, как бы говоря «выбери меня!»

Вот как это уравнение будет выглядеть в виде графика.

График

Мне нужен способ написать это как уравнение javascript. Я давно не занимался алгеброй, и я почти уверен, что мы не проходили ничего похожего на это. Я предполагаю, что где-то там есть показатель степени и условное выражение, но я не совсем уверен. Если вы сможете понять это, я был бы очень благодарен (не говоря уже о впечатлении).

Спасибо за помощь!


javascript math equations
person webdesserts    schedule 03.05.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Здесь вам определенно понадобится кусочная функция («условная», о которой вы говорили). Средняя часть выглядит как полином нечетной степени вида y = Ax^3 или y = Ax^5 для некоторого небольшого значения A (выбрано так, чтобы y = 150, когда x = 150). Кривая оказывается по существу линейной для |x| >= 200, то есть y = x + B для x >= 200 и y = x - B для x ‹= -200. Переходы между 150 ‹= |x| ‹= 200 кажутся немного сложнее, как сдвинутая экспонента или квадратичная. Но вы можете начать с этого (псевдокод):

if (x < -150) {
    y = x;
} 
else if (x < 150) {
    y = (1.0/22500.0) * pow(x, 3);
}
else {  // x > 150
    y = x;
}

Обратите внимание, что при этом игнорируются переходы между x = 150 и 200 и, соответственно, предполагается, что константы B I, упомянутые выше, равны нулю. Но это может помочь вам начать.

Изменить:

Посмотрев на график моей функции, я думаю, что полином 5-го порядка более точно соответствует вашей желаемой форме. В этом случае средняя функция будет y = (1.0/506250000.0) * pow(x,5). Результаты ниже. Кстати, постоянные значения эквивалентны 150^-2 для кубической и 150^-4 для пятой функции.

График кубической и пятой функций

person Drew Hall    schedule 03.05.2011
comment
Пока ваш работает лучше всех. Да, я позабочусь о том, чтобы этот последний раздел работал, но пока я буду работать с этим. Я дам вам знать, если я могу заставить его работать. Спасибо! - person webdesserts; 03.05.2011

arrow_upward
1
arrow_downward

Я согласен, что, вероятно, проще смоделировать вашу функцию, если вы разделите ее на части:

f(x) = x + 50        if x < -200
       -150          if -200 <= x < -150
       150*(x/150)^k if -150 <= x < 150:
       150           if 150 <= x < 200
       x - 50        if 200 <= x

for k some big odd number (I'd try 4-10 out...)
person hugomg    schedule 03.05.2011

arrow_upward
0
arrow_downward

Вы можете использовать один из них или их комбинацию: http://drawlogic.com/2007/09/14/tweener-robert-penner-easing-equation-cheat-sheets/

Или http://www.robertpenner.com/easing/easing_demo.html

person c-smile    schedule 03.05.2011