Как сделать змейку реагирующую на мышь js?

Question

[deniskins23]

Доброго времени суток. Задался вопросом, как реализовать змейку, которая реагирует на наведение мыши и изгибается при этом. Увидел на сайте https://www.sibirix.ru/service/ слева и озадачило. Пробовал, вроде получается, но она не изгибается плавно. Вот пример, хотя тут он почему-то работает не совсем корректно, хотя на моей машине этот же код ведет себя вполне адекватно. https://jsfiddle.net/oj1up4v6/
Кто может подсказать как реализовать подобное?

Comments

[Павел Корнилов]

Не понял, где змейка?

[deniskins23]

Павел Корнилов, слева навигация, если на нее навести, то она извивается как змея.

[Mertico]

Мне кажется стоит сделать расчет по sin/cos где аргументом будет положение по Y мыши, как начало координат. И положение других элементов рассчитывать уже относительно их положение по Y от начала координат
Тогда при перемещении мыши будет плавное изменение

[deniskins23]

Mertico, а кодом можешь пояснить?не до конца понял мысль

[Interface]

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

[Павел Корнилов]

А я так и не вижу. Смотрю в последней Мозилле =)
Мышь на бургер наводил - просто смена бэкграунда идет.

[deniskins23]

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

[Interface]

Павел Корнилов, нужно большое разрешение, попробуйте уменьшить масштаб

[Сергей delphinpro]

Павел Корнилов,

spoiler

[Interface]

deniskins23,

При таком подходе нужно тогда и видео убирать с сайтов и сложные анимации. И паралакс и еще много всего..

- вы не поверите :D

Поймите меня правильно, я высказываю свое мнение как пользователь сайта и мне кажется это неудобным. Как и видео на фоне, да :) . Но я могу быть не прав, я могу считать не так как большинство. Я призываю вас дважды подумать, собрать еще мнения, если есть возможность провести А/Б тестирование. В любом случае вам решать делать так или нет, я хочу всего-лишь так сказать предупредить.

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

Так, например, можно не двигать кнопки при движении курсора, а двигать только линию. Возможно нужно рисовать 2 линии. Рисовать ее на SVG например, а не используя тысячи span'ов и т. д.

[Павел Корнилов]

Сергей delphinpro, да я уже суть понял по примеру от Mertico

[deniskins23]

Сергей delphinpro, Да, это именно то, о чем я говорю..Есть мысли как это реализовать?Вы мне уже вроде как-то помогали с каким-то вопросом..И весьма профессионально.

[deniskins23]

Interface, это не мое желание, а пока еще мысль дизайнера и заказчика, но я решил сразу попробовать это реализовать, тем более это весьма интересный и необычный момент..
А в конечном счете все решает тот, для кого сайт делается и дизайнер. С этим не поспоришь. Но спасибо за ваше мнение.

Answer 1

[RAX7]

Comments

[deniskins23]

Это крутое решение. Мне нравится. Вот только змейка ведет себя как пьяная..-)она магнитит к курсору очень уж резко и круто..но в целом да, спасибо за вариант!

[RAX7]

deniskins23, чтобы не магнитилась замени

let maxX = mouseX - waveRect.left - waveRect.width/2;

на фиксированное значение, это максимальное отклонение по оси Х
let maxX = 50;

[deniskins23]

А еще, если я уменьшая ширину блока общего, то у меня змейка не приближается ко мне, а наоборот, убегает от меня.

[deniskins23]

А нет, вот теперь нормально. Глюк какой-то был. Спасибо большое!Это самое близкое решение.Хотя все остальные ответившие тоже значительно помогли..Хотелось бы именно понять, это и дали ответы. Всем спасибо.

Answer 2

[Сергей delphinpro]

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

Comments

[deniskins23]

Весьма информативно!Спасибо за развернутый ответ. Буду размышлять надо ним и пробовать правильно реализовать. Главное ведь алгоритм решения и он в ответе дан.+1 к ауре.

Answer 3

[Mertico]

@deniskins23
Упрощено так сделал
https://jsfiddle.net/y14twfek/

Comments

[deniskins23]

Действительно упрощенно..-)Чтобы попасть в флаг подсказки нужно постараться...-)и это скорее на пьяную змейку на сковородке похоже, но тем не менее, это решение!Спасибо..Попробую посмотреть этот вариант и поковырять его...

[Павел Корнилов]

+1
Только, если уж JQ юзать, то лучше тогда её плюшки и использовать.

[deniskins23]

Павел Корнилов, а вот по идее хотелось бы отказаться от него..-)сейчас советуют переходить на нативный..

[Павел Корнилов]

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

[deniskins23]

Павел Корнилов, И то верно..-)