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

  • Перевод

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


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

Идея

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

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

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


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

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

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


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

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

Подготовка

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

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

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

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

Рисуем круг

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

В этой статье будет показана первая анимация, а в следующей расскажу уже о второй. Там будет указатель в виде компаса. Взял я скрипт, немножко его подправил и изменил принцип вывода изображения. Так же вместо кота смотрящего в бинокль, я добавил известного котика - Саймона из мультфильма Simon"s Cat . Как и в исходнике предлагаю использовать данный скрипт на страницах типа 404. Конечно же все зависит от Вашей фантазии. Можете приспособить его для каких нибудь других целей. То что выйдет после установки себе на сайт данного материала, можете посмотреть ниже в примере, а также скачать исходники.

Понравилось? Если да, то приступим к описанию, как это работает и как добавить на свой сайт.

В первую очередь, давайте добавим HTML разметку нашей анимации.

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

Следующим этапом будет добавление стилей, для корректного отображения будущей анимации.

#cat{ position: relative; width: 100%; } #cat:before{ content:""; width: 587px; background: url(nofound.png) center top no-repeat; height:410px; position: absolute; left:50%; margin-left:-293px; } .cat-eye{ position: absolute; display: none; width: 60px; height: 61px; } .cat-eyeball{ position: absolute; left: 22.5px; top: 24.5px; width: 16px; height: 16px; background: url(eyes.png); } #cat-eye-left { top: 82px; left: 50%; margin-left:-75px; } #cat-eye-right { top: 82px; left: 50%; margin-left:-5px; }

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

Важно обратить внимание, что фон с котом задается псевдоэлементу :before для блока #cat. Следует, так же правильно указать путь к изображению. Чтобы получить все изображения - скачайте исходники по ссылке выше. Теперь по глазам и зрачкам.

  • #cat - Основной блок, область, где будет картинка и анимация глаз.
  • #cat:before - Псевдоэлемент для добавления общего фона. В данном случаи кот Саймон. Можете добавить другую картинку, но тогда следует правильно разместить область глаз на ней.
  • .cat-eye - Это общий класс для двух глаз (не картинка, а именно область для зрачков). Задается размер по которому будет бегать зрачок. В данной ситуации -60x61px
  • .cat-eyeball - Уже сами зрачки. Задаем положение относительно глаз, размер и самое главное указываем путь к картинке - eyes.png . Если картинки не лежат в той же папке что и стили, то укажите правильный путь.
  • #cat-eye-left и #cat-eye-right - ID для левого и правого глаза. Расположение зон для движения зрачков. Если поменяете основную картинку, то в этих параметрах нужно будет менять расположение относительно родительского блока - #cat

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

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

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

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

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

Статьи по теме: