Привет) Сегодня мы поговорим на такую интересную тему, как DepthJS. Слышали про новую штуку от Microsoft - Kinect? Ну так вот, MS решили не таиться и открыть Kinect для разработки (первоначально он был закрыт) - раз уж его всё равно взломали. И на его основе сделали DepthJS. Но для начала поясню, что такое Kinect. Это специальная штука, которая как-то отслеживает-ориентируется в 3D-пространстве, и ты можешь играть в специальные игры без всяких джойстиков и прочего, только своими руками, жестами. А DepthJS - это плагин под Safari и Chrome (в будущем обещают поддержку остальных браузеров). И страница может также использовать Kinect - если у юзера подключен этот плагин. На текущий момент он находится в глубокой alpha. То есть, даже не бета.
А как с платформами?
"Right now we only support Macs" - написано в DepthJS. То есть, пока правильно работает только на яблочных продуктах. Под линукс, как я понял, ничего нет. С виндой тоже дела не очень. "Outside code is always welcome" - написано в DepthJS. Им не хватает кодеров). Зато сразу понятно, что проект опенсорсный - если они говорят, что всегда приветствуют код со стороны. Хотя там же плагин! Под хром, я знаю, пишется на html - так что по любому открытый. Если посмотреть в исходные коды, сразу видно, что сырой: везде стоят console.log.
Итак, поехали!
Впрочем, что время тянуть? Зачем рассказывать? Наверняка не терпится увидеть кол код в действии? Как всё это работает? Сами авторы предлагают небольшой скрипт (depth.js), который значительно упростит работу с DepthJS (требует наличия jQuery!). Для получения скрипта скачиваем весь DepthJS (чуть ниже).
Подключаем его к странице, затем создаём глобальную переменную DepthJS и запихиваем в неё объект с кучей обработчиков событий DepthJS. События следующие:
onKinectInit - срабатывает при инициализации Kinect. То есть, Kinect найден и готов к использованию.
onRegister - Kinect нашёл ваши руки и ловит все их движения ;).
onUnregister - Kinect потерял ваши руки. Придётся вам без рук ходить).
onMove - когда вы перемещаете руки. Аналог onMouseMove :). Интересно, а если руки дрожат - он реагирует?
onSwipeLeft - двигаем рукой влево.
onSwipeRight - вправо.
onSwipeDown - вниз.
onSwipeUp - делаем сложное кругообразное движение, пытаясь передать в нём код своей страницы и всё своё негодование - по поводу того, что DepthJS не понимает этого движения. Шучу.
onPush - мы что-то куда-то вставляем. Не понял...
onPull - мы что-то куда-то выставляем?
Скажите мне ваши координаты
Вопрос: как бы получить координаты рук при каком-либо событии? Очень просто. Как я уже говорил, мы суём в глобальный объект DepthJS обработчики событий. То есть, функции. А они принимают параметры. Вот какие функции какие параметры принимают:
onRegister(x, y, z, data) - X, Y, Z - это координаты рук по осям X, Y, и Z соответственно. Data - это какие-то данные...
onMove(x, y, z) - то же самое: X, Y, Z - координаты.
Example
Как-то без примера непонятно и скучно. Вот пример:
Code
<script src="depth.js"></script> <script> DepthJS={ // использовать var нет смысла, мы переопределяем переменную DepthJS, объявленную в файле depth.js onKinectInit:function(){ console.log('Kinect инициализирован.'); }, onRegister:function(x, y, z, data){ console.log('Обнаружил руки. Координаты - X: '+x+', Y: '+y+', Z: '+z+'. Переданные данные: '+data+'.'); }, onUnregister:function(){ console.log('Потерял руки. Будешь без рук ходить.'); }, onMove:function(x, y, z){ console.log('Зафиксировано движение рук. Координаты - X: '+x+', Y: '+y+', Z: '+z+'.'); // а здесь я балуюсь: if(Math.random()*5==3)console.log('Слушай, а у тебя руки не трясутся?'); }, onSwipeLeft:function(){ console.log('Движение влево.'); }, onSwipeRight:function(){ console.log('Движение вправо'); }, onSwipeUp:function(){ console.log('Движение вверх'); }, onSwipeDown:function(){ console.log('Движение вниз'); }, onPush:function(){ console.log('Push'); }, onPull:function(){ console.log('Pull'); } }; </script>
Можно ещё для баловства сделать переменную Timer, каждую секунду её увеличивать на 1, при любом событии обнулять; а если она достигнет 10, выводить текст:"Ты что, заснул что ли?". А когда пользователь докажет, что он не заснул, она обнулится и опять через 10 сек. бездействия спросит...
И всё?! А что там внутри?
Давайте заодно посмотрим, а что же там внутри? Исходные коды Kinect или плагинов разбирать не будем - лучше давайте посмотрим на библиотеку depth.js. Как она работает, что там внутри?
Code
/* DepthJS Copyright (C) 2010 Aaron Zinman, Doug Fritz, Roy Shilkrot, Greg Elliott This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>. */ /** * Include this file in your HTML pages to access the Kinect via DepthJS plugins. * If the user has the DepthJS plugin installed in their browser, then your webpage will be * able to get high-level events through this simple API. * * Just override the definition of the event handlers in the global DepthJS object with your own * functions. * * See BasicDemo.html or our "interesting" CatBucket game. * * NOTE: depth.js requires jQuery. You can use it in noConflict mode. */ // Override window.DepthJS window.DepthJS = { onKinectInit: function() {}, onRegister: function(x, y, z, data) {}, onUnregister: function() {}, onMove: function(x, y, z) {}, onSwipeLeft: function() {}, onSwipeRight: function() {}, onSwipeDown: function() {}, onSwipeUp: function() {}, onPush: function() {}, onPull: function() {} }; // Requires jQuery (function($){ $(function() { var $domPort = $("<div id='DepthJS_eventPort' style='display:none'></div>"); $domPort.appendTo("body"); $domPort.bind("DepthJSEvent", function() { var json = $domPort.text(); var eventObj = JSON.parse(json); var type = eventObj.type; if (type == null) { console.log("DepthJS: No type found in event; ignoring"); return; } if (DepthJS["on" + type] == null) { console.log("DepthJS: Could not find handler for event type " + type + "; ignoring"); return; } var data = eventObj.data; if (type == "Register") DepthJS.onRegister(data.x, data.y, data.z, data.data); else if (type == "Move") DepthJS.onMove(data.x, data.y, data.z); else DepthJS["on" + type](data.data); }); }); // wait until body is ready })(jQuery); // no conflict
Да, это содержимое depth.js. Небольшая оказывается библиотека! Видим, она требует jQuery. Работает так: создаёт пустой элемент ("<div id='DepthJS_eventPort' style='display:none'></div>"), прикрепляет к нему событие DepthJSEvent. Когда событие появлется - хапаем текст внутри элемента, парсим его через JSON, получаем объект. У объекта два свойства. Первое - type, это имя события. Второе - data, это данные события (да, это они функциям передаются!). Дальше комментировать код не буду. Думайте сами :). А на основе onMove можно построить пару других событий: например, движение по диагонали.
Чуть не забыл. Качаем плагин вместе с примерами и документацией:
Вот так вот интересно...
Вот так вот это, оказывается, интересно... А я ведь раньше особого внимания подобным плагинам не уделял. Да, кстати это первая статья про DepthJS в Рунете. Больше нигде пока нету. Есть заметки про появление DepthJS, про Kinect - но про практическое применение DepthJS - я первый. И даже не только в Рунете, но и во всём Интернете. DepthJS недавно появился.
