TOMAS REIMERS: Cool. Så hej, alla. Mitt namn är Tomas. Jag är en TF och detta är ARMAGHAN BEHLUM: Armi. Trevligt att se er. TOMAS REIMERS: Cool. Så vi kommer att prata om Leap Motion idag. Så Leap Motion är en riktigt cool produkt som låter dig interagera med en dator på ett annat sätt. Så hela idén bakom Leap Motion är att du kan använda händerna till interagera med datorn. Så här har jag något inrättas. Jag ska prata om det i en bit. Men den grundläggande versionen är att du kan se att jag har mina händer framför av min dator och när jag flyttar dem, du får den analoga på datorn och du kan analysera detta. Du kan göra gester. Du kan använda dina händer för att interagera med datorn i ny och intressant sätt. 

Tja, jag faktiskt först vill förlöpa till Armi visa några häftiga demonstrationer av vad vissa människor har gjort med detta. Och sedan ska vi prata om hur du faktiskt koda med detta. ARMAGHAN BEHLUM: Yeah. Hej. Så när vi såg, lite uppgifter här, men låt oss se vad vissa människor har gjort med detta. Så låt mig bara öppna upp det här exemplet. Och sedan, så till exempel kan du se min hand analog där, men nu denna gång vissa människor använder Unity har beslutat att lägga lite mer hud och sånt runt handen. Så jag kan, låt oss gå med här, säker, har mina händer interagera. Och du kan nog tänka sig en par andra coola användbara saker att du kan göra med detta. Så detta är åtminstone ett exempel. Och sedan ska vi hoppa ut ur detta. 

Och sedan en annan cool en är, låt oss gå med här. Plasmo boll. Igen, vi skulle inte nödvändigtvis förvänta sig denna nivå av komplexitet från ett slutprojekt för CS50. Detta är bara för att visa dig några av, ger ni lite inspiration för vad ni kan göra med Leap Motion. Så till exempel här är en cool fysik exempel där det går vi. Har båda mina händer så nu har denna lilla plasma boll. Och bollen reagerar på fysiken om mig flytta min hand runt bollen. Nu är det här allt om du använder Unity, använder typ av verktyg och ramverk att vi inte har lärt ni i klassen, men som ni kan se några ganska coolt run ingar med det. 

Men en sak som ni kan göra man börjar just nu med Leap Motion är arbete i JavaScript. Leap Motion har en JavaScript API som ni kan använda och vi mycket, mycket rekommenderar att ni bygger dina projekt som använder det. Så med det, låt mig ge det tillbaka ut till Tomas att prata om Leap Motion och JavaScript. TOMAS REIMERS: Cool. Eller vill du visa dem Visualizer först? 

ARMAGHAN BEHLUM: Oh ja. Ja. Låt oss tala mer om det Visualizer. 

TOMAS REIMERS: Så på en mest grundläggande nivå, när du först kommer till Leap Motion du kommer att ha den här rutan. Här, vill att jag ska ta kontroll? 

ARMAGHAN BEHLUM: Ja, gå för det. 

TOMAS REIMERS: Så när du först komma till Leap Motion du kommer att ha den här rutan. Den har en anordning som ser ut ungefär så här. Du ansluter den till din dator, installera nödvändiga drivrutiner, och då kommer det i princip att inrättas. Så det enklaste sättet att sortera av affär med Leap Motion är öppna detta program installerar kallas Leap Motion Visualizer. Och Visualizer är bokstavligen vad jag visar här. Det gör att du kan se skelett konturerna av dina händer. Och vad Leap Motion tolkar dem som. Så Leap Motion använder kameran att sortera av titt på dina händer och sedan den försöker gissa vad den grundläggande skelett sammansättning som du ser på skärmen är. Och det är vad det visar. ARMAGHAN BEHLUM: Varje enda lilla punkten och det som du ser det finns data som finns tillgänglig för er killar samt att använda. Så du ser att det är fånga att Tomas har fem fingrar, var och en av dessa olika fingrar är också tillgängliga för dig som data punkter att använda oavsett program som du kanske vill. Om du vill se om någon gör en tummen upp Du kan se om deras fingrar är böjda och om de är tumme finger pekar uppåt, eller där sin handled eller palm är och den typen av saker. TOMAS REIMERS: Cool. Så du kan se några gester det förstår bättre än andra. Kom ihåg, att det är att titta på din hand från vid en kamera från botten, så när du har dina händer som detta den förstår dem fullt ut, men när du börjar att försöka göra en tummen upp, ibland läser det, ibland kan gissa, men ärligt kameran kan bara inte se tummen. Så det är inte riktigt säker på vad som händer. Bara några begränsningar att tänka på När du utvecklar med detta. 

Hur som helst, så gå tillbaka till detta. Den Visualizer faktiskt har mycket användbara verktyg. Så Leap Motion är programmerad på ett sådant sätt att de inte förväntar sig att du ska interagera med att bilddata. De vet inte riktigt förväntar dig att förstå vad som händer bakom kulisserna. Vad de gör är utsätta ett gäng API för dig så att du kan interagera med dessa data direkt utan att förstå vad som händer under huven. 

Så om vi slog H här i Visualizer ser du en massa alternativ. Den viktigaste här men är om du träffar O och då slå H, du kommer att se att det kan du rita gester. Så en gest, kommer du att se den drar en pil över. En gest är ett av de sätt som Leap Motion slags låter dig få på uppgifter utan att bearbeta den. Så i stället för mig att behöva räkna ut, åh, var handen rör sig, även om jag har punkt tillgång, den API kommer sorts bara berätta, hey, de gjorde denna gest. Så du kan göra grundläggande pil gester. Du kan göra cirkelrörelser. Du kan göra knacka gester. Och du kan göra viktiga press gester. Yeah. Och den typen av saker. Så nu när vi har sortens sett vad Leap Motion kan göra, du kan se det kan läsa en massa gester. Jag tror jag ska passera det tillbaka till Armi och han kommer att tala om hur du får på dessa med JavaScript hur du ens börjar ett projekt med detta. Och sedan ska vi tala om några coola ställen du kan gå med. ARMAGHAN BEHLUM: Yeah. Låter bra. Så ja, det allra första vi kommer vill att du gör naturligtvis, är när du får Leap Motion är att gå till leapmotion.com, ställa upp, installera drivrutinerna och sånt. Efter gör att du kan gå se till att den är ansluten. Om du ser i din lilla fältet Leap Motion ikonen och det är grönt, då vet du att du är allt klart. Och naturligtvis kolla exakt vad Tomas precis visade dig med gester och gör skärm kranar, och nyckel kranar och den typen av saker. 

Efter att även om vi, återigen, som jag sa, Vi har tillgång till alla dessa saker i JavaScript liksom. Idealet inrättat att Vi rekommenderar att du killar är att gå in i din vhost katalog, lokal värd, publicerat på din CS50 apparaten. Och när du åker dit vad du kommer ser är en index dot HTML-fil. Nu när index dot HTML-fil eller index dot PHP-fil, beroende på vilket som är fint, vad du kan sedan göra är att gå till huvudoperativsystemet. Och om du går till IP-adressen som är upptagna i det nedre högra hörnet av din apparat just här, som ni kan se, vad som händer är du går till den sida som är refereras av detta index dot HTML-fil. Så all kod som du kan sätta in det får skickas och kan användas här. 

TOMAS REIMERS: Så det är också viktigt bara för referens att om ni verkligen vet hur du ställer in en server själv, eller om du vill sätta detta på den globala webb, är du välkommen att göra vad som helst. Kom ihåg att dessa är bara JavaScript-filer och alla Leap bearbetning görs på klienten. Så det spelar egentligen ingen roll där dina server liv så länge som datorn du visar webbplatsen på har Leap Motion installerad. ARMAGHAN BEHLUM: Absolut. Liksom Tomas sa, ja, vad som fungerar för er. Detta är bara en av våra rekommendationer. Nu för att börja använda Leap Motion vad du skulle göra är du skulle importera JavaScript-fil från Leap Motion. Och sedan därifrån vad du kan göra är, just nu Jag har bara denna punkt tagg inrättas med ett ID av text. Saker som vi skulle rekommendera ställer controller alternativ för Leap Motion med aktivera gester för att vara sant. Så som standard de gester som vi visade dig grabbar, cirkeln, och nyckel kranen, och drar ett, de visas inte på ni som standard. Men vi rekommenderar att du använder dem så att du inte uppfinna hjulet. Aktivera dem till true, passerar de controller alternativ för att hoppa dot slinga och du är all uppsättning som går. För då har du bara definierat en anonym funktion som kommer att ta i en ram från Leap Motion och att ramen har alla information som du kommer att behöva. 

TOMAS REIMERS: Så bara för att resumé, har du ett objekt. Du har denna funktion kallas språng dot slinga. Och du kallar det med två argument. Du kallar det med en, regulator alternativ. Och det finns en hel del alternativ som du kan sätta in där. Den vi ska betona är det möjligt gester. Och om du ställer det lika sant då du kan få tillgång till denna gester att vi visade dig i Visualizer. 

Och sedan den andra argumentet är en funktion, det är ungefär som ett samtal tillbaka som kommer att kallas varje tid varje bildruta för Leap, så varje gång språng register som din hand flytta, den har en ny ram. Och det kallar denna funktion med en argument, vilket är ramobjektet. Och det ramobjektet beskriver ramen som Leap ser den. ARMAGHAN BEHLUM: Exakt. Så detta innehåller all användbar bitar av information att vi talade om tidigare. Kontroll frame dot gester är en samling av gester att språnget rörelse fångade ditt händer gör i den sista bilden. Så till exempel, vad vi är gör här är att vi kollar, hey, Leap, i det sista bildrutan gjorde du fånga några gester som jag gjorde? Och i så fall vad vi väljer att göra är iterera igenom dessa gester och försöka få några användbara information från dem. Varje gest har en unik ID i samband med det. De har olika typer. Du kan titta på vilka fingrar var inblandade i gester genom att kolla in denna riktningsbar grejer. Så om när du går igenom Leap Motion JavaScript API grejer, när de nämner pointables, de talar om dessa fingrar. Och sedan händer är, naturligtvis, hela handen objektet. 

Vad mer? Du kan kontrollera hur länge rörelsen fortsatte efter och, ja, alla dessa användbara saker. Så vad jag gör just nu Här är jag loggade ramen, och sedan jag uppdatera min HTML att visa alla dessa bitar av information från ramen. Så låt oss kolla som. 

Så här är det. Här är index dot HTML-filen. Och som du just såg när jag precis flyttat min hand Leap fångade en cirkel rörelse. Så du kan se mig göra en cirkel över Här uppdaterar med cirkel informationen. Göra swipes, fångar swipes. Låt oss prova en flik. Det går vi. Skärm kran och en nyckel kran. Så viktiga kranar också med sätt, är när du träffar ned. Så du kan tänka dig kanske spelar ett piano. 

Och sedan skärm kranar är när du träffar skärmen. Så du kan tänka dig kanske du faktiskt har en pekskärm framför dig och du slår touch skärm framför dig. Och då kan vi ta en av dessa objekt i här. Så minns jag sa att jag var passerar ramen i konsolloggen. Och så vi kan kolla alla bitar av information som finns tillgängliga i den ramen samt att använda. 

Som jag sa tidigare, pointables är fingrarna. I det ögonblicket hade vi inte vår händerna framför Leap Motion så det registrerade noll, men detta är hur du skulle börja att ta reda på kanske hur många fingrar är skärmen. Och den typen av information. TOMAS REIMERS: Och minnas detta är bara ett objekt. Så allt kan nås ungefär som en struct i C. Du har till syfte namnge dot fastighetsnamnet. Och sedan inom att du har arrayer och du har andra objekt, men kom ihåg att det är bara ett objekt. Det finns inget speciellt eftersom vi använder Leap. ARMAGHAN BEHLUM: Yeah. Cool. Ska vi kolla ett par av JavaScript exempel? 

TOMAS REIMERS: Så snabbt komma ihåg att vi sade att Leap kan faktiskt köra på en webbplats. LeapJS är bara serveras till en klient. Och så tillsammans som klienten har Leap Motion bifogas det kommer att fungera. Så Leap Motion har en webbplats där människor kan dela deras exempel av saker som de har gjort. Så vi ska bara gå genom ett par av dem för att se vad som är möjligt innan dykning i mer detaljer om hur det är möjligt. Så ARMAGHAN BEHLUM: Låt oss se. TOMAS REIMERS: Nu borde arbeta. ARMAGHAN BEHLUM: Så nu innan vi såg ett exempel använder Unity som gjorde våra händer med ganska imponerande grafiska skinn, men nu kan du se att du kan göra det Samma sak i en webbläsare. Detta är alla inne Chrome bara använda JavaScript. Och sedan den andra trevliga sak är om du vill att veta hur de gjorde detta, exemplen på JavaScript inkluderar kod alternativ som du kan kolla in och sedan se hur den här personen var gripa tag händer och koder och sådant. 

Så det är allt du kan hitta på developer.leapmotion.com. Du kan gå och kolla JavaScript exempel som de har där. Så ja. Här är dessa oops sorry. Låt oss försöka det igen. Oh. Jag har två rätt händer. Så ja. 

TOMAS REIMERS: Så på gång, minns ibland Leap mässar upp. Bara ge det en sekund. Det är inte perfekt, men det är ganska bra. ARMAGHAN BEHLUM: Enkel andra rekommendationen också är att inte göra det i direkt solljus. Så vägen Leap Motion verk är, faktiskt om jag visar kameran här också, infrarött ljus. Så det skickar de ut och sedan läser dem när de kommer tillbaka. Så om du försöker göra det direkt solljus, till exempel, är det förmodligen inte kommer att fungera, eller det kommer att kräva vissa kalibrering att göra så. 

Också en annan rekommendation är att rensa utrymmet bakom Leap och framför Leap. Tänk på det som att arbeta insidan av en kupol som är kring denna Leap Motion-objektet. Om det finns saker rätt bakom det också, som är också kommer att störa med hur Leap Motions försöker att känna igen din hand och den typen av saker. 

Så, till exempel, tror jag i det här fallet är det min laptop faktiskt det är typ att göra Leap Motion. Ja, det går vi. Så om jag rensa ut min bärbara dator från bakom handen dyker upp ganska bra. Så ja. Det finns det. Så vad mer gjorde vi visa dem. TOMAS REIMERS: Jag tror nu skulle vara dags att sortera av dyk in och låt oss bara göra en demo helt från grunden. Det kommer att bli riktigt enkelt. I grund och botten vad vi tänker att försöka göra är att göra det så att när du drar handen, den bakgrunden kommer att börja som rött, och när du drar handen, den bakgrunden kommer att bli grön. OK? Riktigt enkelt. Och det är i princip bara kommer att gå igenom en hel del av koncepten bakom Leap så att vi kan komma in i denna ideologi hur Leap fungerar och hur vi kan bygga saker med det. Och sedan därifrån vi ska förmodligen bara visa er API Docs och var du kan läsa mer om detta. Och sedan ska vi kalla det dag. Så vill du koda eller vill du att jag ska koden? ARMAGHAN BEHLUM: Yeah. Tja, jag antar att vi kan arbeta tillsammans på detta och försök 

TOMAS REIMERS: Så vi ska göra en del par kodning. ARMAGHAN BEHLUM: Det gå vi. Det är precis vad jag ville kolla. Cool. Så till exempel i här, låt oss se. Medan vi iteration genom gester redan, TOMAS REIMERS: Vill du göra bara en helt ny fil? ARMAGHAN BEHLUM: Helt ny fil? Ja, visst. 

TOMAS REIMERS: Yeah. 

ARMAGHAN BEHLUM: Så låt oss göra det. 

TOMAS REIMERS: Så ska vi att göra en helt fil. Vi kallar det för hand dot HTML. Det är coolt med mig. Så kom ihåg att du gör en HTML-tagg, sedan inom att du har ett huvud. Att huvudet har en titel i den. Så fliken åt andra hållet. Där du går. Titel, vi kallar det Leap Exempel. Japp. 

ARMAGHAN BEHLUM: Oj. Titel. 

TOMAS REIMERS: Japp. 

ARMAGHAN BEHLUM: Det är vi. 

TOMAS REIMERS: Och så låt oss göra en kropp. 

ARMAGHAN BEHLUM: Vänta, låt oss också se till att importera. TOMAS REIMERS: Åh, naturligtvis. Min dåliga. Så alltid se till att du har Leap script så det är ett skript som du fått från Leap Motion som i princip tillåter webbläsare för att ansluta på anordningen på användarens dator. Och sedan i detta vi också behöver en kropp och låt oss bara göra kroppen säga hej så att vi kan visa eleverna hur du ansluter till denna nya webbsida som de gjorde. ARMAGHAN BEHLUM: Visst. Så låt oss bara sätta another-- 

TOMAS REIMERS: Hej, hej världen. Så en mycket grundläggande exempel. Egentligen bara en demo. 

ARMAGHAN BEHLUM: Och sedan här vi kan gå till, vi kallade det för hand dot HTML, rätt? Och oh! Så jag undrar vad som är fel med detta just nu. Låt oss lägga läsbehörighet till hands dot HTML. TOMAS REIMERS: Vill du att göra det i den stora terminalen så att vi bara kan visa den på the-- 

ARMAGHAN BEHLUM: Ja, gör det avseendet. Okej. Så jag har precis lagt den behörigheter, men om vi skulle kolla in behörigheter innan vi skulle ha sett som faktiskt handen dot HTML hade inte läsbehörighet och därför kunde vi inte göra det. Men nu om vi gör det, ser vi vår lite hallå världen just där. 

TOMAS REIMERS: Så låt oss faktiskt, som han skrev, hallå världen, Jag tänkte på ett sätt vi kunde ändra detta. Låt oss göra det säga hej världen, och sedan när du våg, säger adjö. Rätt? Så hej, adjö. 

ARMAGHAN BEHLUM: Visst. 

TOMAS REIMERS: Det låter ganska bra. 

ARMAGHAN BEHLUM: Att låter bra för mig också. 

TOMAS REIMERS: Så om vi är kommer att göra det låt oss bara tänka igenom webbsidan lite. Vi kommer att behöva lite manus som i huvudsak registrerar att du vinkade och en Leap, en våg och en känga, samma sak. Så vi kommer att behöva ett skript som princip registrerar för den slägga. Och en annan sak som vi är kommer att behöva är att vi är kommer att behöva lite faktiska innehållet förändras. 

Så som ni minns, jQuery låter dig ändra innehåll. Så en sak som vi kanske vill inkludera i detta är jQuery biblioteket. Och sedan att kunna välja vad vi faktiskt kommer att ändra innehåll, som kommer att behöva ett ID eller en klass, eller något som vi kan använda för att välja den. Så vi ska bara ge det en snabb ID förändringstext. Och sedan vill du ta jQuery? ARMAGHAN BEHLUM: Så vad är det första sak på vår att göra-lista sedan nu? TOMAS REIMERS: Låt oss ta jQuery? ARMAGHAN BEHLUM: Låt oss greppa jQuery, OK, cool. I så fall kommer jag att behöva actually-- där skulle vara det bästa stället att göra det? 

TOMAS REIMERS: jQuery, så om du Google jQuery, slog jQuery, den första ARMAGHAN BEHLUM: Mycket första. TOMAS REIMERS: Eller hämta. Det är bra. Hit nedladdning v1 och v2 till vänster. Så vi beskriver jQuery från nätet som du har förmodligen gjort. Scrolla ner. Upp, upp. 

ARMAGHAN BEHLUM: Åh, just här nu? TOMAS REIMERS: Eller så. Japp. Så jQuery har en värd version vilket innebär att du egentligen inte behöver ladda ner den, men du är mer än Välkommen att ladda ner den och lägga upp den själv. ARMAGHAN BEHLUM: Cool. Så nu har vi jQuery. Nu vad är nästa på vår att göra-lista. TOMAS REIMERS: Awesome. Så nästa vad vi behöver gör är att vi faktiskt behöver att ge p hallå världen ett ID så att vi kan ändra det, eller hur? Så låt oss ge en uppfattning om, Jag vet inte, ändra text? ARMAGHAN BEHLUM: Låt oss bara göra det här sättet, antar jag. TOMAS REIMERS: changeText, cool. Och nu ska vi bara uppdatera sidan. Se till att allt fungerar. Så tillbaka i webbläsaren. Cool. Alltid en bra påminnelse om att När du bygger en hemsida, förmodligen uppdatera varje gång du gör någon något betydande förändring bara eftersom ibland råkar tappa en tagg, eller om du råkar radera något, och sedan du bryter något litet, men sedan när du gör en större förändring du är som, varför gjorde detta stor förändring synes bryta orelaterad sak. Så det är alltid bra att sortera på gå och göra dessa rimlighetskontroller. 

Hur som helst så nu ska vi göra en sista sanity check, som låt oss försöka ändra text utan Leap Motion, utan någonting, bara på sidan laddas det ska förändra hej världen adjö använder jQuery. Så om du kommer ihåg jQuery exponerar denna dollartecken funktion, som vi kan passera CSS väljaren till, nämligen hashtag ändringstext, vilket väljer element med ett ID förändringstext. Och sedan kommer vi att kalla metoden HTML på objektet återgår med argument av en sträng adjö, vilket kommer att förändra objekten HTML för att säga adjö. Grymt. Det verkar ganska coolt. Och nu när vi uppdaterar sidan ska vi se det omedelbart ändras till adjö, eller hur? Eftersom det inte vänta på något. Sortera på så fort det manus körs det ändrar det till adjö. Cool. 

Så nu ska vi packa in den i en funktion. Höger. Så vi kommer att vilja att göra en funktion. Vi ska kalla det adjö. Så funktion adjö är kommer att ta några argument och det är inte riktigt kommer att returnera något. Och det är bara att gå till göra det i JavaScript. Utmärkt. Så vår funktion adjö nu ändrar texten till adjö, eller hur? Så detta ger oss ett sätt att i princip förändring den texten till adjö när vi kallade den funktionen. Rätt? Så det här är ganska coolt. 

ARMAGHAN BEHLUM: Tja, vi kan också se bara till att som nu eftersom vi inte kallar det funktion, om vi uppdatera sidan, märker att det inte kommer att ändra texten. 

TOMAS REIMERS: Utmärkt. Så nu ska vi börja att komma in i det Leap grejer att vi talade om. Så Armi, vill du ta det härifrån eller? 

ARMAGHAN BEHLUM: Yeah. Visst. Jag kommer förmodligen att behöva för att dubbelkontrollera saker, men till exempel komma ihåg Vi sade att vi ville att se i Alternativ Vi satt aktivera gester TOMAS REIMERS: God fångst. ARMAGHAN BEHLUM: Att vara sant. Och sedan vi rekommenderar att ni skulle kör språng dot slinga, vilket som vi sagt tidigare, har två alternativ, ett JSON-objekt som är alternativen för hur du vill att konfigurera Leap Motion till arbete, och sedan en funktion som är kommer att fånga en ram som en återuppringning fungerar som Tomas sade. Och sedan redigera vad du vill att göra med den funktionen. 

Så vi passerar i alternativ och nu definierar vi en funktion som kommer att ta i en ram. Och nu måste vi definiera vad den funktionen gör. Det är också av hänsyn till den framtid, gör det för att se. TOMAS REIMERS: Utmärkt. Så nu har vi denna språng dot loop funktion ring som i princip säger titta Leap med dessa alternativ och varje gång något ändras, kallar detta Funktionen ram med alla data att du är medveten om i ram. Låter ganska bra. Så nu snabb kontroll sanity, som jag rekommenderar alltid, är det bara sätta konsol dot timmerstommen. Och sedan i Chrome öppna den upp och titta på din konsol och leka med Leap att se ramar loggas eftersom det kommer får du en uppfattning om vad data du har tillgång till. Och som alltid när du förvirrad, slå upp API referens. Och vi kommer att inkludera länken för att vid slutet av detta. 

ARMAGHAN BEHLUM: Så vi uppdatera sidan och sedan vi går och öppnar upp konsolen igen. Och nu märker vi att vi är ha ramar passerade in, dessa små föremål som vi såg tidigare. Så ja. Dessa är våra ramar dyker upp i konsolen. Cool. 

Så nu när vi har gripit ramar, som ni kanske minns tidigare från exemplet att vi hade, om vi kontrollerar ram dot gester vi får listan över gester som ramen mest nyligen fångade. Vi kan kontrollera längden på den arrayen för att se om Leap fångade några gester. Så om det array är större än noll då vi vet att vi har en del saker att göra. 

Så låt oss linda upp det i en if skick och nu här vad vi vet är att vi har sett en gest, låt oss agera på det. Så nu när vi är här inne vi ha en gest för att kolla. TOMAS REIMERS: Tja, den första sak är det inte bara en gest, det kan vara så många gester. 

ARMAGHAN BEHLUM: Mycket sant. TOMAS REIMERS: Så per klassisk C stil här Vi kommer förmodligen att vilja använda en for-loop. ARMAGHAN BEHLUM: Här är vi då. Vi beslutade att iterera genom gester. Och låt oss se. Jag plus, plus. Och nu om vi kanske gjort bara en var gest lika ram dot gester fäste jag, nu har vi gest själv, vilket är bara en enda instans av en gest objekt för oss att arbeta med insidan av denna för slinga. Okej. TOMAS REIMERS: Låt oss förstånd kolla här igen och bara trösta dot log gest för att se vad vi får. 

ARMAGHAN BEHLUM: Console dot log gest. Okie dokie. Och uppdatera en gång till. 

TOMAS Reimers: Och låt oss prova att göra en gest. Du ser att ett gäng av, när han drar ett, du får en massa gester i konsol och om han försöker göra en cirkel, det är bara-- 

ARMAGHAN BEHLUM: Cirklar är bara riktigt nice. 

TOMAS REIMERS: Nu finns det en konstig sak Här, som han gör en cirkel, men detta loggar 80 gester, eller hur? Det är en hel del gester. Så den första sortens sak att inser, och detta kan vara förvirrande, är att en gest är inte bara loggas gång. 

På varje bildruta, höger, så om jag gör en cirkel Leap upptäcker detta är en förändring, från detta är en förändring, från detta är en förändring. Och det kommer att logga var och en av dem. Men i var och en av dem, det kommer att säga, oh, det finns en gest för närvarande pågår. Så låt mig bara säga, hej, det finns en gest och det är för närvarande pågår. Så vad vi inte vill göra är att säga, åh, på var och en av dessa gester du vill ändra text. Vad vi vill göra är att när den gesten stannar, och vi kan kontrollera det, då vill vi ändra texten. ARMAGHAN BEHLUM: Mhmm. Så som Tomas är förklara dessa gester kan visas genom flera ramar, men till exempel, när vi hade den cirkeln, kan vi se att ID för att en enda cirkel som vi kanske har försökt att slutföra var samma ID hela. Och faktiskt, kan du också kolla statusen. uppdateras. 

Och då detta är förmodligen den förra cirkel som, oh, ja, OK. Så ibland visar en status stoppa en gest och det visar också en status om att starta en ny gest när Det erkänner säkert att du har börjat en ny gest. Till exempel i det här fallet. TOMAS REIMERS: Cool. ARMAGHAN BEHLUM: Så ja. Och då, låt oss se. Du kan också märka om vi gör en cirkel och gest har ett fält som heter typ som berättar för oss vilken typ av gest som är. Så det kan vara användbart för oss du försöka göra vad vi gör. TOMAS REIMERS: Så övergår tillbaka till JS, det första som slår mig också, bara läsa igenom den här koden är att det finns en liten optimering, vilket är vi faktiskt behöver inte detta om tillstånd, eller hur? För om ram dot gester dot Längden är noll, att för slingans inte kommer att köra ändå. Så vi kan lika gärna bara gå framåt och bli av med det. Återigen, medan du skriver kod det är viktigt att gå tillbaka och sortera av Refactor som du inser att du kunde ha gjort något bättre, eller att det finns ett annat sätt att göra det. Så nu vi ska bara städa här upp snabbt och även städa upp din kod. Det är en stor sak. 

ARMAGHAN BEHLUM: Bra stil är mycket uppskattat. 

TOMAS REIMERS: Du kan alltid berätta när någon har koden där det brukade vara en if skick och sedan de tog bort den, men de ville inte avkommentera det. Det är mycket uppenbart och Det ser faktiskt ut fult. ARMAGHAN BEHLUM: Så vad är nästa på vår att göra-lista? TOMAS REIMERS: Så nu när vi sade, Jag antar det första vi vill göra är att se till att den gesten s faktiskt en känga, eller hur? 

ARMAGHAN BEHLUM: Yeah. 

TOMAS REIMERS: Så om vi säger att vår adjö är ungefär som en känga, vi ska gå med det är en känga, den första vi måste säga är, hej, är gesten skriv ett svep, eller hur? Inte en cirkel eller en topp, men är det en känga? Så hur vi kan göra det är att vi kan säga gest dot typ lika lika svepa som en sträng. 

ARMAGHAN BEHLUM: [OHÖRBAR] gest dot typ lika med lika med slägga. Det är vi. 

TOMAS REIMERS: Och då den sista frågan vi vill se är gesten dot state lika lika stopp, eller hur? Så det är när gest har stoppats. Jag tror faktiskt att svepa, jag vet detta från toppen av mitt huvud, men du är välkommen att slå upp det, när du dra varje gång den registrerar det tills du slutar är en början gest. Och sedan den sista s bara ett stopp gest. Så det endast kommer att finnas ett stopp gest, vilket är bra för oss. Så vad vi kan göra är att säga om gest dot skriver lika lika slägga och gest dot status lika lika stopp, så låt oss förstånd kolla här trösta dot log gest. 

Så vi ska gå tillbaka hit. Vi kommer uppdatera sidan. Och nu den enda gången något bör vara konsol dot loggas är när vi drar. Och vi försöker dra och vi ser ingenting. Rätt? Så detta är faktiskt en stor fråga. Vi ser inte vad vi förväntas. Och felsökning kan vara en stor del av detta. Så det första vi tänker att säga är, OK, låt oss trösta dot logga det om gest dot skriver lika lika slägga. ARMAGHAN BEHLUM: Ja, låt oss göra det. TOMAS REIMERS: Så vi är kommer att gå tillbaka till detta. Vi ska uppdatera. Vi ska dra. Och vi kommer att se ett gäng av dem. OK. Så klart var problemet med vår gest dot status. Så om vi öppnar upp en av dessa vi ska titta i objekt och vi får se, Tja, det är ett stopp, men, åh, det kallas tillståndet, inte status. Så om vi går tillbaka till vår kod kan vi säga om gest dot typ lika lika slägga och gester dot statlig lika lika stopp, sedan kommer vi trösta dot log det. Och så uppdatera. Vi drar. Och vi får se det på varje svep, vi är bara få en, som är den slutet, vilket är bra, eller hur? Det är vad vi vill ha. 

ARMAGHAN BEHLUM: Japp. Och vi kan också märka att ID för var och en av dessa gester är separata. Så när Tomas sa att vi är fånga denna one stop uppger att existerar i slutet av en slägga, vi är få enskilda separata gester från Leap Motion. Stor. 

TOMAS REIMERS: Låt oss gå vidare och bara göra det sista sak, som är, 

ARMAGHAN BEHLUM: Adjö. 

TOMAS REIMERS: Awesome. Och nu ska vi kolla in vår hemsida. En 

ARMAGHAN BEHLUM: Second. Vi gjorde, ja, vi kallar det Adjö. Stor. 

TOMAS REIMERS: Nej, Adjö är en reell funktion. 

ARMAGHAN BEHLUM: Yeah. Låt oss göra det. 

TOMAS REIMERS: Och när vi vinka adjö, säger adjö. 

ARMAGHAN BEHLUM: Vi har segern. 

TOMAS REIMERS: Så ganska spännande grejer. Förhoppningsvis kan du bygga något annars, men du får tanken på, eller hur? Du kan upptäcka gester. Du kan ringa funktioner. Och från den som verkligen ger dig några mycket grundläggande byggstenar att säga, oh, kanske när de drar upp, eftersom du kan också upptäcka saker liknande riktning. Jag vill att de ska göra något. Eller när de drar rätt, jag vill att de ska göra något. Och vi kan börja att få kreativ med hur exakt vi kommer att förbättra vår webbplats använda dessa slägga gester eller cirkel gester, eller knacka på gester, antingen nyckel kranar eller skärm kranar. Och annat då än att du är mer än välkommen att spela med de faktiska uppgifterna, men om du vill göra att vi skulle föreslå att du går till docs eftersom de är faktiskt riktigt bra. Så leds till docs nu. Eller vill du prata om det? 

ARMAGHAN BEHLUM: Yeah. Låt oss göra det. Också en annan godbit av rådgivning, försök och tänka på detta i 3D. Så egentligen låt oss dra upp dessa gester en gång konsol dot log gest och vi gör det. Kom tillbaka och nu ska vi prova en par av dessa, par av dem. 

Om vi ​​går in och kolla dessa gester samt som ni kan se att de är dimensionality är i tre riktningar, faktiskt. Så inte bara begränsa dig en 2D-skärm även om du kanske vara på en 2D-webbplats. Du kan försöka tänka på hur en användare kanske interagera med webbplatsen i 3D. TOMAS REIMERS: I ett 3D-utrymme. ARMAGHAN BEHLUM: Exakt. Och ja. Så du får riktningar, hastigheter, alla dessa coola bitar av information. 

TOMAS REIMERS: Och om du inte bekant med den, går det x, y, och sedan z är denna sista dimensionen. Bara något som du förmodligen är bekant med om du har behandlat 3D koordinat plan innan. Om du inte har, är det samma som en 2D annan än det finns en tredje dimension. Vi kallar det z. Och allt, ungefär som riktning, som är där det kommer, position-- Jag tror att det kanske till och med utsätta acceleration, jag är inte säker. 

ARMAGHAN BEHLUM: Ja, tror jag. Det har definitivt hastighet. Jag är faktiskt inte 100% säker om acceleration. 

Tomas REIMERS: Det kan vara ett alternativ du kan vidarebefordra till något. Så position och hastighet utsätts i denna typ av tre koordinater. Så x, y, z, eller delta x, delta y, delta z. Så nu leds till dokumentationen det är developer.leapmotion.com och sedan kan du klicka på Dokumentation. Återigen, Leap Motion har alla dessa underbara API, en för JavaScript, en för C Sharp och Unity, en för C ++, en för Java, ett för Python, och en för mål C. Jag personligen skulle driva dig mot JavaScript eller om du vill lära dig ett nytt språk, prova Python. Båda dessa språk jag har arbetat med innan och de är verkligen lätt att lära och du vet redan JavaScript, vilket gör det till ett riktigt bra utmanare. 

Ett varningens ord när du anger docs. Se till att du är på Docs v2.0. För om du är på version, kommer det inte att fungera. Även för exemplet galleriet. Vi tillbringade en bra 30 minuter försöker debug vår Leap innan vi insåg att V1 fungerar inte med V2. Så se bara till att du är på version två. Och sen ska jag låta honom visa dina docs. ARMAGHAN BEHLUM: Yeah. Så här är API överblick och sedan vissa bitar av information att vi redan har berättat. Trevlig liten flytande händerna ovanför en Leap Motion. Och en påminnelse att tänka om utrymme i 3D. En av de första föremålen att tänka på med Leap Motion är händer, förstås. Vi såg dem erkända av Visualizer. Och då kanske du har sett att det redovisade del av handleden och den arm i samband med det. TOMAS REIMERS: Om du vill att dra upp Visualizer. ARMAGHAN BEHLUM: Ja, låt oss göra det igen. TOMAS REIMERS: Du kan se, alltid bara en bra påminnelse om att sorts se, den Visualizer försöker visa alla data som Leap ser. Så ser du att vi har dessa slags fyra punkter genom handleden och sedan själva handleden. Och du har också denna boll på handflatan. Alla dessa är punkter känner igen igen av språnget. 

ARMAGHAN BEHLUM: Exakt. Och så med den handen objektet Varje ram har en hand array samt där du kan också få vänster och höger hand. Du kan få vilken riktning händerna är inför med den normala riktningen på handflatan, eller som de kallar det handflatan normalt. Vad har vi? Vi har också, oops. Låt oss försöka rulla ner på detta sätt. Armarna, fingrarna är representeras av fingret klass, som är en riktningsbar objekt. Så som vi sade, såg vi att matris med pointables för varje hand. De är den lilla fingrar att tänka på. Så detta är en bra överblick för att gå genom att försöka förstå. TOMAS REIMERS: [OHÖRBAR] handen anatomi uppe. ARMAGHAN BEHLUM: Ja, exakt. Så ja. Det finns en hel del rådata som Leap Motion tar in tolkar väl för dig, så det är en stor idé att gå igenom här och försöka lista ut hur Leap har redan räknat ut saker för dig och så vilken information du har tillgängliga därifrån. Och sedan därifrån jag skulle rekommendera gå in i denna vänstra delen hit, som går, väl egentligen ingen, de är egentligen bara mer API grejer about-- 

TOMAS REIMERS: API referens vid botten är oftast ett bra ställe att gå. Ni såg förmodligen detta när Vi gjorde Google Maps PSET. Men hänvisningen egentligen bara går igenom alla av de funktioner och parametrar tillgängliga i objektet till dig. 

ARMAGHAN BEHLUM: Yeah. Till exempel är vad detta Jag letade efter innan. När vi har en hand som vi kan gå och räkna ut hur Leap rekommenderar för oss att hitta en hand. Som jag sa tidigare, vi har en händer array. Ta reda på om vi har händerna och sedan försöka ta en enda hand att interagera med på detta sätt. Så det är vad vi rekommendera för er killar. De gester och grejer liksom. Detta API-dokumentationen kommer att vara ett fantastiskt verktyg för er. Har ni några andra rekommendationer? 

TOMAS REIMERS: Jag gör inte. Jag tror det är bra för nu. 

ARMAGHAN BEHLUM: Ja, Jag tror det också. Tveka inte att maila oss och få kontakt om Leap Motion om du har kanske några problem eller behöver några rekommendationer. Och vi kan försöka lista grejer ut med er också. Tack. 

TOMAS REIMERS: Great.