HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
03 Июнь 2011 в 12:00:47
11:47:21
DepthJS - Kinect на JavaScript

DepthJS

Привет) Сегодня мы поговорим на такую интересную тему, как 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 недавно появился.

Просмотров: 1126 | | Теги: пространство, Kinect, руками, жесты, DepthJS, управление, 3d
Всего комментариев: 0
Имя *:
Email:
Код *: