Javascript: движение картинки за курсором по-современному. Скрипт движение за курсором. Слежение за курсором Глаз следящий за курсором javascript

16.05.2020

Перевод

Автор статьи, перевод которой мы публикуем, предлагает поговорить о решении задач из сферы компьютерного зрения исключительно средствами веб-браузера. Решить подобную задачу не так уж и трудно благодаря JavaScript-библиотеке TensorFlow . Вместо того, чтобы обучать собственную модель и предлагать её пользователям в составе готового продукта, мы дадим им возможность самостоятельно собрать данные и обучить модель прямо в браузере, на собственном компьютере. При таком подходе серверная обработка данных совершенно не нужна.

Испытать то, созданию чего посвящён этот материал, можно . Вам для этого понадобится современный браузер, веб-камера и мышь. Вот исходный код проекта. Он не рассчитан на работу на мобильных устройствах, автор материала говорит, что у него не было времени на соответствующие доработки. Кроме того, он отмечает, что рассматриваемая тут задача усложнится в том случае, если придётся обрабатывать видеопоток с движущейся камеры.

Идея

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

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

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

Входные данные с веб-камеры, распознавание лица, обнаружение глаз, обрезанное изображение

Для обнаружения лица на изображении я воспользовался библиотекой, которая называется clmtrackr . Она не идеальна, но отличается маленькими размерами, хорошей производительностью, и, в целом, достойно справляется со своей задачей.

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

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

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

Подготовка

Для начала загрузим clmtrackr.js из соответствующего репозитория . Работу начнём с пустого HTML-файла, в котором импортируются jQuery, TensorFlow.js, clmtrackr.js и файл main.js с нашим кодом, над которым мы будем работать немного позже:

Получение видеопотока с веб-камеры

Для того чтобы активировать веб-камеру и вывести видеопоток на страницу нам понадобится получить разрешение пользователя. Здесь я не привожу код, решающий проблемы совместимости проекта с различными браузерами. Мы будем исходить из предположения, в соответствии с которым наши пользователи работают в интернете с применением последней версии Google Chrome.

Добавим в HTML-файл следующий код. Он должен располагаться в пределах тега , но выше тегов

Рисуем круг

Первое, что мы собираемся сделать, это нарисовать круг. Внутри тега

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

Второе - это область слежения за курсором. В данном скрипте в 7 строке указан - html . То есть по сути вся страница. Иногда используется body . Но если страница не полная и подвал не прижат к низу страницы, бывает что body лишь на пол страницы и выходя за его пределы, скрипт перестанет работать, так что лучше - html. Так же можно задать конкретный блок, внутри которого будет слежение за курсором, в то время, как на остальной странице это не будет происходить. В таком случаи вместо html нужно указать айди блок, например #block_name. Поместить HTML код из этой статьи внутрь блока с айди - #block_name и все.

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

На этом все, спасибо за внимание. 🙂

Но на базе древнего кода, так что работать толком не будет ни в новых IE 10-11, ни в новой линейке Firefox, а может, и в других браузерах, других под рукой нет.

Старый заслуженный код корёжить не хочется, сделаем движение картинки за курсором мыши по-современному и простому. Для скорости разработки реализуем только движение изображения за курсором, ведь при необходимости можно в функции getClickPosition определить более сложные правила для установки требуемых координат картинки (picture.style.left и picture.style.top), например, как-то зависящие от расстояния между рисунком и курсором мыши, как в том коде с круговым движением.

Задачу решим за 3 простых шага.

1. Поставим картинку, которая будет бегать за курсором поверх остального контента. Правда, она будет при этом занимать место в макете сайта. Зато стиль задаст заодно поведение картинки, чтобы она начинала двигаться через нужное время и не делала это слишком интенсивно:

Много контента, чтоб у BODY была высота, где разбегаться
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

2. Поставим в теге яваскрипта обработчик события, связанного с движением курсора мыши:

В статье представлены лучшие элементы пользовательского веб-интерфейса (UI) и анимации, которые были размещены на сайте CodePen. Все проекты были созданы с помощью CSS и JavaScript.

Разработанная Юлианом Гарнье (Julian Garnier) анимированная модель представляет восемь планет, вращающихся вокруг Солнца в 3D (Boffins недавно решил, что официально Плутон больше не является планетой). На создание этого демо автора вдохновили проекты Алекса Гирона (Alex Giron) и Николаса Гэлледжера (Nicolas Gallager).

Whale

Оно выглядит, как и любое другое меню, пока вы не прокрутите его и увидите, что оно сделано из желе! Пункты меню изгибаются при движении и с протяжным звуком возвращаются на место в неподвижное состояние.

Draggable overflow

Draggable overflow позволяет аккуратно оформить веб-страницу без необходимости идти на компромисс по содержанию. Текст исчезает, когда попадает за полосы, и его можно прокручивать с помощью перетаскивания.

Fluid grid using text align: justify

Squishy buttons

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

Pure CSS peeling sticky

Эта CSS липучка вызывает приятное псевдоосязательное ощущение и представлена в виде метки, которую легко снять, раскрывая спрятанное под ней.

Color Smoke

Анимация цветных частиц, следующих за курсором мыши.

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