TOMAS REIMERS: Cool. Så hej, alle. Mit navn Tomas. Jeg er en TF, og dette er ARMAGHAN BEHLUM: Armi. Rart at se dig fyre. TOMAS REIMERS: Cool. Så vi kommer til at tale om Leap Motion i dag. Så Leap Motion er en virkelig cool produkt, lader dig interagere med et computer på en anden måde. Så hele idéen bag spring bevægelse er, at du kan bruge dine hænder til interagere med computeren. Så lige her jeg har noget sat op. Jeg vil tale om det i en smule. Men den grundlæggende version er du kan se, at jeg har mine hænder foran af min computer, og når jeg flytter dem, du får det analoge på computeren og du kan analysere dette. Du kan lave fagter. Du kan bruge dine hænder til interagere med computeren i ny og interessant måde. 

Tja, jeg faktisk først ønsker at passere til Armi til at vise dig nogle seje demoer af hvad nogle mennesker har gjort med dette. Og så vil vi tale om, hvordan du faktisk kode med dette. ARMAGHAN BEHLUM: Ja. Hej. Så som vi så, lille data her, men lad os se hvad nogle mennesker har gjort med dette. Så lad mig bare åbne dette eksempel. Og så, så, for eksempel, kan du se min hånd analog der, men nu er denne gang nogle mennesker, der bruger Unity har besluttet at sætte lidt mere hud og ting omkring hånden. Så jeg kan, lad os gå med denne ene, sikker, har mine hænder interagere. Og du kan sikkert forestille sig en par andre seje nyttige ting at du kan gøre med dette. Så det er mindst et eksempel. Og så lad os springe ud af dette. 

Og så en anden kølig én er, lad os gå med denne ene. Plasmo bold. Igen, ville vi ikke nødvendigvis forventer dette niveau af kompleksitet fra et afsluttende projekt for CS50. Dette er blot for at vise dig nogle af de, giver jer lidt inspiration til, hvad du fyre kan gøre med Leap Motion. Så for eksempel her er en cool fysik eksempel, som der vi gå. Har begge mine hænder, så nu er du har denne lille plasma bold. Og bolden reagerer på fysik af mig at flytte min hånd rundt om bolden. Nu er alle selvom at bruge Unity, hjælp slags værktøjer og rammer at vi ikke har lært du fyre i klassen, men som du kan se nogle ret køligt køre throughs med det. 

Men én ting, du fyre kan gøre starter ud lige nu med Leap Motion er arbejde i JavaScript. Leap Motion har en JavaScript API, du fyre kan bruge, og vi meget, meget anbefaler, at du fyre bygge dine projekter ved hjælp af det. Så med det, lad mig passere det tilbage ud til Tomas at tale om Leap Motion og JavaScript. TOMAS REIMERS: Cool. Eller har du lyst til at vise dem Visualizer først? 

ARMAGHAN BEHLUM: Åh ja. Ja. Lad os tale mere om det Visualizer. 

TOMAS REIMERS: Så på en mest basale niveau, når du først får til Leap Motion du vil have dette felt. Her vil have mig til at tage kontrol? 

ARMAGHAN BEHLUM: Ja, gå til den. 

TOMAS REIMERS: Så når du først kommer til Leap Motion du vil have dette felt. Det har en anordning, som ser noget som dette. Du sætter det ind i din computer, installere de nødvendige drivere, og så vil det som udgangspunkt blive oprettet. Så den nemmeste måde at sortere af aftale med Leap Motion er åbne dette program det installeres kaldet Leap Motion Visualizer. Og Visualizer er bogstaveligt talt hvad jeg viser her. Det giver dig mulighed for at se den skelet omrids af dine hænder. Og hvad Leap Motion fortolker dem som. Så Leap Motion bruger kameraet at sortere i se på dine hænder og så den forsøger at gætte, hvad grundlæggende skelet sammensætning, som du ser på skærmen er. Og det er, hvad det viser dig. ARMAGHAN BEHLUM: Hver enkelt lille punkt og ting, som du ser der er data, der er til rådighed for jer samt at bruge. Så du kan se, at det er opfange, at Tomas har fem fingre på hver disse forskellige fingre er også tilgængelige for dig som data point til brug i enhver ansøgning som du måske ønsker. Hvis du ønsker at se, om nogen laver en thumbs up du kan se, om deres fingre er krøllede og uanset om de er tommelfinger finger peger opad, eller hvis deres håndled eller håndfladen er og den slags ting. TOMAS REIMERS: Cool. Så du kan se nogle fagter det forstår bedre end andre. Husk, at det er at se på din hånd fra på et kamera fra bunden, så når du har dine hænder som dette det forstår dem fuldt ud, men når du begynder at forsøge at gøre en Tommelfinger op, nogle gange er det læser det, nogle gange kan det gætte, men ærligt kameraet kan bare ikke se tommelfingeren. Så det er ikke rigtig sikker på, hvad der sker. Blot nogle begrænsninger at huske på når du udvikler med dette. 

Anyway, så gå tilbage til denne. Den Visualizer faktisk har en masse nyttige værktøjer. Så Leap Motion er programmeret på en sådan måde at de ikke forventer du at interagere med denne billeddata. De gør ikke rigtig forventer du at forstå hvad der sker bag kulisserne. Hvad de gør, er eksponere en flok API'er for dig sådan, at du kan interagere med disse data direkte uden forståelse hvad der foregår under kølerhjelmen. 

Så hvis vi ramt H her i Visualizer vil du se en masse muligheder. Det vigtige ene her selv er, hvis du rammer O og derefter ramte H, vil du se, at det kan du tegne fagter. Så en gestus, vil du se det trækker en pil tværs. En gestus er en af ​​de måder, som Leap Motion slags lader dig komme på data uden at skulle behandle den. Så i stedet for mig at skulle regne ud, åh, hånden bevægede, selv om jeg har punkt adgang, den API vil slags bare fortælle mig, hey, de gjorde denne gestus. Så du kan foretage grundlæggende pil fagter. Du kan lave cirkel bevægelser. Du kan lave aflytning fagter. Og du kan gøre centrale pressen fagter. Ja. Og den slags ting. Så nu, at vi har en slags set, hvad Leap Motion kan gøre, du kan se det kan læse en hel masse fagter. Jeg tror, ​​jeg har tænkt mig at give det tilbage til Armi og han vil tale om, hvordan du får på disse med JavaScript, hvordan du selv begynder et projekt med dette. Og så vil vi tale om nogle cool steder du kan gå med det. ARMAGHAN BEHLUM: Ja. Lyder godt. Så ja, det allerførste, vi vil have dig til at gøre selvfølgelig, er når du får Leap Motion er at gå til leapmotion.com, sat op, installere drivere og kram. Efter gør, at du kan gå sørg for, at det er tilsluttet. Hvis du ser i dit lille bakke den Leap Motion ikon og det er grønt, så du ved, du er alle indstillet. Og selvfølgelig tjek præcis, hvad Tomas lige viste dig med fagter og gør skærmen vandhaner, og centrale vandhaner, og at type ting. 

Efter at selvom vi endnu en gang, som jeg sagde, vi har adgang til alle disse ting i JavaScript så godt. Den ideelle oprettet som Vi vil anbefale dig fyre er at gå ind i din vhost bibliotek, lokal vært, offentligheden i dit CS50 apparatet. Og når du går der, hvad du vil se er et indeks prik HTML-fil. Nu, indeks dot HTML-fil eller indeks dot PHP-fil, alt efter hvad der er fint, hvad kan du så gøre er at gå til din primære operativsystem. Og hvis du går til IP-adressen der er angivet i den nederste højre hjørne af dit apparat lige her, som du kan se, så hvad sker der er du går til den side, der er der refereres til af dette indeks dot HTML-fil. Så al den kode, som du kan sætte i der bliver sendt og er anvendeligt her. 

TOMAS REIMERS: Så det er også vigtigt bare for reference at hvis du fyre faktisk ved hvordan man opsætter en server selv, eller du ønsker at sætte dette på den verdensomspændende web, er du velkommen til at gøre hvad som helst. Husk, at disse er bare JavaScript-filer og alle Leap behandling sker på klienten. Så det er faktisk ligegyldigt hvor din server liv så længe computeren du ser hjemmesiden på har Leap Motion installeret. ARMAGHAN BEHLUM: Absolut. Ligesom Tomas sagde, yeah, hvad der virker for jer. Dette er blot en af ​​vores anbefalinger. Nu at begynde at bruge Leap Motion, hvad du ville gøre er du vil importere JavaScript-fil fra Leap Motion. Og så fra hvad der du kan gøre er, lige nu Jeg har kun dette stykke tag oprettet med et ID på tekst. Ting, som vi vil anbefale sætter controller muligheder for Leap Motion med sætte fagter til at være sandt. Så som standard dem gestus, vi viste dig gutter, cirklen, og nøgle tap, og aflæser, de vises ikke til jer som standard. Men vi anbefaler at bruge dem så du er ikke at genopfinde hjulet. Aktiver dem til sand, der passerer dem controller muligheder for at springe dot loop og du er alle indstillet til at gå. Fordi så du bare nødt definerede en anonym funktion der vil tage i en ramme fra Leap Motion og at rammen har alle de oplysninger, som du får brug for. 

TOMAS REIMERS: Så bare til opsummere, har du et objekt. Du har denne funktion kaldet spring dot loop. Og du kalder det med to argumenter. Du kalder det med en, controller indstillinger. Og der er en masse muligheder, du kan sætte i der. Den ene vi vil understrege er muligt fagter. Og hvis du sætter det lig sandt, så du kan få adgang til denne gestus at vi viste dig i Visualizer. 

Og så det andet argument er en funktion, det er lidt ligesom et opkald tilbage som vil blive kaldt hver tid hver ramme af Leap, så hver gang spring registre, din hånd træk, har det en ny ramme. Og det kalder denne funktion med én argument, som er rammen objekt. Og at ramme objekt beskriver rammen som Leap ser det. ARMAGHAN BEHLUM: Præcis. Så dette indeholder alle de nyttige stumper og stykker af information at vi talte om tidligere. Kontrol frame dot gestus er en vifte af fagter at springet bevægelse fanget din hænder gør i den sidste ramme. Altså for eksempel, hvad vi er gør her, er vi tjekker, hey, Leap, idet sidste ramme gjorde du fange eventuelle bevægelser, som jeg gjorde? Og hvis ja, hvad vi beslutter at gøre er gentage gennem disse bevægelser og forsøge at få nogle nyttige oplysninger fra dem. Hver gestus har en unik ID tilknyttet. De har typer. Du kan se på hvilke fingre var involveret i bevægelser ved at tjekke denne retningsindstillelige ting. Så hvis når du går gennem Leap Motion JavaScript API ting, når de nævner pointables, de taler om disse fingre. Og så hænder er naturligvis hele hånden objektet. 

Hvad ellers? Du kan kontrollere, hvor lang tid bevægelsen gik for og, ja, alle de nyttige ting. Så hvad jeg gør lige nu her er jeg logget rammen, og derefter opdatere jeg min HTML for at vise alle disse bits af information fra rammen. Så lad os se det ud. 

Så her er det. Her er indekset dot HTML-fil. Og som du lige har set, da jeg lige flyttet min hånd Leap fanget en cirkel bevægelse. Så du kan se mig gøre en cirkel på her, opdaterer med cirkel information. Doing aflæser, fangster aflæser. Lad os prøve en fane. Der vi går. Screen hanen og en vigtig tap. Så vigtige haner ligeledes med måde, er når du rammer ned. Så du kan forestille dig måske spiller et klaver. 

Og så betjening er når du rammer skærmen. Så du kan forestille dig, du måske faktisk har en berøringsskærm foran dig og du rammer den berøringsfølsomme skærm foran dig. Og så kan vi få fat i en af disse objekter i her. Så husk jeg sagde, at jeg var passerer rammen i konsollen log. Og så vi kan tjekke alle de stumper og stykker af information der er tilgængelige i at ramme samt at bruge. 

Som jeg sagde tidligere, pointables er fingrene. På det tidspunkt havde vi ikke vores hænder foran Leap Motion så det registreret nul, men dette er, hvordan du ville begynde at finde ud af måske hvor mange fingre er skærmen. Og denne type oplysninger. TOMAS REIMERS: og huske dette er blot et objekt. Så kan tilgås alt lidt ligesom en struct i C. Du har til formål navn dot ejendommen navn. Og så inden, at du har arrays og du har andre formål, men husk det er bare et objekt. Der er ikke noget særligt fordi vi bruger Leap. ARMAGHAN BEHLUM: Ja. Cool. Skal vi tjekke et par af JavaScript eksempler? 

TOMAS REIMERS: So hurtigt huske, at vi sagde, at Leap kan faktisk køre på enhver hjemmeside. LeapJS er blot tjente til en klient. Og så med som kunden har Leap Motion vedhæftet det vil virke. Så Leap Motion har en hjemmeside, hvor folk kan dele deres eksempel af ting, de har lavet. Så vi bare kommer til at gå gennem et par af dem for at se, hvad der er muligt inden dykning i flere specifikke oplysninger om, hvordan det er muligt. Så ARMAGHAN BEHLUM: Lad os se. TOMAS REIMERS: Nu skal arbejde. ARMAGHAN BEHLUM: Så nu før vi så et eksempel hjælp Unity, der gjorde vores hænder med temmelig imponerende grafiske skind, men nu kan du se, du kan gøre det samme ting i en webbrowser. Dette er alle inde Chrome bare ved hjælp af JavaScript. Og så den anden flot ting er, hvis du ønsker at vide, hvordan de gjorde dette, eksemplerne på JavaScript også indeholde kode valgmuligheder, du kan tjekke ud og derefter se hvordan denne person var sensationsprægede hænder og koder og sådan. 

Så det er alle kan du finde på developer.leapmotion.com. Du kan gå og tjek JavaScript eksempler, de har der. Så ja. Her er disse, oops sorry. Lad os prøve det igen. Oh. Jeg har to rigtige hænder. Så ja. 

TOMAS REIMERS: Så og igen, Husk undertiden Leap messer op. Bare giv det en anden. Det er ikke perfekt, men det er temmelig godt. ARMAGHAN BEHLUM: One andre anbefaling også er ikke at gøre det i direkte sollys. Så måde Leap Motion værker er, faktisk hvis jeg vise kameraet denne samt, infrarødt lys. Så det sender dem ud og derefter læser dem, når de kommer tilbage. Så hvis du forsøger at gøre det direkte sollys, for eksempel, er det nok ikke gå på arbejde, eller det vil kræve nogle kalibrering hertil. 

Også en anden anbefaling er at rydde rummet bag Leap og foran spring. Tænk på det som at arbejde inde i en kuppel, der er omkring denne Leap Motion objekt. Hvis der er ting højre bag det så godt, , der også kommer til at blande med hvordan Leap Motions forsøger at genkende din hånd og den slags ting. 

Så for eksempel, tror jeg i dette tilfælde er det min laptop faktisk der er slags at gøre Leap Motion. Ja, der vi gå. Så hvis jeg rydde min laptop fra bag det hånden dukker op temmelig godt. Så ja. Der er det. Så hvad gjorde vi viser dem. TOMAS REIMERS: Jeg tror ville nu være tid at sortere af dykke ned og lad os bare lave en demo helt fra bunden. Det kommer til at være virkelig simpelt. Dybest set, hvad vi vil at forsøge at gøre, er at gøre det så når du swipe din side baggrund kommer til at starte ud som rød, og når du swipe din side baggrund kommer til at blive grøn. OK? Meget simpelt. Og det er dybest set bare vil gå igennem en masse af de begreber bag Leap så vi kan komme ind i denne ideologi hvordan Leap værker og hvordan vi kan bygge ting med det. Og så derfra vi får nok bare vise dig API Docs og hvor du kan læse mere om dette. Og så vil vi kalde det dag. Så har du lyst til at kode eller vil du have mig til at kode? ARMAGHAN BEHLUM: Ja. Nå, jeg tror vi kan arbejde sammen om dette og forsøge 

TOMAS REIMERS: så vi gøre nogle par kodning. ARMAGHAN BEHLUM: Der vi går. Det er præcis, hvad jeg ønskede at checke. Cool. Så for eksempel i her, lad os se. Mens vi iteration gennem gestus allerede, TOMAS REIMERS: Vil du gøre bare en helt ny fil? ARMAGHAN BEHLUM: Helt ny fil? Ja, helt sikkert. 

TOMAS REIMERS: Ja. 

ARMAGHAN BEHLUM: Så lad os gøre det. 

TOMAS REIMERS: Så vi vil at foretage en fuldstændig fil. Vi kalder det hånd prik HTML. Det er cool med mig. Så husk du gør en HTML-tag, derefter inden, at du har et hoved. At hoved har en titel inden for den. Så fane den anden vej. Der du går. Titel, vil vi kalde det Leap eksempel. Yep. 

ARMAGHAN BEHLUM: Ups. Titel. 

TOMAS REIMERS: Yep. 

ARMAGHAN BEHLUM: Der er vi. 

TOMAS REIMERS: Og så lad os lave et organ. 

ARMAGHAN BEHLUM: Vent, lad os også sørge for at importere. TOMAS REIMERS: Åh, selvfølgelig. Min dårlige. Så altid sørge for du har den Leap script så det er et script, du har fået af Leap Motion som dybest set tillader webbrowseren til at oprette forbindelse til enheden på brugerens computer. Og så i dette vi også har brug for en krop og lad os bare gøre kroppen sige hej så at vi kan vise de studerende hvordan man kan forbinde til denne nye webside, som de gjorde. ARMAGHAN BEHLUM: Sure. Så lad os bare sætte another-- 

TOMAS REIMERS: Hej, hej verden. Så en meget grundlæggende eksempel. Virkelig bare en demo. 

ARMAGHAN BEHLUM: Og så her vi kan gå til, vi kaldte det hånd dot HTML, ret? Og oh! Så jeg spekulerer på, hvad der er galt med dette lige nu. Lad os tilføje læserettigheder til hånd dot HTML. TOMAS REIMERS: Ønsker du at gøre det i den store terminal så vi bare kan vise det på til-- 

ARMAGHAN BEHLUM: Ja, det giver mening. Ok. Så jeg har lige tilføjet det tilladelser, men hvis vi skulle tjekke tilladelser før vi ville have set, at der faktisk hånd dot HTML havde ikke læserettigheder og derfor kunne vi ikke gøre det. Men nu, hvis vi gør det, ser vi vores lille hello verden lige der. 

TOMAS REIMERS: Så lad os faktisk, da han skrev, hej verden, Jeg tænkte en måde vi kunne ændre dette. Lad os gøre det sige goddag verden, og så når du vifter, det siger farvel. Right? Så hej, farvel. 

ARMAGHAN BEHLUM: Sure. 

TOMAS REIMERS: Det lyder ret godt. 

ARMAGHAN BEHLUM: At lyder godt for mig, også. 

TOMAS REIMERS: Så hvis vi er vil gøre, lad os bare tænke igennem websiden en lille smule. Vi får brug for nogle script som dybest set registrerer at du vinkede og i Leap, en bølge og en knalde, samme ting. Så vi kommer til at bruge en script, dybest set registrerer for at knalde. Og en anden ting er vi vil få brug for, er vi er vil få brug for nogle faktiske indhold ændres. 

Så som du kan huske, jQuery giver dig mulighed for at ændre indhold. Så en ting, vi måske ønsker at inkludere i denne er jQuery biblioteket. Og så at være i stand til at vælge, hvad vi faktisk kommer til at ændre indhold, der kommer til at bruge et id eller en klasse, eller noget at vi kan bruge til at vælge den. Så vi vil bare give det en hurtig ID ændring tekst. Og så vil du få fat i jQuery? ARMAGHAN BEHLUM: Så hvad er det første ting på vores opgaveliste så nu? TOMAS REIMERS: Lad os få fat i jQuery? ARMAGHAN BEHLUM: Lad os grab jQuery, OK, cool. I så fald vil jeg at skulle actually-- hvor ville være det bedste sted at gøre det? 

TOMAS REIMERS: jQuery, så hvis du Google jQuery, ramte jQuery, den første ARMAGHAN BEHLUM: Meget første. TOMAS REIMERS: Eller download. Det er fint. Hit download-V1 og V2 til venstre. Så vi beskriver jQuery fra online, ligesom du har sikkert gjort. Rul ned. Op, op. 

ARMAGHAN BEHLUM: Åh, lige her nu? TOMAS REIMERS: Eller det. Yep. Så jQuery har en hosted udgave hvilket betyder, at du faktisk ikke nødt til at hente det, men du er mere end velkommen til at downloade det og vært for det selv. ARMAGHAN BEHLUM: Cool. Så nu har vi jQuery. Nu, hvad er næste på vores opgaveliste. TOMAS REIMERS: Awesome. Så næste hvad vi har brug for gøre, er vi faktisk har brug for at give p hello verden et ID så vi kan ændre det, ikke? Så lad os give en idé om, Jeg ved det ikke, ændre tekst? ARMAGHAN BEHLUM: Lad os bare gøre det på denne måde, tror jeg. TOMAS REIMERS: changeText, cool. Og lad os nu bare opdatere siden. Sørge for alt fungerer. Så tilbage i browseren. Cool. Altid en god påmindelse om, at når du bygger en hjemmeside, sandsynligvis opdatere hver gang du gør enhver noget signifikant ændring bare fordi nogle gange du kommer til at tabe et tag, eller du ved et uheld slette noget, og så du bryde noget små, men så når du laver en større ændring du er ligesom, hvorfor gjorde denne store forandring tilsyneladende bryde den uafhængige ting. Så det er altid godt at slags gå og gøre disse sundhedstjek. 

Alligevel så lad os nu gøre en sidste tilregnelighed check, som lad os prøve at ændre teksten uden Leap Motion, uden noget, bare på siden belastning det vil ændre hej verden til farvel hjælp jQuery. Så hvis du kan huske jQuery udsætter denne dollartegn funktion, som vi kan passere CSS selector til, nemlig hashtag forandring tekst, som vælger elementet med et ID ændring tekst. Og så vil vi at kalde metoden HTML på objektet returnerer med argument af en streng farvel, som vil ændre elementerne HTML for at sige farvel. Awesome. Det forekommer temmelig cool. Og nu når vi opdatere den side, vi kommer til at se det øjeblikkeligt skifter til farvel, ikke? Fordi det ikke vente noget. Slags så snart script kører det ændrer det til farvel. Cool. 

Så lad os nu wrap, at i en funktion. Right. Så vi kommer til at have at gøre en funktion. Vi kalder det farvel. Så funktion farvel er kommer til at tage nogen argumenter og det er ikke rigtig vil returnere noget. Og det bare at gå til gøre det i JavaScript. Excellent. Så vores funktion farvel nu ændrer teksten til farvel, ikke? Så det giver os en måde til stort set ændring at teksten til farvel, når vi kaldte denne funktion. Right? Så dette er ret cool. 

ARMAGHAN BEHLUM: Godt, vi kan også bare være sikker at nu da vi ikke kalder det funktion, hvis vi opdatere siden, mærke det kommer ikke til at ændre teksten. 

TOMAS REIMERS: Excellent. Så nu vil vi starte at komme ind i denne Leap stuff at vi talte om. Så Armi, vil du tage det herfra, eller? 

ARMAGHAN BEHLUM: Ja. Sure. Jeg er nok vil få brug for at dobbelttjekke ting, men for eksempel huske vi sagde vi ønskede at sørge for i Options vi sat aktivere gestus TOMAS REIMERS: God fangst. ARMAGHAN BEHLUM: at være sandt. Og så blev vi anbefale at du fyre ville køre spring dot loop, som som vi tidligere har sagt, har to muligheder, en JSON objekt, er mulighederne for, hvordan du vil at konfigurere Leap Motion til arbejde, og derefter en funktion, der er kommer til at fange en ramme som en tilbagekald funktion som Tomas sagde. Og derefter redigere, hvad du vil at gøre med denne funktion. 

Så vi går i mulighed, og nu vi definerer en funktion, som vil tage i en ramme. Og nu er vi nødt til at definere hvad denne funktion gør. Det er også af hensyn til den fremtid, gør det for at sikre. TOMAS REIMERS: Excellent. Så nu har vi denne spring dot loop funktion ringe som dybest set siger se Leap med disse muligheder, og hver gang noget ændringer, kalder dette funktion ramme med alle data at du er opmærksom på i ramme. Lyder temmelig godt. Så nu hurtig sanity check, som jeg anbefaler altid, er i den bare sætte konsol dot log ramme. Og så i Chrome åbne den op og se på din konsol og lege med Leap at se rammer at være logget fordi det vil får du en idé om, hvad data, du har adgang til. Og som altid, hvis du bliver forvirret, se op API reference. Og vi vil omfatte linket for, at der ved slutningen af ​​denne. 

ARMAGHAN BEHLUM: Så vi opdatere siden og derefter vi gå og åbne konsollen igen. Og nu ser vi, at vi er der rammer bestået i, disse små genstande, vi så tidligere. Så ja. Det er vores rammer dukke op i konsollen. Cool. 

Så nu, at vi har greb frames, som du måske husker tidligere fra det eksempel, at vi havde, hvis vi kontrollere frame dot gestus vi få listen over gestus, rammen senest fanget. Vi kan kontrollere længden af ​​denne matrix at se, om Leap fanget nogen fagter. Så hvis det array er større end nul så vi ved, at vi har nogle ting at gøre. 

Så lad os wrap det op i en hvis betingelse og nu her, hvad vi ved, er vi har set en gestus, lad os handle på det. Så nu, at vi er i her vi have en gestus til at tjekke. TOMAS REIMERS: Nå, den første ting er det ikke bare en gestus, det kunne være så mange fagter. 

ARMAGHAN BEHLUM: Meget sandt. TOMAS REIMERS: So pr klassisk C stil her Vi vil sikkert gerne bruge en for-løkke. ARMAGHAN BEHLUM: Her er vi så. Vi besluttede at gentage gennem fagter. Og lad os se. jeg plus, plus. Og nu, hvis vi måske gjort bare en var gestus lig ramme dot gestus beslag i, nu har vi gestus selv, som er blot en enkelt forekomst af en gestus objekt for os at arbejde med Indersiden af ​​for-løkken. Ok. TOMAS REIMERS: Lad os tilregnelighed tjek her igen og bare trøste dot log gestus for at se, hvad vi får. 

ARMAGHAN BEHLUM: Konsol dot log gestus. Okie dokie. Og opdatere en gang til. 

TOMAS Reimers: Og lad os prøve at lave en gestus. Du vil se, at en flok af, da han aflæser, du får en masse bevægelser i konsol og hvis han forsøger at gøre en cirkel, det er bare-- 

ARMAGHAN BEHLUM: Circles er bare virkelig rart. 

TOMAS REIMERS: Nu er der en underlig ting her, som er han laver en cirkel, men det er at logge 80 fagter, ikke? Det er en masse fagter. Så den første slags ting til indse, og det kan være forvirrende, er, at en gestus er ikke bare logget gang. 

På hver frame, højre, så hvis jeg gør en cirkel Leap vil detektere dette er en ændring, fra dette er en ændring, fra det er en forandring. Og det vil logge hver enkelt af dem. Men i hver enkelt af dem, det vil sige, åh, der er en gestus øjeblikket i gang. Så lad mig blot sige, hey, er der en gestus, og det er på nuværende tidspunkt i gang. Så det, vi ikke ønsker at gøre, er at sige, åh, på hver enkelt af disse bevægelser, du ønsker at ændre teksten. Det, vi ønsker, er, når det gestus stopper, og vi kan kontrollere for det, så vi ønsker at ændre teksten. ARMAGHAN BEHLUM: Mhmm. Så ligesom Tomas er forklare disse bevægelser kan forekomme gennem flere rammer, men for eksempel, når vi havde at cirkel, kan vi se at ID for at man enkelt cirkel, vi måske har forsøgt at fuldføre var den samme ID overalt. Og i virkeligheden, kan du også tjek status. opdateret. 

Og så er det nok den sidste cirkel,, åh, ja, OK. Så nogle gange er det viser dig en status som at stoppe en gestus og det viser dig også en status for at starte en ny gestus når anerkender sikkert, at du har startet en ny gestus. For eksempel i dette tilfælde. TOMAS REIMERS: Cool. ARMAGHAN BEHLUM: Så ja. Og så, lad os se. Du kan også mærke selvom vi gjorde en cirkel og gestus har et felt kaldes typen der fortæller os, hvad slags af gestus, der er. Så der kan være nyttigt for os du forsøge at gøre, hvad vi laver. TOMAS REIMERS: So skifter tilbage til JS, det første, der falder mig også, bare læse gennem denne kode er der en lille optimering, der er vi faktisk har ikke brug for dette, hvis betingelse, ikke? For hvis ramme dot fagter dot Længden er nul, at for løkke s ikke kommer til at køre alligevel. Så vi kan lige så godt bare gå videre og slippe af med det. Igen, mens du skriver kode er det vigtigt at gå tilbage og sortere af refactor som du indser, at du kunne have gjort noget bedre, eller at der er en anden måde at gøre det. Så nu er vi bare kommer til at rense denne hurtigt op og også rydde op i din kode. Det er en big deal. 

ARMAGHAN BEHLUM: God stil er meget værdsat. 

TOMAS REIMERS: Du kan altid fortælle, når nogen har kode, hvor der plejede at være en hvis tilstand og derefter de fjernede det, men de ikke afkommentere det. Det er meget tydeligt, og den slags ser grimt. ARMAGHAN BEHLUM: Så hvad er næste på vores opgaveliste? TOMAS REIMERS: Så nu da vi sagde, Jeg gætte den første ting, vi ønsker at gøre er at sikre, at denne gestus er faktisk en knalde, ikke? 

ARMAGHAN BEHLUM: Ja. 

TOMAS REIMERS: Så hvis vi siger, at vores farvel er lidt ligesom en knalde, vi vil gå med det er en knalde, den første ting, vi skal sige, er, hey, er gestus skrive en knalde, ikke? Ikke en cirkel eller en top, men er det en knalde? Så den måde, vi kan gøre det er vi sige gestus dot typen lig lige knalde som en streng. 

ARMAGHAN BEHLUM: [uhørligt] gestus dot typen lig lig knalde. Der vi er. 

TOMAS REIMERS: Og så det sidste spørgsmål vi ønsker at se er gestus prik tilstand lig lige stop, right? Så det er, når gestus er blevet stoppet. Jeg tror faktisk for knalde, jeg vide dette fra toppen af ​​mit hoved, men du er velkommen til at slå det op, når du knalde hver gang det registrerer det indtil du stopper er en begyndelse gestus. Og derefter sidste ens blot et stop gestus. Så der vil kun være én stop gestus, som er fantastisk for os. Så det, vi kan gøre, er at sige, hvis gestus dot skriv lige lige swipe og gestus dot status lige lige stop, så lad os tilregnelighed tjek her trøste dot log gestus. 

Så vi vil gå tilbage her. Vi opdatere siden. Og nu den eneste gang noget skulle være konsol dot logget er, når vi knalde. Og vi forsøger at knalde, og vi ser ikke noget. Right? Så det er faktisk et stort problem. Vi kan ikke se, hvad vi forventes at. Og debugging kan være en stor del af dette. Så det første, vi skal hen at sige, er, OK, lad os trøste prik log det, hvis gestus dot skriv lige lige knalde. ARMAGHAN BEHLUM: Ja, lad os gøre det. TOMAS REIMERS: Så er vi kommer til at gå tilbage til denne. Vi opdatere. Vi knalde. Og vi kommer til at se en masse af dem. OK. Så klart problemet var med vores gestus dot status. Så hvis vi åbner en af ​​disse vi får ser i objekter og vi vil se, godt, det er et stop, men, åh, det hedder tilstand, ikke status. Så hvis vi hovedet tilbage til vores kode kan vi sige hvis gestus dot typen lige lige knalde og gestus dot tilstand lig lige stop, så vil vi trøste prik logge det. Og så opdatere. Vi knalde. Og vi vil se, at på hver knalde, vi er kun få en, som er ende, hvilket er fantastisk, ikke? Det er, hvad vi ønsker. 

ARMAGHAN BEHLUM: Yep. Og vi kan også se, at de ID'er til hver af disse bevægelser er adskilt. Så som Tomas sagde, fordi vi er fange denne one-stop tilstand, findes i slutningen af ​​en swipe, vi er få individuelle separate gestus fra Leap Motion. Store. 

TOMAS REIMERS: Lad os gå videre og bare gøre det sidste ting, som er, 

ARMAGHAN BEHLUM: Farvel. 

TOMAS REIMERS: Awesome. Og lad os nu tjekke vores hjemmeside. En 

ARMAGHAN BEHLUM: Anden. Vi, yeah, vi kalder det Farvel. Store. 

TOMAS REIMERS: Nej, Goodbye er en reel funktion. 

ARMAGHAN BEHLUM: Ja. Lad os gøre det. 

TOMAS REIMERS: Og når vi vinke farvel, det siger farvel. 

ARMAGHAN BEHLUM: Vi har sejren. 

TOMAS REIMERS: Så temmelig spændende ting. Forhåbentlig kan du bygge noget andet, men du får den ide om, ikke? Du kan registrere bevægelser. Du kan ringe til funktioner. Og fra at der virkelig giver dig nogle meget fundamentale byggesten at sige, åh, måske når de knalde op, fordi du også kan registrere ting lignende retning. Jeg vil have dem til at gøre noget. Eller når de knalde til højre, jeg vil have dem til at gøre noget. Og vi kan begynde at få kreativ med, hvordan netop vi kommer til at forbedre vores hjemmeside bruge disse knalde fagter eller cirkel fagter eller trykke fagter, enten nøgle haner eller betjening. Og så andre end du er mere end velkommen til at spille med de faktiske data, men hvis du vil gøre at vi ville foreslå du gå til docs fordi de er faktisk rigtig god. Så ledes til docs nu. Eller har du lyst til at tale om det? 

ARMAGHAN BEHLUM: Ja. Lad os gøre det. Også en anden tidbit af rådgivning, prøv og tænk på dette i 3D. Så faktisk lad os trække disse fagter en mere tid konsol dot log gestus og vi gør det. Kom tilbage og lad os nu prøve en par af disse par af disse. 

Hvis vi går ind og tjek disse bevægelser samt som du kan se, at de er dimensionalitet er i tre retninger, faktisk. Så du skal ikke bare begrænser dig selv med en 2D-skærm selvom du måske være på en 2D hjemmeside. Du kan prøve og tænke, hvordan en bruger kan interagere med hjemmesiden i 3D. TOMAS REIMERS: I en 3D-rum. ARMAGHAN BEHLUM: Præcis. Og ja. Så du får retninger, hastigheder, alle disse seje stumper af information. 

TOMAS REIMERS: Og hvis du ikke bekendt med, at det går x, y, og derefter z er denne sidste dimension. Bare noget, som du sikkert er fortrolig med, hvis du har behandlet 3D koordinere fly før. Hvis du ikke har, det er det samme som en 2D andre end der er en tredje dimension. Vi kalder det z. Og alt, lidt ligesom retning, som er, hvor det går, position-- Jeg tror, ​​det kan endda udsætte acceleration, jeg er ikke sikker. 

ARMAGHAN BEHLUM: Ja, jeg tror. Det har helt sikkert hastighed. Jeg er faktisk ikke 100% sikker på om acceleration. 

TOMAS REIMERS: Det kan være en mulighed du kan give videre til noget. Så position og hastighed er udsat i disse slags tre koordinater. Så x, y, z eller delta X, delta y, delta z. Så nu ledes til dokumentation det er developer.leapmotion.com og så kan du klikke på Dokumentation. Igen, Leap Motion har alle disse vidunderlige API'er, en for JavaScript, én for C Sharp og Enhedslisten, en for C ++, en for Java, en for Python, og én for mål C. jeg personligt ville skubbe dig i retning af JavaScript eller hvis du ønsker at lære et nyt sprog, prøv Python. Begge af disse sprog jeg har arbejdet med før og de er virkelig let at lære og du allerede kender JavaScript, som gør det til en rigtig god contender. 

Et advarende ord når du indtaster docs. Sørg for at du er på Docs v2.0. For hvis du er på udgave en, vil det ikke fungere. Også for eksempel galleri. Vi brugte en godt 30 minutter forsøger debug vores Leap før vi indså, at V1 virker ikke med V2. Så bare sørg for du er på version to. Og så vil jeg lade ham vise dine docs. ARMAGHAN BEHLUM: Ja. Så her er API overblik og derefter nogle stumper og stykker af information at vi allerede har fortalt dig. Fin lille flydende hænder over en Leap Motion. Og en påmindelse om at tænke om rum i 3D. En af de første ting at tænke på med Leap Motion er hænder, selvfølgelig. Vi så dem, der anerkendes af Visualizer. Og så skal du måske have set, at det anerkendes del af håndleddet og arm forbundet med det. TOMAS REIMERS: Hvis du vil have at trække op Visualizer. ARMAGHAN BEHLUM: Ja, lad os gøre det igen. TOMAS REIMERS: Du kan se, altid bare en god påmindelse om at slags se, Den Visualizer forsøger at vise alle de data, Leap ser. Så vil du se, at vi har disse slags fire punkter ved håndleddet og derefter selve håndleddet. Og du har også denne bold på håndfladen. Alle disse er punkter genkende anerkendt af spring. 

ARMAGHAN BEHLUM: Præcis. Og så med den hånd objekt hver ramme har en hånd-array samt hvor du kan også få venstre og højre hånd. Du kan få der retning hænderne er vender med den normale retning af håndfladen, eller som de kalder det håndfladen normal. Hvad har vi? Vi har også, oops. Lad os prøve at rulle ned på denne måde. Armene, fingrene er repræsenteret ved finger klasse, som er en retningsindstillelige objekt. Så ligesom vi sagde, så vi, at vifte af pointables for hver hånd. Det er den lille fingre til at tænke over. Så dette er et godt overblik til at gå gennem at forsøge at forstå. TOMAS REIMERS: [uhørligt] hånd anatomi deroppe. ARMAGHAN BEHLUM: Ja, præcis. Så ja. Der er en masse af rå data, som Leap Motion tager i fortolker godt for dig, så det er en stor idé at gå igennem her og forsøge at finde ud af, hvordan Leap har allerede regnet tingene ud for dig og så hvilke oplysninger du har til rådighed derfra. Og så derfra vil jeg anbefale går ind i denne venstre del herovre, der går, godt faktisk ingen, der er faktisk bare mere API ting om-- 

TOMAS REIMERS: API henvisning bunden er normalt et godt sted at gå. Du fyre sandsynligvis så dette når vi gjorde Google Maps Pset. Men henvisningen virkelig bare går gennem alle af funktioner og parametre tilgængelige i objektet til dig. 

ARMAGHAN BEHLUM: Ja. For eksempel er det, hvad Jeg var på udkig efter før. Når vi har en hånd, vi kan gå og finde ud af hvordan Leap anbefaler til os at finde en hånd. Som jeg sagde tidligere, vi har en hands array. Find ud af om vi har hænder og så prøv og få fat i en enkelt hånd at interagere med på denne måde. Så det er, hvad vi anbefale til jer. De fagter og kram så godt. Denne API dokumentation vil være et fantastisk værktøj for jer. Har du andre anbefalinger? 

TOMAS REIMERS: Jeg gør ikke. Jeg tror, ​​det er godt for nu. 

ARMAGHAN BEHLUM: Ja, Det tror jeg også. Du er velkommen til at kontakte os og få i kontakt om Leap Motion hvis du har måske nogen problemer eller har brug for eventuelle anbefalinger. Og vi kan forsøge at finde ting ud med jer så godt. Tak. 

TOMAS REIMERS: Great.