TOMAS REIMERS: Cool. Così Hi, everyone. Mi chiamo Tomas. Sono un TF e questo è ARMAGHAN BEHLUM: Armi. Bello vedere voi ragazzi. TOMAS REIMERS: Cool. Quindi stiamo andando a parlare su Leap Motion oggi. Così Leap Motion è un prodotto molto buono, perché consente di interagire con un computer in un modo diverso. Così l'idea che sta dietro salto movimento è che si possono usare le mani per interagire con il computer. Così qui ho qualcosa istituito. Io parlo in un po '. Ma la versione di base si è in grado di vedi che ho le mani davanti del mio computer e quando li muovo, si ottiene l'analogo sul computer e si può analizzare questo. Si può fare gesti. È possibile utilizzare le mani per interagire con il computer in modo nuovo e interessante. 

Beh, io in realtà prima vogliono far passare per Armi visualizzare alcuni demo fresco di quello che alcune persone hanno fatto con questo. E poi parleremo di come effettivamente codice con questo. ARMAGHAN BEHLUM: Sì. Ciao. Quindi, come abbiamo visto, poco dati qui, ma vediamo quello che alcune persone hanno fatto con questo. Quindi lasciatemi aprire questo esempio. E poi, così, per esempio, si può vedere mia analogico mano lì, ma ora questa volta alcune persone che utilizzano Unity hanno ha deciso di mettere un po 'di più la pelle e roba intorno alla mano. Così posso, andiamo con questo, certo, hanno le mani che interagiscono. E probabilmente si può immaginare un paio di altre cose utili interessanti che si può fare con questo. Quindi questo è almeno un esempio. E allora facciamo un salto fuori di questo. 

E poi un altro fresco è, andiamo con questo. Palla Plasmo. Anche in questo caso, non sarebbe necessariamente aspettiamo che questo livello di complessità da un progetto definitivo per CS50. Questo è solo per mostrarvi alcuni dei, ti danno ragazzi un po 'di ispirazione per quello che voi potete fare con Leap Motion. Così, per esempio, ecco un luogo fresco esempio la fisica, che ci andiamo. Ha entrambe le mie mani così ora avere questa piccola sfera di plasma. E la palla sta reagendo alla fisica di me si muove la mano attorno alla palla. Ora, questo è tutto però con Unity, utilizzando tipi di strumenti e framework che non abbiamo insegnato ragazzi in classe, ma come si può vedere qualche bella run through fresco con quello. 

Ma una cosa che voi potete fare partendo adesso con Leap Motion è un lavoro in JavaScript. Leap Motion ha una API JavaScript che voi potete usare e altamente, altamente consigliamo di ragazzi costruire i vostri progetti che utilizzano tale. Quindi, con questo, mi permetta passare di nuovo fuori a Tomas per parlare di Leap Motion e JavaScript. TOMAS REIMERS: Cool. O vuoi mostrare loro il Visualizer prima? 

ARMAGHAN BEHLUM: Oh, sì. Sì. Parliamo di più su questo Visualizer. 

TOMAS REIMERS: Così in una più semplice livello, quando si arriva a Leap Motion si sta andando ad avere questa casella. Qui, voglio che prenda il controllo? 

ARMAGHAN BEHLUM: Sì, andare per esso. 

TOMAS REIMERS: così quando si prima raggiungere Leap Motion si sta andando ad avere questa casella. Ha un dispositivo che sembra qualcosa di simile. Si collega al computer, installare i driver necessari, e poi sarà essenzialmente costituito. Quindi il modo più semplice per ordinare di accordo con Leap Motion è apertura del presente programma si installa chiamato Leap Motion Visualizer. E il Visualizer è letteralmente quello che sto mostrando qui. Esso permette di vedere il contorno scheletrica delle tue mani. E che il Leap Motion li sta interpretando come. Così il Leap Motion utilizza la fotocamera per ordinare di guardare le tue mani e poi cerca di indovinare ciò che il composizione scheletrico di base che vedi sullo schermo è. E questo è quello che si vede. ARMAGHAN BEHLUM: Ogni unico punto poco e cosa che si vede non c'è dati che è disponibile per voi ragazzi così da usare. Così si vede che è acquisizione che Tomas ha cinque dita, ognuna queste diverse dita sono anche disponibili per voi come dati punti per l'uso in qualsiasi applicazione che si potrebbe desiderare. Se volete vedere se qualcuno sta facendo un pollice in alto si può vedere se le dita sono arricciate e se sono dito pollice punta verso l'alto, o dove il loro polso o Palm è e quel tipo di cose. TOMAS REIMERS: Cool. Così si può vedere alcuni gesti che capisce meglio di altri. Ricordate, che sta guardando il tuo mano da una macchina fotografica dal basso, così quando si hanno le mani come questo li comprende pienamente, ma una volta che si inizia a cercare di fare un pollice in alto, a volte legge che, a volte può indovinare, ma onestamente la fotocamera semplicemente non può vedere il pollice. Quindi non è davvero sicuro di quello che sta succedendo. Solo alcune limitazioni da tenere a mente quando si sta sviluppando con questo. 

In ogni caso, in modo da tornare a questo. Il Visualizer realtà ha un sacco di strumenti utili. Così il Leap Motion è programmato in modo tale che non ti aspettano interagire con i dati di immagine che. Non lo fanno davvero aspetto che tu capisca cosa sta succedendo dietro le quinte. Quello che fanno è esporre un gruppo di API per voi in modo tale che si può interagire con questi dati direttamente senza capire cosa sta succedendo sotto il cofano. 

Quindi, se abbiamo raggiunto H qui in Visualizer vedrete un sacco di opzioni. L'importante qui però è se si colpisce O e poi colpito H, vedrai che ti permette di disegnare i gesti. Quindi un gesto, vedrai disegna una freccia attraverso. Un gesto è uno dei modi che Leap Movimento sorta di lascia ottenere ai dati senza dover elaborare esso. Quindi, piuttosto che me dover capire out, oh, la mano si muoveva, anche se ho il punto di accesso, il API sorta di dimmi, hey, hanno fatto questo gesto. Così si può fare gesti freccia di base. Puoi fare gesti cerchio. È possibile effettuare intercettazioni gesti. E si può compiere gesti di pressione dei tasti. Sì. E questo genere di cose. Quindi, ora che abbiamo una sorta di visto quello Leap Motion può fare, si può vedere si può leggere un tutta una serie di gesti. Penso che ho intenzione di passa di nuovo al Armi e ha intenzione di parlare di come si arriva a questi con JavaScript, come ancora di iniziare un progetto con questo. E poi parleremo di alcuni luoghi freschi si può andare con quella. ARMAGHAN BEHLUM: Sì. Suona bene. Quindi sì, la prima cosa che abbiamo vorranno di fare, naturalmente, è dopo si ottiene il Leap Motion è quello di andare a leapmotion.com, configurare, installare i driver e le cose. Dopo aver fatto che si può andare assicurarsi che sia collegato. Se vedete nel vostro piccolo vassoio Leap icona di movimento ed è verde, allora sai che sei a posto. E naturalmente controllare esattamente cosa Tomas appena vi ha mostrato con i gesti e facendo i tocchi sullo schermo, e rubinetti chiave, e quel tipo di cose. 

Dopo di che se noi, ancora una volta, come ho detto, abbiamo accesso a tutti questi cose in JavaScript pure. L'ideale istituito che vi raccomandiamo ragazzi è quello di andare nella vostra directory vhost, host locale, pubblica nel vostro apparecchio CS50. E quando ci andate cosa ti vedere è un file HTML di indice dot. Ora che puntino l'indice File HTML o indice dot File PHP, qualunque sia bene, che cosa si può fare allora è andare al vostro sistema operativo principale. E se si va a l'indirizzo IP che la elencati in basso a destra angolo del vostro apparecchio proprio qui, come si può vedere, allora cosa succede viene andate alla pagina che è a cui fa riferimento il file HTML di indice dot. Quindi tutto il codice che si potrebbe mettere in ci viene inviato ed è utilizzabile qui. 

TOMAS REIMERS: Così è anche solo importante per riferimento che se voi ragazzi in realtà sanno come impostare un server da soli, o se si vuole mettere questo in tutto il mondo web, hai la possibilità di fare qualsiasi cosa. Ricordate che questi sono solo file JavaScript e tutta l'elaborazione salto avviene sul client. Quindi non importa dove la vostra vita di server purché il computer si sta visualizzando il sito web su ha installato Leap Motion. ARMAGHAN BEHLUM: Assolutamente. Come Tomas detto, sì, quello che funziona per voi ragazzi. Questa è solo una delle nostre raccomandazioni. Ora per iniziare a utilizzare Leap Movimento che cosa si dovrebbe fare viene si importa il File JavaScript da Leap Motion. E poi da lì quello si può fare è, in questo momento Ho solo questo paragrafo tag istituito con un ID di testo. Le cose che consigliamo sono le opzioni di impostazione del controller per Leap Motion con il permettere gesti per essere vero. Quindi per default quelli gesti che vi abbiamo mostrato ragazzi, il cerchio, e il tap chiave, e le fendenti, quelli che non sono mostrati a ragazzi per impostazione predefinita. Ma consigliamo vivamente con quelle quindi non sei reinventare la ruota. Abilita quelle vere, quelle che passa opzioni di controller di salto ciclo dot e sei pronto per andare. Perché allora avete appena definito una funzione anonima che si terrà in un telaio da Leap Motion e che ha tutta la cornice informazioni che si sta andando ad avere bisogno. 

TOMAS REIMERS: Quindi, solo per Ricapitolando, si dispone di un oggetto. Hai questa funzione chiamato salto ciclo dot. E si chiama con due argomenti. Si chiama con uno, le opzioni del controller. E ci sono un sacco di opzioni si può mettere in là. Quello che andremo a sottolineare è abilitare gesti. E se lo si imposta pari al vero, allora è possibile ottenere l'accesso a questo gesto che vi abbiamo mostrato in Visualizer. 

E poi il secondo argomento è un funzione, è un po 'come una chiamata indietro che sarà chiamata ogni tempo ogni fotogramma di Leap, Così ogni volta che registri bisestili la vostra mossa mano, ha un nuovo telaio. E chiama questa funzione con un argomentazione, che è l'oggetto cornice. E questo oggetto frame descrive la cornice come Leap vede. ARMAGHAN BEHLUM: Esattamente. Quindi questo contiene tutto il utile bit e pezzi di informazioni che stavamo parlando prima. Controllo gesti dot telaio è una serie di gesti che il movimento salto catturato la vostra mani facendo nell'ultimo fotogramma. Così, per esempio, ciò che siamo facendo qui è che stiamo controllando, hey, Leap, in quell'ultimo fotogramma fatto si cattura qualsiasi gesto che ho fatto? E se sì che cosa decidiamo di fare è scorrere quei gesti e cercare di ottenere qualche utile informazioni da loro. Ogni gesto ha un unico ID associato con esso. Hanno tipi. Potete guardare quali dita sono stati coinvolti nei gesti verificando questa roba orientabili. Quindi, se quando si passa attraverso il API roba Leap Motion JavaScript, quando accennano pointables, stanno parlando queste dita. E poi mani sono, ovviamente, l'intero oggetto mano. 

Cos'altro? È possibile controllare per quanto tempo il movimento è andato su e, sì, tutte quelle cose utili. Quindi quello che sto facendo in questo momento qui è mi sono collegato al telaio, e poi aggiorno il mio HTML da visualizzare tutti questi bit di informazione dal telaio. Quindi cerchiamo di controllare che fuori. 

Così qui è. Ecco il file HTML di indice dot. E come avete appena visto quando mi sono appena trasferita la mia mano Leap catturato un movimento circolare. Così si può vedere me fare un cerchio sopra qui, aggiorna le informazioni cerchio. Facendo colpi, le catture colpi. Proviamo una scheda schermo. Ci andiamo. Tap dello schermo e un rubinetto chiave. Rubinetti Così chiave anche, da parte del modo, sono quando si preme verso il basso. Quindi potete immaginare forse suonare un pianoforte. 

E poi tocchi sullo schermo sono quando si colpisce lo schermo. Quindi potete immaginare forse effettivamente hanno un touch screen di fronte a voi e si sta colpendo il tocco schermo di fronte a voi. E poi siamo in grado di prendere una di questi oggetti in qui. Così ricordo ho detto che ero passando il telaio in log della console. E così possiamo controllare tutte le bit e pezzi di informazioni che sono disponibili in fotogramma così da utilizzare. 

Come ho detto prima, pointables sono le dita. In quel momento non avevamo il nostro le mani di fronte al Leap Motion quindi ha registrato a zero, ma questo è il modo per avrebbe cominciato a scoprire forse Quante dita sono lo schermo. E questo tipo di informazioni. TOMAS REIMERS: E ricordare questo è solo un oggetto. Quindi tutto è possibile accedere un po 'come una struct in C. Avete dell'oggetto nome dot il nome della proprietà. E allora dentro di avere array e si dispone di altri oggetti, ma ricordatevi che è solo un oggetto. Non c'è niente di speciale perché stiamo usando Leap. ARMAGHAN BEHLUM: Sì. Freddo. Dovremmo verificare un paio di esempi JavaScript? 

TOMAS REIMERS: So subito ricordare che siamo ha detto che Leap può effettivamente eseguito su qualsiasi sito web. LeapJS è solo servita a un client. E così lungo come il cliente ha Leap Motion attaccato funzionerà. Così Leap Motion ha un sito web dove le persone possono condividere i loro esempi delle cose che hanno fatto. Quindi stiamo solo andando a andare attraverso un paio di loro per vedere che cosa è possibile prima tuffarsi in più specifiche su come è possibile. Così ARMAGHAN BEHLUM: Vediamo. TOMAS REIMERS: Ora dovrebbe funzionare. ARMAGHAN BEHLUM: Così ora prima abbiamo visto un esempio con Unity che ha reso le nostre mani con abbastanza impressionante skin grafiche, ma ora si può vedere che si può fare il stessa cosa all'interno di un browser web. Questo è tutto all'interno Chrome solo utilizzando JavaScript. E poi l'altra bella cosa è se si vuole di sapere come hanno fatto questo, gli esempi in JavaScript anche includere opzioni di codice che è possibile controllare e poi vedere come questa persona è stata afferrando mani e codici e tali. 

Ecco, questo è tutto quello che potete trovare a developer.leapmotion.com. Si può andare a controllare JavaScript esempi che hanno. Quindi sì. Qui sono questi, ops scusate. Proviamo di nuovo. Oh. Ho due mani destre. Quindi sì. 

TOMAS REIMERS: Così e ancora una volta, ricordo a volte Leap scombina. Basta dare una seconda. Non è perfetto, ma è piuttosto buona. ARMAGHAN BEHLUM: One altra raccomandazione anche è di non farlo in luce diretta del sole. Quindi il modo Leap Motion opere è, in realtà se faccio vedere la macchina fotografica questo così, luce infrarossa. Quindi invia quelli fuori e poi li legge quando tornano. Quindi, se si sta cercando di fare luce diretta del sole, per esempio, è probabilmente non andare a lavorare, o sta andando a richiedere alcuni calibrazione di farlo. 

Anche un altro consiglio è quello di liberare lo spazio dietro il Leap e davanti Leap. Pensate a come lavorare all'interno di una cupola che è che circonda questo oggetto Leap Motion. Se c'è roba di destra dietro pure, che è anche andando ad interferire di come il Leap Motion sta cercando di riconoscere la mano e quel tipo di cose. 

Così, per esempio, credo che in questo caso è il mio computer portatile in realtà che una specie di fare il salto di movimento. Sì, ci andiamo. Quindi, se io a cancellare il mio computer portatile da dietro la mano mostra abbastanza bene. Quindi sì. C'è quella. Quindi, che cosa ha fatto noi li mostriamo. TOMAS REIMERS: credo Ora sarebbe il momento per ordinare di tuffarsi e facciamo solo fare una demo completamente da zero. E sarà davvero semplice. Fondamentalmente quello che stiamo andando per cercare di fare è rendere in modo che quando si scorrere la mano, il sfondo sta per iniziare come rosso, e quando si scorrere la mano, il sfondo sta per diventare verde. OK? Davvero semplice. Ed è fondamentalmente solo andando a passare attraverso un sacco dei concetti che stanno dietro Leap in modo che possiamo entrare in questa ideologia di come funziona Leap e come possiamo costruire cose con quella. E poi da lì faremo probabilmente solo mostrare Docs API e dove può leggere di più su questo. E poi ci chiameremo giorno. Quindi vuoi codice o cosa mi vuoi codice? ARMAGHAN BEHLUM: Sì. Beh, credo che possiamo lavorare insieme a questo e cercare 

TOMAS REIMERS: quindi dovremo fare un po 'di codifica coppia. ARMAGHAN BEHLUM: Ci andiamo. Questo è esattamente quello che ho voluto controllare. Freddo. Così, per esempio qui, vediamo. Mentre stiamo iterazione attraverso già i gesti, TOMAS REIMERS: Vuoi fare solo un file completamente nuovo? ARMAGHAN BEHLUM: completamente nuovo file? Sì, certo. 

TOMAS REIMERS: Sì. 

ARMAGHAN BEHLUM: Quindi cerchiamo di farlo. 

TOMAS REIMERS: Così stiamo andando per fare un completamente file. Lo chiameremo mano dot HTML. Questo è fresco con me. Quindi ricordate di fare un tag HTML, poi all'interno di quella di avere una testa. Quella testa ha un titolo all'interno di esso. Così scheda il contrario. Ci si va. Titolo, che chiameremo Leap Esempio. Yep. 

ARMAGHAN BEHLUM: Oops. Titolo. 

TOMAS REIMERS: Yep. 

ARMAGHAN BEHLUM: Ci siamo. 

TOMAS REIMERS: E allora facciamo un corpo. 

ARMAGHAN BEHLUM: Aspetta, andiamo anche fare in modo di importare. TOMAS REIMERS: Oh, certo. Il mio male. Quindi, sempre assicurarsi di avere il Leap script in modo che uno script dato a voi da Leap Motion che fondamentalmente permette al browser web per connettersi al dispositivo sul computer dell'utente. E poi in questo abbiamo anche bisogno di un corpo e diciamo solo rendere il corpo dice ciao così che siamo in grado di mostrare agli studenti come collegare a questo nuovo pagina web che hanno fatto. ARMAGHAN BEHLUM: Certo. Quindi cerchiamo di appena messo another-- 

TOMAS REIMERS: Ciao, ciao mondo. Così un esempio molto semplice. In realtà solo una demo. 

ARMAGHAN BEHLUM: E poi qui abbiamo può andare, abbiamo chiamato mano dot HTML, giusto? E oh! Allora mi chiedo che cosa c'è che non va con questo adesso. Aggiungiamo autorizzazioni di lettura a portata di mano dot HTML. TOMAS REIMERS: Volete a farlo nel grande terminal in modo che possiamo solo mostrare su the-- 

ARMAGHAN BEHLUM: Sì, che abbia un senso. Bene. Così ho solo aggiunto il i permessi, ma se erano di controllare le le autorizzazioni prima di noi avrebbe visto che in realtà la mano dot HTML non hanno permessi di lettura e quindi non abbiamo potuto renderla. Ma ora, se lo facciamo, vediamo il nostro piccolo mondo ciao proprio lì. 

TOMAS REIMERS: Quindi cerchiamo di realtà, mentre stava scrivendo, ciao mondo, Ho pensato a un modo potremmo cambiare questo. Facciamo che dire ciao mondo, e poi quando si onda, si dice addio. Giusto? Quindi ciao, arrivederci. 

ARMAGHAN BEHLUM: Certo. 

TOMAS REIMERS: Che suona bene. 

ARMAGHAN BEHLUM: Che suona bene anche a me. 

TOMAS REIMERS: Quindi, se siamo intenzione di farlo di lasciare solo pensare attraverso la pagina web un po '. Avremo bisogno di alcuni script che registra in pratica che si agitò e di un salto, un'onda e un colpo, stessa cosa. Quindi stiamo andando ad avere bisogno di uno script che registra fondamentalmente per questo colpo. E un'altra cosa che siamo andando ad avere bisogno è che siamo avranno bisogno di un po ' contenuto effettivo di cambiare. 

Quindi, come si ricorda, jQuery consente di modificare il contenuto. Così una cosa che potremmo voler includere in questo è la libreria jQuery. E poi poter selezionare quali stiamo davvero andando a modificare il contenuto, che sta andando a bisogno di un ID o di una classe, o qualcosa che possiamo utilizzare per selezionarlo. Quindi dovremo solo di fare un rapido ID del cambiamento del testo. E poi vuoi prendere jQuery? ARMAGHAN BEHLUM: Allora, qual è il primo cosa sulla nostra per fare la lista, allora adesso? TOMAS REIMERS: Facciamo afferrare jQuery? ARMAGHAN BEHLUM: LET'S afferrare jQuery, OK, fresco. In quel caso, ho intenzione avere a actually-- dove sarebbe il posto migliore per farlo? 

TOMAS REIMERS: jQuery, quindi se si Google jQuery, jQuery ha colpito, la prima ARMAGHAN BEHLUM: Molto prima. TOMAS REIMERS: o scaricare. Va bene. Hit scaricare v1 e v2 sulla sinistra. Quindi stiamo descrivendo jQuery da online come probabilmente avete fatto. Scorrere verso il basso. Up, up. 

ARMAGHAN BEHLUM: Oh, proprio qui ora? TOMAS REIMERS: O che. Yep. Così jQuery ha una versione hosted il che significa che non si fa realtà bisogno di scaricarlo, ma tu sei più di benvenuto per scaricarlo e ospitare voi stessi. ARMAGHAN BEHLUM: Cool. Così ora abbiamo jQuery. Ora che cosa è il prossimo sul nostro per fare la lista. TOMAS REIMERS: Awesome. Così la prossima cosa abbiamo bisogno fare è in realtà abbiamo bisogno di per dare p ciao mondo un ID in modo che possiamo cambiare, giusto? Quindi cerchiamo di dare un'idea di, Non lo so, cambiare il testo? ARMAGHAN BEHLUM: Diciamo solo farlo in questo modo, credo. TOMAS REIMERS: changeText, fresco. E ora facciamo solo aggiornare la pagina. Assicurarsi che tutto funziona. Ma torniamo nel browser. Freddo. Sempre un buon promemoria che quando si sta costruendo un sito web, probabilmente aggiornare ogni volta che fate qualsiasi cambiamento piuttosto significativo solo perché a volte si cadere accidentalmente un tag, o si elimina accidentalmente qualcosa, e poi si rompe qualcosa di piccolo, ma poi, quando si effettua un cambiamento più grande siete come, perché ha fatto questo grande cambiamento apparentemente rompere la cosa non correlato. Quindi è sempre bene ordinare di andare a fare quelle controlli di integrità. 

Comunque così ora facciamo un ultimo test di consistenza, che cerchiamo di cambiare testo senza Leap Motion, senza niente, solo sul caricamento della pagina che ll cambiare mondo ciao a addio utilizzando jQuery. Quindi, se vi ricordate espone jQuery questa funzione segno del dollaro, che possiamo passare al selettore CSS, cioè hashtag testo cambiamento, che seleziona l'elemento con un ID di cambiamento del testo. E poi stiamo andando per chiamare il metodo HTML sull'oggetto ritorna con il argomento di una addio stringa, che cambierà gli articoli HTML per dire addio. Impressionante. Che sembra piuttosto fresco. E ora, quando ci rinfreschiamo la pagina che stiamo andando a vedere cambia istantaneamente addio, giusto? Perché non aspetta nulla. Sorta di non appena quello script gestisce cambia di addio. Freddo. 

Così ora cerchiamo di avvolgere che in una funzione. Destra. Quindi stiamo andando a voler per fare una funzione. Ci chiamiamo addio. Quindi funzione addio è andando a prendere senza argomenti e non è davvero andando a restituire qualcosa. Ed è solo andare a farlo in JavaScript. Eccellente. Così la nostra funzione di addio ora modifica il testo di addio, giusto? Quindi questo ci dà un senso fondamentalmente cambiamento che il testo di addio quando abbiamo chiamato quella funzione. Giusto? Quindi questo è piuttosto fresco. 

ARMAGHAN BEHLUM: Beh, abbiamo può anche semplicemente fare in modo che ora, poiché non stiamo chiamando il funzione, se si aggiorna la pagina, notare non sta andando per modificare il testo. 

TOMAS REIMERS: Excellent. Così ora stiamo per iniziare per entrare in quella roba Leap che stavamo parlando. Così Armi, vuoi prendere da qui o? 

ARMAGHAN BEHLUM: Sì. Certo. Probabilmente ho intenzione di bisogno per verificare il tutto, ma per esempio ricordare abbiamo detto che volevamo per assicurarsi che in Opzioni abbiamo impostato abilitare gesti TOMAS REIMERS: Buona cattura. ARMAGHAN BEHLUM: per essere vero. E poi siamo stati raccomandando che voi ragazzi sarebbe eseguire ciclo dot salto, che come abbiamo detto in precedenza, ha due opzioni, un oggetto JSON che è le opzioni per come si desidera per configurare il Leap Motion per lavoro, e quindi una funzione che è andando a prendere un fotogramma come callback funzionano come Tomas stava dicendo. E quindi modificare quello che volete a che fare con quella funzione. 

Quindi passiamo in opzione e ora definiamo una funzione che porterà in un frame. E ora dobbiamo definire ciò che fa la funzione. E 'anche per il bene della futuro, farlo per assicurarsi. TOMAS REIMERS: Excellent. Così ora abbiamo questo funzione di loop dot salto chiamare che dice in sostanza guardare Leap con queste opzioni e ogni volta qualcosa cambia, chiamano questa Telaio funzione con tutti i dati che siete a conoscenza di un telaio. Suona abbastanza bene. Così ora sanity check veloce, che consiglio sempre, è in quel appena messo console telaio log dot. E poi in Chrome aprirlo e guardare la console e giocare con Leap per vedere il telai essere registrati perché quella volontà farsi un'idea di ciò che dati si ha accesso. E come sempre se si è confusi, cercare il riferimento API. E includeremo link per questo al fine di questo. 

ARMAGHAN BEHLUM: Così siamo aggiornare la pagina e poi andiamo e apriamo la console di nuovo. E ora ci accorgiamo che siamo avendo fotogrammi passati in, questi piccoli oggetti abbiamo visto in precedenza. Quindi sì. Questi sono i nostri telai mostrando nella console. Freddo. 

Quindi, ora che abbiamo afferrato il telai, come si potrebbe ricordare in precedenza dall'esempio che abbiamo avuto, se controlliamo gesti dot telaio otteniamo la lista di gesti che il telaio più recentemente catturato. Siamo in grado di controllare la lunghezza di tale matrice per vedere se Leap catturato eventuali gesti. Quindi, se questo array è maggiore di zero, allora abbiamo sappiamo che abbiamo delle cose da fare. 

Quindi cerchiamo di avvolgere che in una condizione if e ora qui ciò che sappiamo è che hanno visto un gesto, cerchiamo di agire su di esso. Quindi, ora che siamo qui noi avere un gesto di controllare. TOMAS REIMERS: Beh, la prima cosa è che non è solo un gesto, potrebbe essere altrettanti gesti. 

ARMAGHAN BEHLUM: Molto vero. TOMAS REIMERS: So per classico stile C qui Probabilmente dobbiamo provare a utilizzare un ciclo for. ARMAGHAN BEHLUM: Eccoci qui allora. Abbiamo deciso di iterare attraverso i gesti. E vediamo. i più, più. E ora, se abbiamo forse fatto solo un gesto var uguale gesti telaio dot Staffa i, ora abbiamo gesto in sé, che è solo uno singola istanza di un oggetto gesto per noi lavorare con all'interno di questo per ciclo. Bene. TOMAS REIMERS: sanità mentale di Let controllare di nuovo qui e solo consolare dot login gesto per vedere quello che si ottiene. 

ARMAGHAN BEHLUM: Console gesto log dot. Dokie Okie. E aggiornare ancora una volta. 

TOMAS Reimers: e andiamo provare a fare un gesto. Vedrai che un gruppo di, quando scorrere, si ottiene un sacco di gesti in console e se cerca di fare un cerchio, è solo-- 

ARMAGHAN BEHLUM: Circles sono solo veramente bello. 

TOMAS REIMERS: Ora c'è una cosa strana qui, che si sta facendo un cerchio, ma questo sta registrando 80 gesti, giusto? Questo è un sacco di gesti. Così il primo genere di cose a realizzare, e questo può essere fonte di confusione, è che un gesto non è solo una volta effettuato l'accesso. 

Su ogni fotogramma, a destra, quindi se sto facendo un cerchio Leap rileverà questo è un cambiamento, da questa è un cambiamento, da questo è un cambiamento. E sarà registrare ogni uno di quelli. Ma in ciascuno di questi, sta andando a dire, oh, c'è un gesto in corso. Quindi lasciatemi dire, ehi, c'è un gesto ed è attualmente in corso. Quindi, ciò che non vogliamo fare è dire, oh, su tutti di quei gesti che si vuole cambiare il testo. Quello che vogliamo fare è quando quel gesto si ferma, e siamo in grado di verificare la presenza di questo, allora vogliamo cambiare il testo. ARMAGHAN BEHLUM: Mhmm. Così come è Tomas spiegando questi gesti potrebbe apparire attraverso multiple telai, ma per esempio, quando ci hanno visto quel cerchio, si può vedere che l'ID per quello unico cerchio che abbiamo potrebbe essere stato il tentativo di completare era lo stesso ID tutta. E infatti, è anche possibile controllare lo stato. aggiornato. 

E allora questa è probabilmente la ultimo cerchio che, oh, beh, OK. Così a volte mostra una lo stato di fermare un gesto e si mostra anche lo stato di iniziare un nuovo gesto, quando riconosce per certo che hai iniziato un nuovo gesto. Ad esempio in questo caso. TOMAS REIMERS: Cool. ARMAGHAN BEHLUM: Quindi sì. E poi, vediamo. Si può anche notare anche se stavamo facendo un cerchio e il gesto ha un tipo di campo chiamato che ci dice che tipo del gesto che è. Così che potrebbe essere utile per noi si cerca di fare quello che stiamo facendo. TOMAS REIMERS: So transizione torna a JS, la prima cosa che mi viene in mente Inoltre, proprio attraverso la lettura di questo codice è c'è una piccola ottimizzazione, che è in realtà non hanno bisogno di questo se la condizione, giusto? Perché se i gesti telaio dot dot la lunghezza è zero, che per il ciclo di non andare a correre comunque. Quindi possiamo anche semplicemente andare avanti e sbarazzarsi di quella. Ancora una volta, mentre si sta scrivendo il codice è importante tornare indietro e ordinare di refactoring, come ti rendi conto che avrebbe potuto fare qualcosa di meglio, o che c'è un altro modo per farlo. Così ora stiamo solo andando a pulire questo rapidamente e anche ripulire il codice. Questo è un grosso problema. 

ARMAGHAN BEHLUM: Buono stile è molto apprezzato. 

TOMAS REIMERS: è possibile sempre sapere quando qualcuno ha codice in cui ha usato per essere un caso condizioni e poi rimosso, ma non decommentarla. E 'molto evidente e che tipo di sembra brutto. ARMAGHAN BEHLUM: Allora, qual è vicino al nostro per fare la lista? TOMAS REIMERS: Così ora come dicevamo, Credo che la prima cosa che vogliamo fare è fare in modo che quel gesto di in realtà un colpo, giusto? 

ARMAGHAN BEHLUM: Sì. 

TOMAS REIMERS: Quindi, se stiamo dicendo che il nostro addio è un po 'come un colpo, andremo con il suo un colpo, il prima cosa che dobbiamo dire è, hey, è il gesto di tipo un colpo, giusto? Non un cerchio o una parte superiore, ma è un colpo? Quindi il modo in cui possiamo farlo è possiamo dire gesto Tipo dot pari pari magnetica come una stringa. 

ARMAGHAN BEHLUM: [incomprensibile] gesto Tipo dot uguale uguale colpo. Ci siamo. 

TOMAS REIMERS: E poi l'ultima domanda vogliamo vedere è gesto dot stato di arresto pari pari, giusto? Ecco, questo è quando il gesto è stato fermato. Io in realtà penso di colpo, ho conoscere questo la parte superiore della mia testa, ma hai la possibilità di cercarlo, quando si scorrere ogni volta che lo registra fino a quando ci si ferma è un gesto di partenza. E poi l'ultimo del solo un gesto di arresto. Quindi ci sarà una sola fermata gesto, che è grande per noi. Che cosa possiamo fare è dire se il gesto dot digitare uguali uguali colpo e gesto dot stato pari pari fermare, poi lasciare di sanità mentale controllare qui consolare gesto log dot. 

Così ci torneremo qui. Ci aggiorna la pagina. E ora l'unica volta qualcosa deve essere dot console registrato è quando lo scorrimento. E cerchiamo di strisciare e si vede nulla. Giusto? Quindi questo è in realtà un grande problema. Noi non stiamo vedendo quello che ci aspettavamo a. E debugging può essere una grande parte di questo. Quindi la prima cosa che andremo dire è, OK, facciamo consolarli dot Login se gesto dot digitare uguali uguali colpo. ARMAGHAN BEHLUM: Sì, facciamolo. TOMAS REIMERS: Quindi siamo intenzione di tornare a questo. Ci rinfreschiamo. Ci scorrimento. E stiamo andando a vedere un gruppo di loro. OK. Così chiaramente il problema era con il nostro status gesto dot. Quindi, se ci apriamo uno di questi faremo Guardiamo negli oggetti e vedremo, bene, è una sosta, ma, oh, si chiama Stato, non lo stato. Quindi, se ci dirigiamo di nuovo a il nostro codice si può dire se il tipo di gesto dot uguale uguale colpo e fermata pari Stato gesto dot uguali, poi ci consoliamo dot registrarlo. E così aggiornare. Avviciniamo. E vedremo che su ogni colpo, siamo solo ottenere uno, che è il end, che è grande, giusto? Questo è quello che vogliamo. 

ARMAGHAN BEHLUM: Yep. E possiamo anche notare che gli ID per ciascuno di questi gesti sono separati. Così come Tomas diceva perché siamo catturare questo stato uno stop che esiste alla fine di un colpo, siamo ottenere i singoli gesti separati da Leap Motion. Grande. 

TOMAS REIMERS: Andiamo avanti e basta fare la cosa finale, che è, 

ARMAGHAN BEHLUM: Addio. 

TOMAS REIMERS: Awesome. E ora diamo un'occhiata nostro sito web. Uno 

ARMAGHAN BEHLUM: Second. Abbiamo fatto, sì, abbiamo chiamiamo Addio. Grande. 

TOMAS REIMERS: No, Goodbye è una funzione reale. 

ARMAGHAN BEHLUM: Sì. Facciamolo. 

TOMAS REIMERS: E quando onda addio, dice addio. 

ARMAGHAN BEHLUM: Abbiamo la vittoria. 

TOMAS REIMERS: roba così piuttosto eccitante. Speriamo che si può costruire qualcosa altro, ma si ottiene l'idea di, giusto? È possibile rilevare i gesti. È possibile chiamare le funzioni. E da quel che ti dà veramente alcuni blocchi molto fondamentali di costruzione per dire, oh, forse quando si scorrere verso l'alto, perché si può anche rilevare le cose direzione simile. Voglio che facciano qualcosa. O quando si Scorri a destra, I vogliono loro di fare qualcosa. E possiamo cominciare a ottenere creativo di come esattamente stiamo andando a migliorare il nostro sito utilizzando questi gesti magnetiche o cerchio gesti, o gesti toccare, o rubinetti o rubinetti schermo chiave. E poi diverso da quello che sei più che benvenuti a giocare con i dati effettivi, ma se si vuole fare che vi suggeriamo di andare alla documentazione perché sono effettivamente molto buono. Quindi testa alla documentazione ora. O vuoi parlare di questo? 

ARMAGHAN BEHLUM: Sì. Facciamolo. Anche un altro bocconcino di consiglio, provate e pensare a questo in 3D. Quindi in realtà cerchiamo di tirare su quei gesti ancora una volta registro dot console gesto e lo facciamo. Venite indietro e ora proviamo a paio di questi, un paio di quelli. 

Se andiamo in e il check out questi gesti così come si può vedere che sono dimensionalità è in tre direzioni, in realtà. Quindi non solo limitare a voi stessi di uno schermo 2D Anche se si potrebbe essere su un sito 2D. Si può provare a pensare come un utente potrebbe interagire con il sito in 3D. TOMAS REIMERS: In uno spazio 3D. ARMAGHAN BEHLUM: Esattamente. E sì. Così si ottiene direzioni, velocità, tutti questi bit fresco di informazioni. 

TOMAS REIMERS: E se non siete conoscenza che, va x, y, e poi z è questa ultima dimensione. Solo qualcosa che probabilmente si è familiarità con se avete affrontato 3D prima di coordinare i piani. Se non lo avete, è lo stesso di un 2D tranne c'è una terza dimensione. Noi lo chiamiamo z. E tutto, un po 'come direzione, che è dove sta andando, Position-- penso che potrebbe anche esporre accelerazione, non sono sicuro. 

ARMAGHAN BEHLUM: Sì, credo. Ha sicuramente velocità. Io non sono in realtà al 100% sicuro di accelerazione. 

TOMAS REIMERS: Può essere un'opzione è possibile passare a qualcosa. Così posizione e velocità sono esposti in questo genere di tre coordinate. Quindi x, y, z o delta x, y delta, delta z. Così ora guidato alla documentazione è developer.leapmotion.com e quindi è possibile fare clic Documentation. Ancora una volta, Leap Motion ha tutti questi meravigliosi API, uno per JavaScript, una per C Sharp e Unity, uno per C ++, uno per Java, uno per Python, e uno per l'obiettivo C. io personalmente sarebbe spingere verso Javascript o se si vuole imparare una nuova lingua, provare Python. Entrambi questi linguaggi con cui ho lavorato prima e sono veramente facile da imparare e già sapete JavaScript, che lo rende un ottimo contendente. 

Una parola di cautela quando si entra la documentazione. Assicurati di essere a Docs v2.0. Perché se siete su versione uno, non funzionerà. Anche per la galleria esempio. Abbiamo trascorso 30 minuti buoni cercando di debug nostro Leap prima ci siamo resi conto che V1 non funziona con V2. Quindi, solo assicurarsi che siete sulla versione a due. E poi io lo lascio mostrare i vostri i documenti. ARMAGHAN BEHLUM: Sì. Quindi, ecco la panoramica API e poi alcuni pezzi di informazioni che abbiamo già detto. Nice little galleggiante mani sopra un salto di movimento. E un promemoria per pensare dello spazio in 3D. Uno dei primi oggetti a cui pensare con Leap Motion sono le mani, naturalmente. Abbiamo visto quelli riconosciuti dal Visualizer. E allora si potrebbe avere visto che riconosciuto parte del polso e braccio ad esso associati. TOMAS REIMERS: Se si desidera per tirare su il Visualizer. ARMAGHAN BEHLUM: Sì, facciamolo di nuovo. TOMAS REIMERS: Si può vedere, sempre solo un buon promemoria per tipo di vedere, Visualizer cerca di mostrare tutti i dati che vede salto. Così vedrete che abbiamo questo genere di quattro punti per il polso e poi al polso reale. E hai anche questa palla al palmo della mano. Tutti questi sono punti riconoscono agli riconosciuto dal salto. 

ARMAGHAN BEHLUM: Esattamente. E così con quell'oggetto mano ogni frame ha una matrice mano come pure, dove è anche possibile ottenere la mano destra e sinistra. È possibile ottenere che direzione le mani sono rivolto con la normale Direzione del palmo, o come lo chiamano la palma normale. Che altro abbiamo? Inoltre, oops. Proviamo e scorrere verso il basso in questo modo. Le braccia, le dita sono rappresentata dal dito di classe, che è un oggetto orientabili. Così come dicevamo, abbiamo visto che serie di pointables per ogni mano. Quelli sono il piccolo dita a cui pensare. Quindi questa è una buona panoramica di andare attraverso cercare di capire. TOMAS REIMERS: [incomprensibile] mano anatomia lassù. ARMAGHAN BEHLUM: Sì, esattamente. Quindi sì. C'è un sacco di dati grezzi che la Leap Motion prende in interpreta bene per voi, quindi è un grande idea di andare da qui e cercare di capire come Leap ha già capito le cose per voi e così le informazioni che si avere a disposizione da lì. E poi da lì mi sento di raccomandare andando in questa sezione sinistra qui, che va, anche in realtà no, quelli sono in realtà solo più API roba about-- 

TOMAS REIMERS: Il riferimento API al fondo di solito è un buon posto dove andare. Voi ragazzi probabilmente visto questo quando abbiamo fatto la Google Maps PSET. Ma il riferimento davvero va solo attraverso tutti delle funzioni e dei parametri disponibile nell'oggetto per voi. 

ARMAGHAN BEHLUM: Sì. Per esempio, questo è ciò che Cercavo prima. Quando abbiamo una mano noi può andare e capire come Leap consiglia a noi trovare una mano. Come ho detto prima, abbiamo un array di mani. Scopri se abbiamo mani e poi cercare di afferrare una sola mano interagire con in questo modo. Ecco, questo è quello che abbiamo raccomandare per voi ragazzi. I gesti e cose così. Questa documentazione API sta per essere uno strumento fantastico per voi ragazzi. Avete altri suggerimenti? 

TOMAS REIMERS: non lo faccio. Penso che sia un bene per ora. 

ARMAGHAN BEHLUM: Sì, Credo di sì pure. Non esitate a contattarci via email ed ottenere in contatto su Leap Motion se hai forse eventuali problemi o bisogno di eventuali raccomandazioni. E possiamo cercare di capire cose con voi pure. Grazie. 

TOMAS REIMERS: Grande.