TOMAS REIMERS: Cool. Así hola, todo el mundo. Tomas de mi nombre. Soy un TF y esto es Armaghan BEHLUM: Armi. Es bueno ver que los chicos. TOMAS REIMERS: Cool. Así que vamos a estar hablando acerca de Leap Motion hoy. Así Leap Motion es un producto genial que le permite interactuar con un ordenador de una manera diferente. Así que la idea detrás de Leap Motion es que usted puede usar las manos para interactuar con el ordenador. Así que aquí tengo algo establecido. Voy a hablar de ello en un poco. Pero la versión básica que es puede ver que tengo mis manos delante de mi equipo y cuando los muevo, se obtiene el análogo en el equipo y usted puede analizar esto. Usted puede hacer gestos. Usted puede utilizar sus manos para interactuar con el ordenador en forma nueva e interesante. 

Bueno, en realidad primero quieren hacer pasar a Armi para mostrarle algunos demos frías de lo algunas personas han hecho con este. Y luego hablaremos de cómo que realmente código con esto. Armaghan BEHLUM: Sí. Hola. Así como hemos visto, poco datos aquí, pero vamos a ver lo que algunas personas han hecho con este. Así que permítanme simplemente abro este ejemplo. Y entonces, por lo que, por ejemplo, se puede ver mi analógica mano allí, pero ahora este tiempo algunas personas que utilizan la Unidad tienen decidido a poner un poco más de piel y esas cosas alrededor de la mano. Así que puedo, vamos a ir con éste, Seguro, tienen mis manos interactuar. Y es probable que pueda imaginar un par de otras cosas útiles fresco que se puede hacer con esto. Así que este es al menos un ejemplo. Y luego vamos a saltar fuera de esto. 

Y luego otro fresco Es decir, vamos a ir con éste. Bola plasmo. Una vez más, no lo haríamos necesariamente esperar este nivel de complejidad de un proyecto final para CS50. Esto es sólo para mostrar algunos de los, daros un poco de inspiración para lo ustedes pueden ver con Leap Motion. Así, por ejemplo, aquí hay un fresco ejemplo la física, que allá vamos. Tiene las dos manos por lo que ahora tener esta pequeña bola de plasma. Y la pelota está reaccionando a la física de mí moviendo mi mano alrededor de la pelota. Ahora bien, esto es todo, aunque en Unity, utilizando tipo de herramientas y marcos que no hemos enseñado chicos en clase, pero como usted puede ver algunos bastante de funcionamiento en frío throughs con eso. 

Pero una cosa que ustedes pueden hacer comenzando en este momento con Leap Motion es un trabajo en JavaScript. Leap Motion tiene una API de JavaScript que que ustedes pueden utilizar y muy, muy Recomiendo que ustedes construir sus proyectos usando eso. Así que con eso, me dejó pasar de nuevo fuera de Tomas hablar de Salto Movimiento y JavaScript. TOMAS REIMERS: Cool. ¿O quieres mostrar ellos el Visualizador primero? 

Armaghan BEHLUM: Oh, sí. Sí. Vamos a hablar más sobre eso Visualizer. 

TOMAS REIMERS: Así que en una más básica nivel, cuando usted llega a Leap Motion usted va a tener esta caja. Aquí, quiero que tome el control? 

Armaghan BEHLUM: Sí, ir a por ello. 

TOMAS REIMERS: Hasta Cuando primero llegar a Leap Motion usted va a tener esta caja. Tiene un dispositivo que se ve algo como esto. Se conecta a su ordenador, instalar los controladores necesarios, y entonces básicamente se creará. Así que la manera más fácil para ordenar de acuerdo con Leap Motion se abrirá este programa se instala llamado Leap Motion Visualizer. Y el Visualizer es literalmente lo que estoy mostrando aquí. Se le permite ver el contorno del esqueleto de las manos. Y lo que el Leap Motion ellos se interpretar como. Así que la Leap Motion utiliza la cámara a una especie de mirada a sus manos y luego trata de adivinar lo que el composición del esqueleto básico que ver en la pantalla es. Y eso es lo que se muestra. Armaghan BEHLUM: Cada mucho sentido único y lo que se ve no existe datos que está disponible para ustedes así como de usar. Así que ya ves que es captura que Tomas tiene cinco dedos, cada uno de los diferentes dedos También están disponibles para usted como datos puntos para usar en cualquier aplicación que es posible que desee. Si usted quiere ver si alguien está haciendo un pulgar hacia arriba se puede ver si sus dedos se encrespan y si son dedo pulgar está apuntando hacia arriba, o cuando su muñeca o palma es y ese tipo de cosas. TOMAS REIMERS: Cool. Así que usted puede ver algunos gestos que entiende mejor que otros. Recuerde, que está buscando a su la mano de a una cámara desde la parte inferior, así que cuando usted tiene sus manos como esto se las entiende completamente, pero una vez que empiezas a tratar de hacer un pulgares para arriba, a veces lo lee, a veces puede adivinar, pero la verdad la cámara no puede ver el pulgar. Así que no es realmente seguro de lo que está pasando. Sólo algunas limitaciones a tener en cuenta cuando estás desarrollando con esto. 

De todos modos, por lo que volver a este. El visualizador de realidad tiene un montón de herramientas útiles. Así que el Leap Motion es programada de tal manera que no te esperan interactuar con que los datos de imagen. Ellos realmente no espero que lo entiendas lo que está sucediendo detrás de las escenas. Lo que hacen es exponer un manojo de API para usted tal que pueda interactuar con estos datos directamente, sin la comprensión lo que está pasando bajo el capó. 

Así que si golpeamos H aquí en el visualizador verás un montón de opciones. El único importante aquí, sin embargo es si se golpea O y luego pulsa H, verás que permite dibujar gestos. Así que un gesto, verás dibuja una flecha a través. Un gesto es una de las maneras que Salto Movimiento especie de deja que te dan en los datos sin tener que procesarlo. Así que más que me pueda imaginar fuera, oh, la mano se movía, aunque tenga el punto de acceso, el API especie de sólo dime, bueno, hicieron este gesto. Así que usted puede hacer gestos de flecha básicas. Usted puede hacer gestos círculo. Usted puede hacer tocando gestos. Y usted puede hacer gestos de pulsación de teclas. Sí. Y ese tipo de cosas. Así que ahora que hemos especie de visto lo que puede hacer Leap Motion, se puede ver que se puede leer un manojo entero de los gestos. Creo que me voy a pasar de nuevo a Armi y él va a hablar acerca de cómo que podemos encontrar en estos con JavaScript incluso la forma de empezar un proyecto con esto. Y luego vamos a hablar de algunos lugares interesantes que pueden ir con eso. Armaghan BEHLUM: Sí. Suena bien. Así que sí, la primera cosa que va a querer que usted haga, por supuesto, es después de obtener el Leap Motion es ir a leapmotion.com, configurar, instalar los conductores y esas cosas. Después de hacer eso se puede ir asegúrese de que esté conectada. Si usted ve en su bandejita la Leap Motion icono y es verde, entonces usted sabe que está todo listo. Y, por supuesto, echa un vistazo a exactamente lo Tomas sólo le mostró con los gestos y haciendo los toques de pantalla, y grifos clave, y ese tipo de cosas. 

Después de que a pesar de que, una vez más, como he dicho, tenemos acceso a todos ellos cosas en JavaScript también. El ideal estableció que le recomendamos chicos es ir en su directorio vhost, anfitrión local, público en su aparato CS50. Y cuando vas allí lo que va a ver es un archivo HTML punto índice. Ahora que dot índice Archivo HTML o el punto índice Archivo PHP, lo que sea bien, lo que luego se puede hacer es ir a su sistema operativo principal. Y si vas a la dirección IP de que aparecen en la parte inferior derecha esquina de su aparato aquí, como se puede ver, entonces lo que ocurre es que usted vaya a la página que es referenciado por ese archivo HTML dot índice. Así que todo el código que usted puede poner en no se envía y es utilizable aquí. 

TOMAS REIMERS: Así que es también sólo importante para referencia que si ustedes realmente saben cómo configurar un servidor de usted mismo, o si desea poner esto en el todo el mundo web, le invitamos a hacer lo que sea. Recuerde que estos son sólo archivos JavaScript y todo el procesamiento de Salto se hace en el cliente. Así que no importa realmente donde vive su servidor siempre y cuando el ordenador que está viendo la página web en ha instalado Leap Motion. Armaghan BEHLUM: Por supuesto. Al igual que Tomás dijo, sí, lo que funcione para ustedes. Esta es sólo una de nuestras recomendaciones. Ahora para empezar a utilizar Salto Motion lo que harías está usted le importa el JavaScript archivo de Leap Motion. Y a continuación, a partir de ahí lo que que puede hacer es, en estos momentos Sólo tengo este párrafo etiqueta creada con un ID de texto. Las cosas que nos gustaría recomendar ajuste de las opciones del controlador para Leap Motion con el permitir gestos para ser verdad. Así que por defecto los gestos que te mostramos chicos, el círculo y la grifo clave, y los golpes, los que no se muestran a ustedes por defecto. Pero es muy recomendable el uso de los lo que no estamos reinventando la rueda. Habilitar los true, pasando los opciones de controlador para saltar lazo dot y ya está todo listo para ir. Porque entonces sólo tienes definido una función anónima que tendrá en un marco de Leap Motion y que cuenta con todo el marco información que vas a necesitar. 

TOMAS REIMERS: Así que para resumen, usted tiene un objeto. Usted tiene esta función llamado bucle de puntos salto. Y usted lo llama con dos argumentos. Usted lo llama con uno, las opciones de controlador. Y hay una gran cantidad de opciones que pueden poner allí en. El que vamos a destacar es permitir a los gestos. Y si se establece igual a cierto entonces usted puede tener acceso a esta gestos que os mostramos en el visualizador. 

Y entonces el segundo argumento es un función, que es como una especie de llamada de vuelta que se llamará cada tiempo cada fotograma de Salto, Así que cada vez que los registros bisiestos su movimiento parte, tiene un nuevo marco. Y llama a esta función con un argumento, que es el objeto marco. Y aquel objeto marco describe el marco como Salto ve. Armaghan BEHLUM: Exactamente. Así que este contiene toda la utilidad partes y piezas de información que hablábamos antes. Comprobación gestos de puntos de trama es una serie de gestos que el movimiento de salto llamado la manos que hacen en el último fotograma. Así, por ejemplo, de lo que somos haciendo aquí es que estamos comprobando, bueno, Salto, en ese último cuadro hizo usted coge cualquier gesto que hice? Y si es así lo que decidamos hacer es recorrer esos gestos y tratar de conseguir algo útil información de ellos. Cada gesto tiene un único ID asociado con él. Tienen tipos. Usted puede mirar en el que los dedos estuvieron involucrados en los gestos por el control de este material orientable. Así que si cuando vas a través de la Leap Motion JavaScript cosas API, cuando mencionan pointables, que están hablando de estos dedos. Y entonces las manos son, por supuesto, el objeto de toda la mano. 

Qué otra cosa? Puede comprobar cuánto tiempo el movimiento continuó para y, sí, todas esas cosas útiles. Así que lo que estoy haciendo en este momento aquí es Registré el marco, y luego puedo actualizar mi HTML para mostrar todos estos bits de información del bastidor. Así que vamos a ver eso. 

Así que aquí está. Aquí está el archivo HTML punto índice. Y a medida que acaba de ver cuando me acabo de mudar mi mano Salto captó un movimiento circular. Así que usted puede verme haciendo un círculo sobre aquí, se actualiza con la información círculo. Haciendo golpes, las capturas golpes. Vamos a tratar de una ficha de la pantalla. Hay que ir. Toque de pantalla y un grifo clave. Grifos Así clave también, por la Así, son cuando usted golpea hacia abajo. Así que usted puede imaginar tal vez tocando un piano. 

Y entonces la pantalla se toque son cuando se pulse la pantalla. Así que usted puede imaginar tal vez usted realmente tendrá una pantalla táctil en frente de usted y que está golpeando el toque pantalla delante de usted. Y luego podemos tomar uno de estos objetos en aquí. Entonces recuerdo que dije que yo era pasando por el marco en registro de la consola. Y así podemos revisar todo el partes y piezas de información que están disponibles en ese marco así a utilizar. 

Como he dicho antes, pointables son los dedos. En ese momento no teníamos nuestra las manos delante de la Leap Motion por lo que ha registrado cero, pero esta es la forma de comenzaría a descubrir lo mejor cuántos dedos son la pantalla. Y ese tipo de información. TOMAS REIMERS: Y recuerdo esto es sólo un objeto. Así que todo lo que se puede acceder algo así como una estructura en C. Usted tiene el objeto punto de nombres el nombre de propiedad. Y luego dentro de que tienes matrices y tiene otros objetos, pero recuerda que es sólo un objeto. No hay nada especial porque estamos usando Salto. Armaghan BEHLUM: Sí. Fresco. ¿Hay que revisar un par de ejemplos de JavaScript? 

TOMAS REIMERS: Así recordar rápidamente que nos dijo que Salto en realidad puede ejecutar en cualquier sitio web. LeapJS es sólo sirve a un cliente. Y así, a lo largo como el cliente tiene Leap Motion adjunta que funcionará. Así Leap Motion tiene una sitio web donde la gente pueden compartir sus ejemplos de las cosas que han hecho. Así que sólo vamos a ir a través de un par de ellos para ver lo que es posible antes zambullirse en más detalles acerca de cómo que es posible. Así Armaghan BEHLUM: Vamos a ver. TOMAS REIMERS: Ahora debería estar trabajando. Armaghan BEHLUM: Así que ahora antes de ver un ejemplo Unity que rindió nuestras manos con bastante impresionantes pieles gráficas, pero ahora se puede ver que puede hacer el lo mismo dentro de un navegador web. Todo esto es Chrome interior simplemente utilizando JavaScript. Y luego la otra agradable cosa es que si quieres saber cómo lo hicieron, los ejemplos en JavaScript También incluir opciones de código que puedes echar un vistazo y luego ver cómo esta persona estaba agarrando manos y los códigos y tal. 

Así que eso es todo lo que puedes encontrar en developer.leapmotion.com. Usted puede ir y comprobar JavaScript ejemplos que tienen allí. Así que sí. Aquí están estos, vaya lo siento. Vamos a intentarlo de nuevo. Oh. Tengo dos manos derechas. Así que sí. 

TOMAS REIMERS: Así una y otra vez, recuerda a veces salto meta la pata. Sólo tienes que darle un segundo. No es perfecto, pero es bastante bueno. Armaghan BEHLUM: Una otra recomendación también es no hacerlo a la luz solar directa. Así que la forma Leap Motion obras es, en realidad si muestro la cámara esta así, la luz infrarroja. Por lo tanto, envía los fuera y luego las lee cuando regresan. Así que si usted está tratando de haga la luz solar directa, por ejemplo, es probable que no ir a trabajar, o que va a requerir algunos de calibración para hacerlo. 

También otra recomendación es despejar el espacio detrás del Salto y frente a Salto. Piense en ello como trabajo en el interior de una cúpula que es en torno a este objeto Leap Motion. Si hay materia derecha detrás de él, así, Eso también va a interferir con la forma de probar el Leap Motion de reconocer la mano y ese tipo de cosas. 

Así, por ejemplo, creo que en este caso se trata de mi portátil realidad eso es algo de lo que el Leap Motion. Sí, ahí vamos. Así que si puedo borrar mi portátil desde detrás de él la mano aparece bastante bien. Así que sí. Hay que. Entonces, ¿qué más lo hizo les mostramos. TOMAS REIMERS: Creo Ahora sería el momento para ordenar de sumergirse en y sólo vamos a hacer una demo totalmente desde cero. Va a ser muy simple. Básicamente lo que vamos para tratar de hacer es que sea para que cuando pase su parte, el fondo va a comenzar como rojo, y cuando pase su parte, el fondo va a ponerse verde. DE ACUERDO? Realmente simple. Y es básicamente sólo va a pasar por un montón de los conceptos detrás Salto para que podamos entrar en esta ideología de cómo funciona Salto y cómo podemos construir cosas con eso. Y a continuación, a partir de ahí vamos a probablemente sólo le mostrará las API Docs y dónde Puedes leer más sobre esto. Y entonces lo llamaremos día. Entonces, ¿quieres que codificar o ¿me quieres código? Armaghan BEHLUM: Sí. Bueno, creo que podemos trabajar juntos en esto y tratar 

TOMAS REIMERS: Así que vamos a hacer algo de código par. Armaghan BEHLUM: Allá vamos. Eso es exactamente lo que yo queríamos hacer la salida. Fresco. Así, por ejemplo aquí, vamos a ver. Si bien estamos iterando a través de los gestos ya, TOMAS REIMERS: ¿Quieres hacer sólo un archivo completamente nuevo? Armaghan BEHLUM: Completamente nuevo archivo? Sí, seguro. 

TOMAS REIMERS: Sí. 

Armaghan BEHLUM: Así que vamos a hacer eso. 

TOMAS REIMERS: Así que vamos Para crear un archivo completo. Lo llamaremos mano HTML punto. Eso está bien conmigo. Así que recuerde que usted hace una etiqueta HTML, entonces dentro de que tiene una cabeza. Esa cabeza tiene un título dentro de ella. Así pestaña hacia otro lado. Hay que ir. Título, lo llamaremos Salto Ejemplo. Sí. 

Armaghan BEHLUM: Vaya. Título. 

TOMAS REIMERS: Sí. 

Armaghan BEHLUM: No somos. 

TOMAS REIMERS: Y entonces vamos a hacer un cuerpo. 

Armaghan BEHLUM: Espera, vamos También asegúrese de importar. TOMAS REIMERS: Oh, por supuesto. Mi mal. Así que siempre asegúrese de que tiene el Salto script para que un guión que le ha asignado por Leap Motion que básicamente permite que el navegador web para conectar al dispositivo en el ordenador del usuario. Y luego, en este también necesitará un cuerpo y sólo vamos a hacen que el cuerpo dice hola por lo que podemos mostrar a los estudiantes cómo conectarse a este nuevo La página web que ellos hicieron. Armaghan BEHLUM: Seguro. Así que vamos a ponerlo de another-- 

TOMAS REIMERS: Hola, hola mundo. Así que un ejemplo muy básico. En realidad sólo una demo. 

Armaghan BEHLUM: Y entonces aquí estamos puede ir a, lo llamamos HTML dot parte, ¿verdad? Y, ¡oh! Así que me pregunto qué está mal con esto ahora mismo. Vamos a agregar permisos de lectura a mano HTML punto. TOMAS REIMERS: ¿Usted desea hacerlo en el gran terminal de por lo que sólo podemos mostrarlo en el-- 

Armaghan BEHLUM: Sí, eso tiene sentido. Bien. Así que me acaba de agregar el permisos, pero si eran de revisar la permisos antes de que habría visto que en realidad la mano dot HTML no tenía permisos de lectura y por lo tanto no pudimos hacerla. Pero ahora, si lo hacemos, vemos nuestra pequeño mundo hola allí mismo. 

TOMAS REIMERS: Así que vamos a realidad, mientras escribía, hola mundo, Pensé en una manera podríamos cambiar esto. Vamos a hacer lo que dice hola mundo, y luego, cuando le hace señas, que dice adiós. Derecho? Así hola, adiós. 

Armaghan BEHLUM: Seguro. 

TOMAS REIMERS: Eso suena bastante bien. 

Armaghan BEHLUM: Eso suena bien para mí, también. 

TOMAS REIMERS: Así que si somos va a hacer eso a dejar solo pensar a través de la página web un poco. Vamos a necesitar algo de guión que registra básicamente que usted agitó y un salto, una ola y un golpe, lo mismo. Así que vamos a necesitar un script que básicamente registra para ese golpe. Y otra cosa que estamos va a necesitar es que estamos va a necesitar algo contenido real al cambio. 

Así como usted recuerda, jQuery le permite cambiar el contenido. Así que una cosa que podríamos querer incluir en esto es la biblioteca jQuery. Y a continuación, ser capaz de seleccionar lo de hecho vamos a cambiar el contenido, eso va a necesitar un ID o una clase, o algo que podemos usar para seleccionarla. Así que sólo tendremos que darle una Identificación rápida de cambiar el texto. Y entonces qué quiere agarrar jQuery? Armaghan BEHLUM: Entonces, ¿qué es lo primero cosa en nuestra lista de tareas pendientes, entonces ahora? TOMAS REIMERS: Vamos a agarrar jQuery? Armaghan BEHLUM: Vamos a agarrar jQuery, OK, fresco. En ese caso, me voy a tener que actually-- ¿dónde estaría el mejor lugar para hacer eso? 

TOMAS REIMERS: jQuery, así que si usted Google jQuery, jQuery golpeó, la primera Armaghan BEHLUM: Muy primera. TOMAS REIMERS: O descarga. Está bien. Hit descarga v1 y v2 de la izquierda. Así que estamos describiendo jQuery desde en línea como usted probablemente ha hecho. Desplácese hacia abajo. Arriba, arriba. 

Armaghan BEHLUM: Oh, aquí ahora? TOMAS REIMERS: O eso. Sí. Así que jQuery tiene una versión hospedada lo que significa que usted no lo hace realidad que descargarlo, pero usted es más que bienvenida para descargarlo y el anfitrión de usted mismo. Armaghan BEHLUM: Cool. Así que ahora tenemos jQuery. Ahora lo que se viene en nuestra lista de tareas. TOMAS REIMERS: Awesome. Así que la próxima lo que necesitamos hacer es que realmente necesitamos para dar mundo p hola un ID para que podamos cambiarlo, ¿verdad? Así que vamos a darle una idea de, No sé, cambiar el texto? Armaghan BEHLUM: Vamos a simplemente hacerlo de esta manera, supongo. TOMAS REIMERS: changeText, fresco. Y ahora vamos a actualizar la página. Hacer todo funciona seguro. Así que de vuelta en el navegador. Fresco. Siempre es un buen recordatorio de que cuando usted está construyendo un sitio web, probablemente actualizar cada vez que realice cualquier cambio poco significativo sólo porque a veces accidentalmente caer una etiqueta, o elimina accidentalmente algo, y luego se rompe algo pequeño, pero luego, cuando se realiza un cambio grande usted es como, ¿por qué este gran cambio aparentemente romper la cosa no relacionada. Así que siempre es bueno para ordenar de ir y hacer esas comprobaciones de sanidad. 

De todos modos así que ahora vamos a hacer una última comprobación de validez, que vamos a tratar de cambiar texto sin Leap Motion, sin nada, sólo sobre la carga de la página que va a cambiar hola mundo a adiós usando jQuery. Así que si usted recuerda expone jQuery esta función muestra de dólar, que podemos pasar selector CSS para, a saber, el texto del cambio hashtag, que selecciona el elemento con una identificación de los cambios de texto. Y luego vamos para llamar al método HTML en el objeto vuelve con el argumento de una despedida de cuerdas, que cambiará los artículos HTML para decir adiós. Impresionante. Eso parece muy bien. Y ahora, cuando refrescamos la página que vamos a ver que cambia instantáneamente al adiós, ¿verdad? Debido a que no espera nada. Algo tan pronto como ese guión corre cambia a adiós. Fresco. 

Así que ahora vamos a terminar con que en una función. Derecha. Así que vamos a querer para hacer una función. Lo llamaremos adiós. Así que adiós función es va a tomar sin argumentos y en realidad no es va a devolver nada. Y sólo va a hacer eso en JavaScript. Excelente. Así que nuestra función adiós ahora cambia el texto de despedida, ¿no? Así que esto nos da una manera básicamente el cambio que el texto de despedida siempre llamamos a esa función. Derecho? Así que esto está muy bien. 

Armaghan BEHLUM: Bueno, También puede simplemente asegúrese que ahora ya no estamos llamando a la función, si refrescamos la página, cuenta que no va para cambiar el texto. 

TOMAS REIMERS: Excelente. Así que ahora vamos a empezar entrar en ese salto cosas que estábamos hablando. Así Armi, ¿quieres tomar desde aquí o? 

Armaghan BEHLUM: Sí. Claro. Probablemente voy a necesitar comprobar las cosas, pero por ejemplo recordar nos dijo que quería para asegurarse de que en las Opciones establecimos permitir gestos TOMAS REIMERS: Buena captura. Armaghan BEHLUM: Para ser cierto. Y luego nos recomendábamos que ustedes harían ejecutar bucle punto salto, que como hemos dicho antes, tiene dos opciones, un objeto JSON que es las opciones para la forma en que desea para configurar el Leap Motion para trabajo, y luego una función que es va a coger un marco como una devolución de llamada funcionan como Tomas estaba diciendo. Y luego editar lo que quieras que ver con esa función. 

Así que pasamos en el opción y ahora definimos una función que tendrá en un marco. Y ahora tenemos que definir lo que hace esa función. Es también por el bien de la futuro, hacer eso para asegurarse. TOMAS REIMERS: Excelente. Así que ahora tenemos este función de bucle de puntos salto llamar que básicamente dice reloj Salto con estas opciones y cada vez algo cambia, llaman a esto marco de función con todos los datos que son conscientes de en el marco. Suena bastante bien. Así que ahora prueba de cordura rápida, que yo siempre recomiendo, está en que sólo hay que poner consola marco lógico punto. Y luego, en Chrome abrirlo y mira a tu consola y jugar con salto para ver el marcos están registrando porque esa voluntad que tener una idea de lo que datos que tiene acceso. Y como siempre, si usted se confunde, buscar la referencia de la API. Y vamos a incluir el enlace para que al final de este. 

Armaghan BEHLUM: Así que Actualiza la página y luego vamos y abrimos la consola de nuevo. Y ahora nos damos cuenta de que estamos tener marcos aprobadas en, estos pequeños objetos que vimos antes. Así que sí. Estos son nuestros marcos aparecer en la consola. Fresco. 

Así que ahora que nos hemos agarrado el marcos, como te pueden recordar anterior del ejemplo que teníamos, si comprobamos gestos de punto de trama tenemos la lista de los gestos que el marco más recientemente se encontró. Podemos comprobar la longitud de esa matriz para ver si salto atrapó ningún gesto. Así que si ese arreglo es mayor que cero entonces Sabemos que tenemos algunas cosas que hacer. 

Así que vamos a terminar con eso en una condición if y ahora aquí lo que sabemos es que han visto un gesto, vamos a actuar en él. Así que ahora que estamos aquí somos tener un gesto a la salida. TOMAS REIMERS: Bueno, lo primero cosa es que no es sólo un gesto, podría ser tan muchos gestos. 

Armaghan BEHLUM: Muy cierto. TOMAS REIMERS: Así por estilo clásico C aquí probablemente querremos usar un bucle for. Armaghan BEHLUM: Aquí estamos entonces. Decidimos recorrer a través de los gestos. Y vamos a ver. i plus, plus. Y ahora si tal vez hicimos sólo un gesto var es igual gestos de puntos marco soporte i, ahora tenemos gesto en sí, que es sólo uno única instancia de un objeto gesto para nosotros trabajar con dentro de este bucle. Bien. TOMAS REIMERS: la cordura de Let comprobar de nuevo aquí y sólo consolar dot ingrese gesto para ver lo que tenemos. 

Armaghan BEHLUM: Consola gesto de registro de puntos. Dokie Okie. Y actualizar una vez más. 

TOMAS Reimers: Y vamos a trate de hacer un gesto. Vas a ver que un montón de, cuando se desliza, usted consigue un montón de gestos en el consola y si trata de hacer un círculo, es sólo-- 

Armaghan BEHLUM: Círculos son realmente agradable. 

TOMAS REIMERS: Ahora hay una cosa extraña aquí, lo que se está haciendo un círculo, pero esto está registrando 80 gestos, ¿verdad? Eso es un montón de gestos. Así que el primer tipo de cosas a se da cuenta, y esto puede ser confuso, es que un gesto No se acaba de conectarse una vez. 

En cada cuadro, derecha, por lo que si estoy haciendo un círculo Salto detectará esta es un cambio, de esta es un cambio, a partir de esto es un cambio. Y va a registrar cada uno de ellos. Pero en cada uno de ellos, que va a decir, oh, hay un gesto actualmente en curso. Así que permítanme decir, hey, hay una gesto y es actualmente en curso. Así que lo que no queremos hacer es decir, oh, en cada uno de esos gestos que quiere cambiar el texto. Lo que queremos hacer es cuando ese gesto se detiene, y podemos comprobar que, entonces queremos cambiar el texto. Armaghan BEHLUM: Mhmm. Así que, como Tomás es explicando estos gestos podría parecer a través de múltiples marcos, pero por ejemplo, cuando estábamos teniendo ese círculo, podemos ver que el ID para que uno solo círculo que podría haber estado tratando de completar era el mismo ID de largo. Y, de hecho, también puede revisar el estado. actualizado. 

Y entonces este es probablemente el último círculo que, oh, bueno, OK. Así que a veces muestra una estado de la detención de un gesto y también le muestra el estado de iniciar un nuevo gesto cuando reconoce con certeza que que ha comenzado un nuevo gesto. Por ejemplo en este caso. TOMAS REIMERS: Cool. Armaghan BEHLUM: Así que sí. Y luego, vamos a ver. También puede notar aunque estábamos haciendo un círculo y el gesto tiene un tipo de campo llamado que nos dice qué tipo del gesto que es. Así que podría ser útil para nosotros tratas de hacer lo que estamos haciendo. TOMAS REIMERS: Así la transición de vuelta a la JS, lo primero que se me ocurre También, sólo la lectura a través de este código es que hay una pequeña optimización, que es que en realidad no necesitan esta condición si, ¿no? Porque si los gestos de puntos marco puntean longitud es cero, que para el lazo de no va a correr de todos modos. Así que bien podemos ir adelante y deshacerse de eso. Una vez más, mientras estás escribiendo código es importante regresar y ordenar de refactorizar como te das cuenta de que usted podría haber hecho algo mejor, o que hay otra manera de hacerlo. Así que ahora sólo vamos a limpiar este rápidamente y también limpiar su código. Eso es una gran cosa. 

Armaghan BEHLUM: Good estilo es muy apreciado. 

TOMAS REIMERS: Puede siempre decir cuando alguien tiene código donde solía haber un if estado y luego se lo quitó, pero no descomentarla. Es muy obvio y es como que se ve feo. Armaghan BEHLUM: ¿Cuál es el siguiente en nuestra lista de tareas pendientes? TOMAS REIMERS: Así que ahora como decíamos, Supongo que lo primero que queremos hacer es asegurarse de que ese gesto de en realidad un golpe, ¿no? 

Armaghan BEHLUM: Sí. 

TOMAS REIMERS: Así que si estamos diciendo que nuestro adiós es algo así como un golpe, vamos a ir con él es un golpe, el Lo primero que tenemos que decir es, hey, se escriba el gesto un golpe, ¿no? No es un círculo o una tapa, pero ¿es un golpe? Así que la forma en que podemos hacer eso Somos nosotros podemos decir gesto Tipo de punto igual golpe igual como una cadena. 

Armaghan BEHLUM: [inaudible] gesto tipo de puntos es igual a igual a golpe. Ahí estamos. 

TOMAS REIMERS: Y a continuación, la última pregunta queremos ver es el gesto de punto parada igual igual estado, ¿no? Así que eso es cuando el Ha estado detenido gesto. En realidad, yo creo que para deslizar el dedo, me saber esto de la parte superior de mi cabeza, pero le invitamos a búsquelo, cuando deslizar cada vez que se registra hasta que lo pare es un gesto de inicio. Y a continuación, el último de sólo un gesto de la parada. Así que sólo habrá una parada gesto, que es muy bueno para nosotros. Entonces, ¿qué podemos hacer es decir si gesto dot escriba golpe igual igual y gesto de puntos igualdad de condición igual parar, entonces vamos a la cordura marque aquí consolar gesto de registro de puntos. 

Así que vamos a volver aquí. Vamos a actualizar la página. Y ahora la única vez que algo debe ser punto de consola conectado es cuando pasada. Y tratamos de pasar el dedo y no vemos nada. Derecho? Así que esto es realmente un gran problema. No estamos viendo lo que esperábamos. Y la depuración puede ser una gran parte de esto. Así que lo primero que vamos a decir es, OK, vamos a consolar a punto sesión si gesto dot escriba igual golpe igual. Armaghan BEHLUM: Sí, vamos a hacer eso. TOMAS REIMERS: Así que estamos va a volver a este. Vamos a refrescar. Vamos pasada. Y vamos a ver un montón de ellos. DE ACUERDO. Así que está claro que el problema era con nuestro estatus gesto de puntos. Así que si nos abrimos uno de estos vamos a Esperamos en los objetos y veremos, bueno, es una parada, pero, oh, se llama Estado, no de estado. Así que si nos dirigimos de nuevo a nuestro código podemos decir si el tipo de gesto dot igual golpe igual y la parada de igual estado gesto de puntos iguales, entonces vamos a consolarnos punto registrarlo. Y así refrescar. Acercamos. Y veremos que en cada golpe, sólo estamos conseguir uno, que es el final, que es grande, ¿no? Eso es lo que queremos. 

Armaghan BEHLUM: Sí. Y también podemos notar que las identificaciones de cada uno de estos gestos son aparte. Así como Tomás estaba diciendo porque somos la captura de este estado una parada que existe al final de un golpe, estamos conseguir gestos individuales separadas de Leap Motion. Grande. 

TOMAS REIMERS: Vamos a seguir adelante y acaba de hacer la última cosa, que es, 

Armaghan BEHLUM: Adiós. 

TOMAS REIMERS: Awesome. Y ahora vamos a ver nuestro sitio web. Uno 

Armaghan BEHLUM: Segundo. Lo hicimos, sí, nosotros lo llamábamos Adiós. Grande. 

TOMAS REIMERS: No, Goodbye es una función real. 

Armaghan BEHLUM: Sí. Vamos a hacer eso. 

TOMAS REIMERS: Y cuando onda adiós, que dice adiós. 

Armaghan BEHLUM: Tenemos la victoria. 

TOMAS REIMERS: las cosas Tan bastante emocionante. Esperemos que se puede construir algo los demás, pero se entiende la idea de, ¿verdad? Puede detectar gestos. Usted puede llamar a funciones. Y desde aquella que realmente te da algunos bloques de construcción fundamentales muy a decir, oh, tal vez con sólo pasar hacia arriba, porque también se puede detectar cosas dirección similar. Yo quiero que hagan algo. O con sólo pasar bien, quieren que hagan algo. Y podemos empezar a conseguir creativo con cómo exactamente vamos a mejorar nuestro sitio web el uso de estos gestos banda magnética o círculo gestos o tap gestos, ya sea grifos o toques de pantalla clave. Y a continuación, que no sea que eres más que bienvenido a jugar con los datos reales, pero si quieres hacer que le sugerimos que vaya a la documentación porque son realmente buena. Así que se dirigió a los docs ahora. ¿O quieres hablar de eso? 

Armaghan BEHLUM: Sí. Vamos a hacer eso. También otro chisme de asesoramiento, no tratar de pensar en esto en 3D. Así que en realidad vamos a tirar para arriba esos gestos una vez más el gesto de registro de puntos consola y lo hacemos. Vamos de nuevo y ahora vamos a tratar de una par de ellos, un par de ellos. 

Si vamos y salida del hotel estos gestos, así como se puede ver que son dimensionalidad es en tres direcciones, en realidad. Así que no sólo limitar Disfrute de una pantalla 2D a pesar de que te pueden estar en un sitio web 2D. Usted puede tratar de pensar cómo un usuario podría interactuar con el sitio web en 3D. TOMAS REIMERS: En un espacio 3D. Armaghan BEHLUM: Exactamente. Y sí. Para que pueda obtener las direcciones, las velocidades, todos estos bits de información fresco. 

TOMAS REIMERS: ¿Y si no estás familiarizado con eso, va x, y, y entonces z es esta última dimensión. Sólo es algo que probablemente son familiarizados con si usted ha tratado con 3D planos de coordenadas antes. Si usted no tiene, es lo mismo que un 2D uno, excepto que hay una tercera dimensión. Lo llamamos z. Y todo, algo así como dirección, que es donde va, Position-- creo que incluso podría exponer la aceleración, no estoy seguro. 

Armaghan BEHLUM: Sí, yo creo. Definitivamente tiene velocidad. En realidad no estoy al 100% seguro acerca de la aceleración. 

TOMAS REIMERS: Puede ser una opción se puede pasar a algo. Así que la posición y la velocidad están expuestos en este tipo de tres coordenadas. Así que x, y, z o delta x, delta y, delta z. Así que ahora nos dirigimos a la documentación es developer.leapmotion.com y entonces usted puede hacer clic en Documentación. Una vez más, Leap Motion tiene todos estos API maravillosos, uno para JavaScript, una para C Sharp y Unidad, uno para C ++, uno para Java, uno para Python, y uno para Objective C. Personalmente que empujarte hacia JavaScript o si quieres aprender nuevo idioma, intente Python. Ambos de estos idiomas los que he trabajado antes y son muy fácil de aprender y usted ya sabe JavaScript, lo que hace que sea un buen candidato. 

Una palabra de advertencia cuando entras en la documentación. Asegúrese de que está en Docs v2.0. Porque si usted está en versión uno, no va a funcionar. También para la galería ejemplo. Pasamos unos buenos 30 minutos tratando la depuración nuestra Salto antes de que nos dimos cuenta de que V1 no funciona con V2. Así que asegúrate de que estás en la versión dos. Y entonces yo le dejé mostrar sus los docs. Armaghan BEHLUM: Sí. Así que aquí está el resumen de API y después algunos fragmentos de la información que ya te hemos contado. Poco flotante Niza las manos por encima de un Leap Motion. Y un recordatorio para pensar sobre el espacio en 3D. Uno de los primeros objetos que pensar con Leap Motion son las manos, por supuesto. Vimos los reconocidos por el visualizador. Y entonces usted podría tener visto que reconocía parte de la muñeca y de la brazo asociado con él. TOMAS REIMERS: Si desea para levantar el visualizador. Armaghan BEHLUM: Sí, vamos a hacer eso otra vez. TOMAS REIMERS: Usted puede ver, siempre sólo un buen recordatorio para ver más o menos, Visualizador intenta mostrar todos los datos que Salto ve. Así podrás ver que tenemos este tipo de cuatro puntos por la muñeca y luego la muñeca real. Y usted también tiene esta bola en la palma de la mano. Todos estos son puntos Reconocer reconocido por el salto. 

Armaghan BEHLUM: Exactamente. Y así, con ese objeto mano cada cuadro tiene un arsenal mano así, donde también se puede obtener la manos izquierda y derecha. Usted puede conseguir que dirección las manos son enfrenta con la normal dirección de la palma de la mano, o como lo llaman la palma normal. ¿Qué más tenemos? También, oops. Vamos a tratar de desplazarse por este camino. Los brazos, los dedos son representado por el dedo clase, que es un objeto orientable. Así que, como decíamos, vimos que variedad de pointables para cada mano. Esos son el pequeño dedos para pensar. Así que este es un buen panorama para ir a través de tratar de entender. TOMAS REIMERS: [inaudible] anatomía hasta la mano allí. Armaghan BEHLUM: Sí, exactamente. Así que sí. Hay una gran cantidad de datos en bruto que el Leap Motion toma en interpreta bien para usted, así que es un gran idea de pasar por aquí y tratar de encontrar la manera Salto tiene ya constan las cosas para usted y por lo que información tener disponible desde allí. Y luego desde allí Recomendaría de cara a esta sección de la izquierda aquí, que va, bueno, en realidad no, esos son en realidad sólo más cosas API sobre-- 

TOMAS REIMERS: La referencia de la API en el inferior suele ser un buen lugar para ir. Ustedes probablemente vio esto cuando hicimos el Google Maps PSET. Pero la referencia realmente sólo pasa por todas de las funciones y parámetros disponible en el objeto a usted. 

Armaghan BEHLUM: Sí. Por ejemplo, esto es lo que Yo estaba buscando antes. Cuando tenemos una mano que puede ir y averiguar cómo Salto recomienda a nosotros para encontrar una mano. Como he dicho antes, tenemos una gran variedad manos. Averigüe si tenemos las manos y a continuación, tratar de agarrar una sola mano para interactuar con esa manera. Así que eso es lo que recomendar para ustedes. Los gestos y cosas así. Esta documentación de la API se va a ser una herramienta fantástica para ustedes. ¿Tiene alguna otra recomendación? 

TOMAS REIMERS: no lo hago. Creo que eso es bueno por ahora. 

Armaghan BEHLUM: Sí, Pienso lo mismo. No dude en enviarnos un correo electrónico y obtener en contacto acerca de Leap Motion si usted está teniendo tal vez cualquier problema o necesita alguna recomendación. Y podemos tratar de averiguar cosas con ustedes también. Gracias. 

TOMAS REIMERS: Grande.