TOMAS Reimers: Cool. Jadi hi, semua orang. Namaku Tomas. Saya TF dan ini adalah ARMAGHAN BEHLUM: Armi. Senang bertemu kalian. TOMAS Reimers: Cool. Jadi kita akan berbicara tentang Leap Motion hari ini. Jadi Leap Motion adalah produk yang benar-benar keren yang memungkinkan Anda berinteraksi dengan komputer dengan cara yang berbeda. Jadi seluruh ide di balik gerak lompatan adalah bahwa Anda dapat menggunakan tangan Anda untuk berinteraksi dengan komputer. Jadi di sini saya punya sesuatu yang mengatur. Aku akan berbicara tentang hal itu dalam sedikit. Tapi versi dasar adalah Anda dapat melihat bahwa saya memiliki tangan saya di depan komputer saya dan ketika saya memindahkan mereka, Anda mendapatkan analog pada komputer dan Anda dapat menganalisis ini. Anda dapat membuat gerakan. Anda dapat menggunakan tangan Anda untuk berinteraksi dengan komputer dengan cara baru dan menarik. Yah, aku benar-benar pertama ingin lulus ke Armi menunjukkan beberapa demo keren dari apa beberapa orang telah selesai dengan ini. Dan kemudian kita akan berbicara tentang bagaimana Anda benar-benar kode dengan ini. ARMAGHAN BEHLUM: Ya. Moshi Moshi. Jadi seperti yang kita lihat, sedikit Data di sini, tapi mari kita lihat apa yang beberapa orang telah selesai dengan ini. Jadi biarkan aku hanya membuka contoh ini. Dan kemudian, jadi, misalnya, Anda dapat melihat analog tanganku di sana, tapi sekarang saat ini beberapa orang yang menggunakan Unity memiliki memutuskan untuk menempatkan sedikit kulit lebih dan hal-hal di sekitar tangan. Jadi saya bisa, mari kita pergi dengan yang satu ini, yakin, memiliki tangan saya berinteraksi. Dan Anda mungkin bisa membayangkan beberapa hal yang berguna keren lainnya yang dapat Anda lakukan dengan hal ini. Jadi ini setidaknya salah satu contoh. Dan kemudian mari kita melompat keluar dari ini. Kemudian satu lagi keren adalah, mari kita pergi dengan yang satu ini. Plasmo bola. Sekali lagi, kita tidak akan selalu mengharapkan tingkat kompleksitas dari tugas akhir untuk CS50. Ini hanya untuk menunjukkan Anda beberapa, memberikan kalian sedikit inspirasi untuk apa kalian bisa lakukan dengan Leap Motion. Jadi untuk contoh di sini adalah keren contoh fisika, yang ada kita pergi. Memiliki kedua tangan saya jadi sekarang Anda memiliki sedikit bola plasma ini. Dan bola bereaksi terhadap fisika saya bergerak tanganku di sekitar bola. Sekarang ini semua meskipun menggunakan Unity, menggunakan jenis alat dan kerangka kerja bahwa kita tidak diajarkan kalian di kelas, tetapi karena Anda dapat melihat beberapa cantik keren run through dengan itu. Tapi satu hal yang kalian dapat lakukan mulai dari sekarang dengan Leap Motion adalah pekerjaan dalam JavaScript. Leap Motion memiliki API JavaScript yang kalian dapat menggunakan dan kami sangat, sangat Sebaiknya kalian membangun proyek Anda menggunakan itu. Maka dengan itu, biarkan aku menyebarkannya kembali pergi ke Tomas untuk berbicara tentang Leap Gerak dan JavaScript. TOMAS Reimers: Cool. Atau apakah Anda ingin menunjukkan mereka Visualizer pertama? ARMAGHAN BEHLUM: Oh ya. Iya Nih. Mari kita berbicara lebih banyak tentang Visualizer itu. TOMAS Reimers: Jadi pada yang paling dasar level, ketika Anda pertama kali ke Leap Motion Anda akan memiliki kotak ini. Di sini, ingin aku untuk mengambil kendali? ARMAGHAN BEHLUM: Ya, pergi untuk itu. TOMAS Reimers: Jadi Bila Anda pertama sampai ke Leap Motion Anda akan memiliki kotak ini. Memiliki perangkat yang terlihat seperti ini. Anda hubungkan ke komputer Anda, install driver yang dibutuhkan, dan kemudian akan dasarnya dibentuk. Jadi cara termudah untuk mengurutkan kesepakatan dengan Leap Motion adalah membuka program ini menginstal disebut Leap Motion Visualizer. Dan Visualizer secara harfiah apa yang saya tunjukkan di sini. Hal ini memungkinkan Anda untuk melihat garis tulang tangan Anda. Dan apa yang Leap Motion menafsirkan mereka sebagai. Jadi Leap Motion menggunakan kamera untuk mengurutkan dari melihat tangan Anda dan kemudian mencoba untuk menebak apa yang Komposisi kerangka dasar yang Anda lihat di layar. Dan itulah yang menunjukkan Anda. ARMAGHAN BEHLUM: Setiap Titik kecil tunggal dan hal yang Anda lihat ada Data yang tersedia untuk kalian juga digunakan. Jadi Anda lihat bahwa itu menangkap bahwa Tomas memiliki lima jari, masing-masing jari-jari yang berbeda juga tersedia untuk Anda sebagai data poin untuk digunakan dalam aplikasi apapun Anda mungkin ingin. Jika Anda ingin melihat apakah seseorang yang melakukan acungan up Anda dapat melihat apakah jari-jari mereka melengkung dan apakah mereka jempol jari menunjuk ke atas, atau di mana pergelangan tangan atau telapak mereka dan jenis barang. TOMAS Reimers: Cool. Sehingga Anda dapat melihat beberapa gerakan itu memahami lebih baik daripada yang lain. Ingat, bahwa itu adalah melihat Anda tangan dari pada kamera dari bawah, jadi ketika Anda memiliki tangan Anda seperti ini memahami mereka sepenuhnya, tetapi sekali Anda mulai untuk mencoba dan melakukan thumbs up, kadang-kadang membacanya, kadang-kadang bisa menebak, tapi jujur kamera tidak bisa melihat jempol. Jadi itu tidak benar-benar yakin apa yang terjadi. Hanya beberapa keterbatasan yang perlu diingat ketika Anda sedang mengembangkan dengan ini. Pokoknya, sehingga akan kembali ke ini. The Visualizer sebenarnya memiliki banyak alat yang berguna. Jadi Leap Motion adalah diprogram sedemikian rupa bahwa mereka tidak mengharapkan Anda untuk berinteraksi dengan data citra. Mereka tidak benar-benar mengharapkan Anda untuk memahami apa yang terjadi di balik layar. Apa yang mereka lakukan adalah mengekspos sekelompok API untuk Anda sehingga Anda dapat berinteraksi dengan data ini langsung tanpa pemahaman apa yang terjadi di bawah tenda. Jadi jika kita memukul H di sini di Visualizer yang Anda akan melihat banyak pilihan. Yang penting satu di sini meskipun adalah jika anda menekan O dan kemudian tekan H, Anda akan melihat bahwa itu memungkinkan Anda menggambar gerakan. Jadi gerakan, Anda akan melihat ia menarik panah di. Gerakan A adalah salah satu cara yang Leap Gerak semacam memungkinkan Anda dapatkan di data tanpa harus memprosesnya. Jadi, daripada saya perlu untuk mencari keluar, oh, tangan itu bergerak, bahkan jika saya harus titik akses, yang API akan semacam katakan saja padaku, hey, mereka membuat gerakan ini. Jadi, Anda dapat membuat dasar panah gerakan. Anda dapat membuat gerakan lingkaran. Anda dapat membuat penyadapan gerakan. Dan Anda dapat membuat gerakan tekan tombol. Ya. Dan hal semacam itu. Jadi sekarang kita sudah semacam melihat apa Leap Motion bisa melakukan, Anda dapat melihat dapat membaca Seluruh sekelompok gerakan. Saya pikir saya akan menyebarkannya kembali ke Armi dan dia akan berbicara tentang bagaimana Anda mendapatkan ini dengan JavaScript, bagaimana Anda bahkan memulai proyek dengan ini. Dan kemudian kita akan berbicara tentang beberapa tempat keren yang dapat Anda pergi dengan itu. ARMAGHAN BEHLUM: Ya. Kedengarannya bagus. Jadi ya, hal pertama yang kita akan ingin Anda lakukan tentu saja, adalah setelah Anda mendapatkan Leap Motion adalah untuk pergi ke leapmotion.com, mengatur, instal driver dan hal-hal. Setelah melakukan itu Anda dapat pergi pastikan bahwa itu terhubung. Jika Anda melihat di nampan kecil Anda yang Leap ikon Gerak dan itu hijau, maka Anda tahu Anda sudah siap. Dan tentu saja memeriksa apa Tomas hanya menunjukkan Anda dengan gerakan dan melakukan keran layar, dan keran kunci, dan jenis barang. Setelah itu meskipun kami, sekali lagi, seperti saya katakan, kita memiliki akses ke semua ini hal dalam JavaScript juga. Ideal mengatur bahwa kami akan merekomendasikan Anda orang adalah pergi ke Anda direktori vhost, host lokal, masyarakat dalam alat CS50 Anda. Dan ketika Anda pergi ke sana apa yang akan Anda lihat adalah file HTML indeks dot. Sekarang bahwa indeks dot File HTML atau indeks dot File PHP, mana yang baik, apa yang Anda dapat lakukan adalah pergi ke sistem operasi utama. Dan jika Anda pergi ke alamat IP yang terdaftar di kanan bawah sudut alat Anda di sini, seperti yang Anda lihat, lalu apa yang terjadi adalah Anda pergi ke halaman yang direferensikan oleh file HTML indeks dot. Jadi semua kode yang mungkin dimasukkan ke dalam ada akan dikirim dan digunakan di sini. TOMAS Reimers: Jadi itu juga hanya penting untuk referensi bahwa jika kalian benar-benar tahu bagaimana menyiapkan server sendiri, atau Anda ingin menempatkan ini di seluruh dunia web, Anda dipersilakan untuk melakukan apa pun. Ingat bahwa ini adalah hanya file JavaScript dan semua proses Leap dilakukan pada klien. Jadi tidak terlalu penting di mana kehidupan server Anda asalkan komputer Anda melihat situs web di Leap Motion telah diinstal. ARMAGHAN BEHLUM: Tentu saja. Seperti Tomas mengatakan, ya, apa pun yang bekerja untuk kalian. Ini hanyalah salah satu dari rekomendasi kami. Sekarang untuk mulai menggunakan Leap Gerak apa yang akan Anda lakukan adalah Anda akan mengimpor JavaScript file dari Leap Motion. Dan kemudian dari sana apa dapat Anda lakukan adalah, sekarang Aku hanya ayat ini tag mengatur dengan ID teks. Hal-hal yang kami sarankan menetapkan pilihan kontroler untuk Leap Motion dengan memungkinkan gerakan untuk menjadi kenyataan. Jadi secara default mereka gerakan yang kami menunjukkan Anda guys, lingkaran, dan tekan tombol, dan gesekan, mereka tidak terbukti kalian secara default. Tapi kami sangat menyarankan menggunakan mereka sehingga Anda tidak menciptakan kembali roda. Memungkinkan mereka untuk benar, melewati mereka Pilihan controller untuk melompat dot lingkaran dan Anda siap untuk pergi. Karena Anda hanya perlu mendefinisikan fungsi anonim yang akan mengambil dalam frame dari Leap Motion dan bingkai yang memiliki semua Informasi yang Anda akan membutuhkan. TOMAS Reimers: Jadi hanya untuk rekap, Anda memiliki satu objek. Anda memiliki fungsi ini disebut lompatan dot lingkaran. Dan Anda menyebutnya dengan dua argumen. Anda menyebutnya dengan satu, pilihan pengontrol. Dan ada banyak Pilihan Anda dapat menempatkan di sana. Yang kita akan menekankan adalah memungkinkan gerakan. Dan jika Anda mengaturnya sama dengan benar maka Anda bisa mendapatkan akses pada gerakan ini bahwa kami menunjukkan Anda di Visualizer. Dan kemudian argumen kedua adalah fungsi, itu jenis seperti panggilan kembali yang akan dipanggil setiap waktu setiap frame Leap, sehingga setiap kali register lompatan yang Langkah tangan Anda, ia memiliki bingkai baru. Dan panggilan fungsi ini dengan satu argumen, yang merupakan objek bingkai. Dan bahwa objek bingkai menggambarkan frame sebagai Leap melihatnya. ARMAGHAN BEHLUM: Tepat. Jadi ini memiliki semua berguna potongan-potongan informasi yang kita bicarakan sebelumnya. Memeriksa bingkai dot gerakan adalah array gerakan bahwa gerakan lompatan tertangkap Anda tangan lakukan di frame terakhir. Jadi misalnya, apa yang kita lakukan di sini adalah kita memeriksa, hey, Leap, dalam frame terakhir melakukan Anda menangkap setiap gerakan yang saya lakukan? Dan jika demikian apa yang kita memutuskan untuk melakukan adalah iterate melalui mereka gerakan dan mencoba dan mendapatkan beberapa berguna informasi dari mereka. Setiap gerakan memiliki unik ID yang terkait dengan itu. Mereka memiliki jenis. Anda dapat melihat di mana jari terlibat dalam gerakan dengan memeriksa barang-barang pointable ini. Jadi, jika saat Anda pergi melalui Leap Motion JavaScript API barang, ketika mereka menyebutkan pointables, mereka sedang berbicara tentang jari-jari. Dan kemudian tangan, tentu saja, seluruh objek tangan. Ada apa lagi? Anda dapat memeriksa berapa lama gerak melanjutkan untuk dan, ya, semua hal yang berguna. Jadi apa yang saya lakukan sekarang di sini adalah saya login frame, dan kemudian saya memperbarui HTML saya untuk menampilkan semua bit-bit informasi dari frame. Jadi mari kita memeriksa yang keluar. Jadi begini. Berikut indeks dot file HTML. Dan karena Anda hanya melihat ketika saya baru saja pindah tanganku Leap menangkap gerakan lingkaran. Sehingga Anda dapat melihat saya melakukan lingkaran atas di sini, update dengan informasi lingkaran. Melakukan gesekan, menangkap gesekan. Mari kita coba tab layar. Di sana kami pergi. Tekan layar dan tekan tombol. Keran Jadi kuncinya juga, dengan cara, adalah ketika anda menekan ke bawah. Jadi bisa dibayangkan mungkin bermain piano. Dan kemudian keran layar yang ketika anda menekan layar. Jadi bisa dibayangkan mungkin Anda benar-benar memiliki layar sentuh di depan Anda dan Anda memukul sentuhan layar di depan Anda. Dan kemudian kita bisa ambil satu benda-benda di sini. Jadi ingat saya berkata bahwa saya adalah melewati frame dalam log konsol. Dan jadi kita bisa memeriksa semua potongan-potongan informasi yang tersedia di frame juga digunakan. Seperti saya katakan sebelumnya, pointables adalah jari. Pada saat itu kami tidak punya kita tangan di depan Leap Motion sehingga terdaftar nol, tapi ini adalah bagaimana Anda akan mulai untuk mencari tahu mungkin berapa banyak jari yang layar. Dan jenis informasi. TOMAS Reimers: Dan mengingat ini hanya sebuah objek. Jadi semuanya bisa diakses semacam seperti struct di C. Anda memiliki objek nama dot nama properti. Dan kemudian dalam bahwa Anda memiliki array dan Anda memiliki benda-benda lainnya, tapi ingat itu hanya sebuah objek. Tidak ada yang istimewa karena kita menggunakan Leap. ARMAGHAN BEHLUM: Ya. Keren. Haruskah kita memeriksa beberapa contoh JavaScript? TOMAS Reimers: Jadi cepat ingat bahwa kita mengatakan bahwa Leap benar-benar dapat berjalan di situs web apapun. LeapJS hanya disajikan kepada klien. Dan bersama klien memiliki Leap Motion melekat itu akan bekerja. Jadi Leap Motion memiliki situs web di mana orang dapat berbagi contoh mereka hal yang mereka buat. Jadi kami hanya akan pergi melalui beberapa dari mereka untuk melihat apa yang mungkin sebelum menyelam ke lebih spesifik tentang bagaimana itu mungkin. Jadi ARMAGHAN BEHLUM: Mari kita lihat. TOMAS Reimers: Sekarang harus bekerja. ARMAGHAN BEHLUM: Jadi sekarang sebelum kita melihat contoh menggunakan Unity yang diberikan tangan kita dengan kulit grafis yang cukup mengesankan, tapi sekarang Anda dapat melihat Anda dapat melakukan Hal yang sama dalam browser web. Ini semua dalam Chrome hanya menggunakan JavaScript. Dan kemudian bagus lainnya hal ini jika Anda ingin untuk mengetahui bagaimana mereka melakukan ini, contoh JavaScript juga termasuk pilihan kode yang Anda dapat memeriksa dan kemudian melihat bagaimana orang ini meraih tangan dan kode dan semacamnya. Jadi itu semua Anda dapat menemukan di developer.leapmotion.com. Anda dapat pergi dan memeriksa JavaScript contoh yang mereka telah ada. Jadi ya. Berikut adalah ini, oops maaf. Mari kita coba lagi. Oh. Aku punya dua tangan yang tepat. Jadi ya. TOMAS Reimers: Jadi dan lagi, ingat kadang Leap mengacaukan. Hanya memberikan kedua. Ini tidak sempurna, tapi itu cukup bagus. ARMAGHAN BEHLUM: Satu Rekomendasi lain juga adalah untuk tidak melakukannya di bawah sinar matahari langsung. Jadi cara Leap Motion perbuatan adalah, sebenarnya jika saya menunjukkan kamera ini juga, cahaya inframerah. Jadi mengirimkan mereka keluar dan kemudian membaca mereka ketika mereka datang kembali. Jadi jika Anda mencoba untuk melakukannya sinar matahari langsung, misalnya, itu mungkin tidak akan bekerja, atau itu akan membutuhkan beberapa kalibrasi untuk melakukannya. Juga rekomendasi lain adalah untuk menghapus ruang di belakang Leap dan di depan Leap. Anggap saja sebagai bekerja dalam kubah itu sekitar objek Leap Motion ini. Jika ada hal-hal yang benar di balik itu juga, yang juga akan mengganggu dengan bagaimana Leap Motion mencoba mengenali tangan Anda dan jenis barang. Jadi, misalnya, saya pikir dalam hal ini Kasus itu laptop saya benar-benar itu semacam membuat Leap Motion. Ya, di sana kita pergi. Jadi jika saya membersihkan laptop saya dari belakangnya tangan muncul cukup baik. Jadi ya. Ada itu. Jadi apa lagi apakah kita menunjukkan kepada mereka. TOMAS Reimers: saya pikir sekarang akan menjadi waktu memilah menyelam ke dalam dan mari kita membuat demo yang benar-benar dari awal. Ini akan menjadi benar-benar sederhana. Pada dasarnya apa yang kita akan mencoba untuk lakukan adalah membuat sehingga ketika Anda menggesek tangan Anda, background akan mulai keluar sebagai merah, dan ketika Anda menggesek tangan Anda, background akan berubah menjadi hijau. OKE? Benar-benar sederhana. Dan itu pada dasarnya hanya akan pergi melalui banyak dari konsep di balik Leap sehingga kita bisa masuk ke ideologi ini bagaimana Leap bekerja dan bagaimana kita bisa membangun hal-hal dengan itu. Dan kemudian dari sana kita akan mungkin hanya menunjukkan Documents API dan di mana Anda dapat membaca lebih lanjut tentang ini. Dan kemudian kita akan menyebutnya hari. Jadi apakah Anda ingin kode atau kau ingin aku untuk kode? ARMAGHAN BEHLUM: Ya. Nah, saya kira kita bisa bekerja sama dalam hal ini dan mencoba TOMAS Reimers: Jadi kita akan melakukan beberapa pasangan coding. ARMAGHAN BEHLUM: Di sana kami pergi. Itulah apa yang saya ingin memeriksa. Keren. Jadi misalnya di sini, mari kita lihat. Sementara kita iterasi melalui gerakan sudah, TOMAS Reimers: Ingin membuat hanya file yang sama sekali baru? ARMAGHAN BEHLUM: File Completely baru? Ya, tentu. TOMAS Reimers: Ya. ARMAGHAN BEHLUM: Jadi mari kita lakukan itu. TOMAS Reimers: Jadi kita akan untuk membuat benar-benar mengajukan. Kita akan menyebutnya tangan dot HTML. Itu keren dengan saya. Jadi ingat Anda melakukan tag HTML, maka dalam waktu yang Anda memiliki kepala. Kepala yang memiliki judul di dalamnya. Jadi tab cara lain. Ini dia. Judul, kita akan menyebutnya Leap Contoh. Yep. ARMAGHAN BEHLUM: Ups. Judul. TOMAS Reimers: Yep. ARMAGHAN BEHLUM: Ada kita. TOMAS Reimers: Dan kemudian mari kita membuat tubuh. ARMAGHAN BEHLUM: Tunggu, mari kita juga pastikan untuk mengimpor. TOMAS Reimers: Oh, tentu saja. Salahku. Jadi selalu pastikan Anda memiliki Leap naskah jadi itu script yang diberikan kepada Anda oleh Leap Motion yang pada dasarnya memungkinkan web browser untuk menghubungkan ke perangkat pada komputer pengguna. Dan kemudian dalam hal ini kami juga perlu tubuh dan mari kita membuat tubuh menyapa begitu bahwa kita dapat menunjukkan siswa bagaimana terhubung ke ini baru Halaman web yang mereka buat. ARMAGHAN BEHLUM: Tentu. Jadi mari kita hanya menempatkan another-- TOMAS Reimers: Hi, hello world. Jadi contoh yang sangat dasar. Benar-benar hanya demo. ARMAGHAN BEHLUM: Dan kemudian di sini kita bisa pergi ke, kami menyebutnya tangan dot HTML, yang tepat? Dan oh! Jadi aku bertanya-tanya apa yang salah dengan ini sekarang. Mari menambahkan izin membaca tangan dot HTML. TOMAS Reimers: Apakah Anda ingin untuk melakukannya di terminal besar sehingga kita bisa menunjukkan pada the-- ARMAGHAN BEHLUM: Ya, itu masuk akal. Baiklah. Jadi aku hanya menambahkan izin, tetapi jika kita adalah untuk memeriksa izin sebelum kita akan melihat yang benar-benar tangan dot HTML tidak memiliki izin membaca dan oleh karena itu kita tidak bisa membuat itu. Tapi jika kita melakukannya, kita melihat kami sedikit hello world di sana. TOMAS Reimers: Jadi mari kita sebenarnya, karena ia menulis, hello world, Saya berpikir tentang cara kita bisa mengubah ini. Mari kita membuatnya menyapa dunia, dan maka ketika Anda gelombang, ia mengatakan selamat tinggal. Yang Tepat? Jadi halo, selamat tinggal. ARMAGHAN BEHLUM: Tentu. TOMAS Reimers: Kedengarannya cukup bagus. ARMAGHAN BEHLUM: Itu kedengarannya bagus bagi saya, juga. TOMAS Reimers: Jadi jika kita akan melakukan itu mari kita berpikir melalui halaman web sedikit. Kita akan membutuhkan beberapa script yang pada dasarnya register Anda melambaikan tangan dan ke Leap, gelombang dan babatan, hal yang sama. Jadi kita akan membutuhkan script yang pada dasarnya register untuk menggesek itu. Dan satu hal lagi kami akan butuhkan adalah kita akan membutuhkan beberapa konten yang sebenarnya berubah. Jadi Anda ingat, jQuery memungkinkan Anda untuk mengubah konten. Jadi satu hal yang kita mungkin ingin menyertakan dalam hal ini adalah perpustakaan jQuery. Dan kemudian dapat memilih apa kita benar-benar akan mengubah konten, itu akan memerlukan ID atau kelas, atau sesuatu yang bisa kita gunakan untuk memilihnya. Jadi kami hanya akan memberikan cepat ID perubahan teks. Dan kemudian Anda ingin mengambil jQuery? ARMAGHAN BEHLUM: Jadi apa yang pertama hal di kami untuk melakukan daftar maka sekarang? TOMAS Reimers: Mari kita ambil jQuery? ARMAGHAN BEHLUM: Mari ambil jQuery, OK, keren. Dalam hal ini, saya akan harus actually-- di mana akan menjadi Tempat terbaik untuk melakukannya? TOMAS Reimers: jQuery, jadi jika Anda Google jQuery, tekan jQuery, yang pertama ARMAGHAN BEHLUM: satu yang sangat pertama. TOMAS Reimers: Atau Download. Tidak apa-apa. Hit-download v1 dan v2 di sebelah kiri. Jadi kita menggambarkan jQuery dari online seperti Anda mungkin telah melakukan. Gulir ke bawah. Up, up. ARMAGHAN BEHLUM: Oh, di sini sekarang? TOMAS Reimers: Atau itu. Yep. Jadi jQuery memiliki versi host yang berarti bahwa Anda tidak benar-benar perlu men-download, tapi kau lebih dari selamat datang untuk men-download dan tuan rumah sendiri. ARMAGHAN BEHLUM: Cool. Jadi sekarang kita memiliki jQuery. Sekarang apa yang berikutnya pada kami untuk melakukan daftar. TOMAS Reimers: Awesome. Jadi berikutnya apa yang kita butuhkan lakukan adalah kita benar-benar membutuhkan untuk memberikan p hello world ID sehingga kita bisa mengubahnya, kan? Jadi mari kita memberikan gambaran, Saya tidak tahu, mengubah teks? ARMAGHAN BEHLUM: Mari kita melakukannya dengan cara ini, saya kira. TOMAS Reimers: changeText, keren. Dan sekarang mari kita refresh halaman. Pastikan semuanya bekerja. Jadi kembali browser. Keren. Selalu pengingat yang baik bahwa ketika Anda sedang membangun sebuah website, mungkin me-refresh setiap kali Anda membuat perubahan agak signifikan hanya karena kadang-kadang Anda sengaja menjatuhkan tag, atau Anda tidak sengaja menghapus sesuatu, dan kemudian Anda memutuskan sesuatu yang kecil, tapi kemudian ketika Anda membuat perubahan besar Anda seperti, mengapa perubahan besar ini tampaknya mematahkan hal yang tidak terkait. Jadi itu selalu baik untuk mengurutkan dari pergi dan melakukan hal-cek kewarasan. Pokoknya jadi sekarang mari kita lakukan satu cek kewarasan lalu, yang mari kita coba untuk mengubah teks tanpa Leap Motion, tanpa apa-apa, hanya pada beban halaman itu akan mengubah dunia menyapa selamat tinggal menggunakan jQuery. Jadi, jika Anda ingat jQuery paparan ini fungsi tanda dolar, yang kita dapat melewati CSS pemilih untuk, yaitu teks perubahan hashtag, yang memilih elemen dengan ID perubahan teks. Dan kemudian kita akan untuk memanggil metode HTML pada objek itu kembali dengan argumen selamat tinggal string, yang akan mengubah item HTML untuk mengucapkan selamat tinggal. Mengagumkan. Yang tampaknya cukup keren. Dan sekarang ketika kita menyegarkan halaman kita akan melihat itu langsung berubah menjadi selamat tinggal, kan? Karena tidak menunggu untuk apa pun. Semacam secepat script yang berjalan itu mengubahnya menjadi selamat tinggal. Keren. Jadi sekarang mari kita membungkus bahwa dalam fungsi. Yang Tepat. Jadi kita akan ingin untuk membuat fungsi. Kita akan menyebutnya selamat tinggal. Jadi fungsi selamat tinggal akan mengambil argumen dan itu tidak benar-benar akan kembali apa-apa. Dan itu hanya akan melakukannya dalam JavaScript. Baik. Jadi fungsi selamat tinggal kami sekarang mengubah teks ke selamat tinggal, kan? Jadi ini memberi kita cara pada dasarnya perubahan teks untuk selamat tinggal setiap kali kita disebut fungsi. Yang Tepat? Jadi ini cukup keren. ARMAGHAN BEHLUM: Yah, kita bisa juga pastikan yang sekarang karena kita tidak memanggil fungsi, jika kita refresh halaman, melihat itu tidak akan untuk mengubah teks. TOMAS Reimers: Excellent. Jadi sekarang kita akan memulai untuk masuk ke dalam hal-hal Leap yang kita bicarakan. Jadi Armi, apakah Anda ingin mengambilnya dari sini atau? ARMAGHAN BEHLUM: Ya. Tentu. Aku mungkin akan membutuhkan hal-hal periksa, tapi misalnya ingat kami katakan kami ingin untuk memastikan di Options kami menetapkan memungkinkan gerakan TOMAS Reimers: Good catch. ARMAGHAN BEHLUM: Untuk menjadi benar. Dan kemudian kami merekomendasikan bahwa kalian akan menjalankan lompatan dot lingkaran, yang seperti yang kita katakan sebelumnya, memiliki dua pilihan, objek JSON yang adalah pilihan untuk bagaimana Anda ingin untuk mengkonfigurasi Leap Motion pekerjaan, dan kemudian fungsi yang akan menangkap frame sebagai callback berfungsi seperti Tomas berkata. Dan kemudian mengedit apa yang Anda inginkan hubungannya dengan fungsi tersebut. Jadi kita lulus dalam Pilihan dan sekarang kita mendefinisikan fungsi yang akan membawa dalam bingkai. Dan sekarang kita harus mendefinisikan apa fungsi yang melakukan. Ini juga demi satu masa depan, melakukan itu untuk memastikan. TOMAS Reimers: Excellent. Jadi sekarang kita memiliki ini lompatan dot fungsi loop panggilan yang pada dasarnya mengatakan menonton Leap dengan pilihan ini dan setiap kali perubahan sesuatu, menyebutnya bingkai fungsi dengan semua data bahwa Anda menyadari dalam bingkai. Kedengarannya cukup bagus. Jadi sekarang kewarasan pemeriksaan cepat, yang saya selalu merekomendasikan, adalah bahwa hanya menempatkan konsol dot log bingkai. Dan kemudian di Chrome membukanya dan melihat konsol Anda dan bermain-main dengan Leap untuk melihat frame sedang login karena kehendak yang mendapatkan gambaran tentang apa Data Anda memiliki akses ke. Dan seperti biasa jika Anda bingung, mencari referensi API. Dan kami akan menyertakan link untuk itu pada akhir ini. ARMAGHAN BEHLUM: Jadi kita refresh halaman dan kemudian kita pergi dan membuka konsol lagi. Dan sekarang kita melihat bahwa kita memiliki frame berlalu dalam, obyek kecil yang kita lihat sebelumnya. Jadi ya. Ini adalah frame kami muncul di konsol. Keren. Jadi sekarang kita telah meraih frame, seperti yang mungkin Anda ingat sebelumnya dari contoh yang kita miliki, jika kita memeriksa bingkai dot gerakan kita mendapatkan daftar gerakan yang frame terakhir tertangkap. Kita dapat memeriksa panjang array yang untuk melihat apakah Leap tertangkap setiap gerakan. Jadi, jika array adalah lebih besar dari nol maka kita tahu bahwa kita memiliki beberapa hal yang harus dilakukan. Jadi mari kita membungkus bahwa dalam sebuah jika kondisi dan sekarang di sini apa yang kita tahu adalah kita telah melihat isyarat, mari kita bertindak di atasnya. Jadi sekarang kita berada di sini kita memiliki sikap untuk memeriksa. TOMAS Reimers: Nah, yang pertama Hal itu bukan hanya satu isyarat, bisa banyak gerakan. ARMAGHAN BEHLUM: Benar. TOMAS Reimers: Jadi per gaya C klasik di sini kita mungkin akan ingin menggunakan untuk loop. ARMAGHAN BEHLUM: Di sini kita kemudian. Kami memutuskan untuk beralih melalui gerakan. Dan mari kita lihat. i ditambah, ditambah. Dan jika kita mungkin dibuat hanya gerakan var sama bingkai dot gerakan braket i, sekarang kita memiliki gerakan itu sendiri, yang hanya satu satu contoh dari objek isyarat bagi kita untuk bekerja dengan dalam hal ini untuk loop. Baiklah. TOMAS Reimers: Mari kewarasan periksa di sini lagi dan hanya menghibur dot log isyarat untuk melihat apa yang kita dapatkan. ARMAGHAN BEHLUM: Konsol dot log gerakan. Dokie Okie. Dan menyegarkan sekali lagi. TOMAS Reimers: Dan mari kita mencoba membuat isyarat. Anda akan melihat bahwa banyak yang dari, ketika ia gesekan, Anda mendapatkan banyak gerakan di konsol dan jika ia mencoba untuk melakukan lingkaran, itu hanya-- ARMAGHAN BEHLUM: Lingkaran hanya benar-benar bagus. TOMAS Reimers: Sekarang ada hal yang aneh di sini, yang dia lakukan satu lingkaran, tapi ini adalah penebangan 80 gerakan, kan? Itu banyak gerakan. Jadi semacam pertama hal untuk menyadari, dan ini dapat membingungkan, adalah bahwa isyarat tidak hanya login sekali. Pada setiap frame, benar, jadi jika saya melakukan lingkaran Leap akan mendeteksi ini perubahan, dari ini adalah perubahan, dari hal ini adalah perubahan. Dan itu akan mencatat setiap salah satu dari mereka. Tapi di setiap salah satu dari mereka, itu akan mengatakan, oh, ada isyarat sedang berlangsung. Jadi biarkan aku hanya mengatakan, hei, ada gesture dan itu sedang berlangsung. Jadi apa yang kita tidak ingin lakukan adalah mengatakan, oh, pada setiap orang dari mereka gerakan Anda ingin mengubah teks. Apa yang ingin kita lakukan adalah ketika gerakan yang berhenti, dan kita dapat memeriksa untuk itu, maka kita ingin mengubah teks. ARMAGHAN BEHLUM: Mhmm. Jadi seperti Tomas adalah menjelaskan gerakan ini mungkin muncul melalui beberapa frame, tapi misalnya, ketika kita sedang lingkaran itu, kita bisa melihat bahwa ID untuk yang satu lingkaran tunggal yang kita mungkin telah mencoba untuk menyelesaikan adalah ID yang sama di seluruh. Dan pada kenyataannya, Anda juga bisa memeriksa status. diperbarui. Dan maka ini mungkin adalah lingkaran terakhir yang, oh, baik, OK. Jadi kadang-kadang ia memperlihatkan kepada Anda status menghentikan isyarat dan itu juga menunjukkan Anda status memulai gerakan baru ketika mengakui pasti bahwa Anda sudah memulai gerakan baru. Misalnya dalam kasus ini. TOMAS Reimers: Cool. ARMAGHAN BEHLUM: Jadi ya. Dan kemudian, mari kita lihat. Anda juga dapat melihat meskipun kami sedang membuat lingkaran dan gerakan memiliki lapangan yang disebut tipe yang memberitahu kita apa gesture itu. Sehingga mungkin berguna bagi kita Anda mencoba dan melakukan apa yang kita lakukan. TOMAS Reimers: Jadi transisi kembali ke JS, hal pertama yang terjadi kepada saya juga, hanya membaca melalui kode ini adalah ada optimasi kecil, yang kita benar-benar tidak perlu ini jika kondisi, kan? Karena jika bingkai dot gerakan dot panjang adalah nol, bahwa untuk loop tidak akan berjalan pula. Jadi kita mungkin juga hanya pergi depan dan menyingkirkan itu. Sekali lagi, saat Anda menulis kode penting untuk kembali dan semacam dari refactor ketika Anda menyadari bahwa Anda bisa melakukan sesuatu yang lebih baik, atau ada cara lain untuk melakukan itu. Jadi sekarang kita hanya akan membersihkan ini dengan cepat dan juga membersihkan kode Anda. Itu masalah besar. ARMAGHAN BEHLUM: Baik Gaya ini sangat dihargai. TOMAS Reimers: Anda dapat selalu mengatakan ketika seseorang memiliki kode di mana dulu ada sebuah jika Kondisi dan kemudian mereka dihapus, tetapi mereka tidak komentarnya. Hal ini sangat jelas dan jenis terlihat jelek. ARMAGHAN BEHLUM: Jadi apa berikutnya pada kami untuk melakukan daftar? TOMAS Reimers: Jadi sekarang seperti yang kita katakan, Saya kira hal pertama yang ingin kita lakukan adalah memastikan bahwa gerakan itu sebenarnya menggesek, kan? ARMAGHAN BEHLUM: Ya. TOMAS Reimers: Jadi kalau kita mengatakan bahwa selamat tinggal kami adalah jenis seperti menggesek, kita akan pergi dengan itu menggesek, maka Hal pertama yang perlu kita katakan adalah, hei, adalah gerakan yang mengetik menggesek, kan? Tidak lingkaran atau top, tetapi apakah itu menggesek? Jadi cara kita bisa melakukan itu adalah kita dapat mengatakan gerakan dot jenis yang sama menggesek sama sebagai string. ARMAGHAN BEHLUM: [tidak terdengar] isyarat dot tipe sama sama swipe. Ada kita. TOMAS Reimers: Dan maka pertanyaan terakhir kami ingin lihat adalah isyarat dot negara yang sama berhenti sama, kan? Jadi saat itulah isyarat telah dihentikan. Saya benar-benar berpikir untuk menggesek, saya tahu ini dari atas kepala saya, tapi Anda dipersilakan untuk mencarinya, ketika Anda menggesek setiap kali register itu sampai Anda berhenti adalah sikap awal. Dan kemudian yang lalu hanya berhenti isyarat. Jadi hanya akan ada satu berhenti isyarat, yang besar bagi kita. Jadi apa yang bisa kita lakukan adalah mengatakan jika sikap dot ketik menggesek sama sama dan sikap dot status yang sama sama berhenti, maka mari kita kewarasan cek di sini menghibur gerakan log dot. Jadi kita akan kembali ke sini. Kami akan me-refresh halaman. Dan sekarang satu-satunya waktu sesuatu harus menjadi konsol dot login adalah ketika kita menggesek. Dan kami mencoba untuk menggesek dan kami melihat apa-apa. Yang Tepat? Jadi ini sebenarnya adalah masalah besar. Kami tidak melihat apa yang kami harapkan untuk. Dan debugging bisa menjadi bagian besar dari ini. Jadi hal pertama yang kita akan katakan adalah, OK, mari kita menghibur dot login jika gerakan dot ketik sama menggesek sama. ARMAGHAN BEHLUM: Ya, mari kita lakukan itu. TOMAS Reimers: Jadi kita akan kembali ke ini. Kami akan menyegarkan. Kami akan menggesek. Dan kita akan melihat banyak dari mereka. OKE. Jadi jelas masalahnya adalah status gerakan dot kami. Jadi jika kita membuka salah satu dari ini kita akan lihat di obyek dan kita akan lihat, baik, itu berhenti, tapi, oh, itu disebut negara, bukan status. Jadi jika kita kembali ke kode kita kita dapat mengatakan jika sikap dot jenis yang sama menggesek sama dan gerakan dot negara yang sama berhenti sama, maka kita akan menghibur dot log itu. Dan menyegarkan. Kami menggesek. Dan kita akan melihat bahwa di setiap menggesek, kami hanya mendapatkan satu, yang merupakan end, yang besar, kan? Itulah yang kami inginkan. ARMAGHAN BEHLUM: Yep. Dan kita juga bisa melihat bahwa ID untuk masing-masing gerakan ini terpisah. Sehingga Tomas mengatakan karena kita menangkap ini negara one stop yang ada pada akhir menggesek, kami mendapatkan gerakan yang terpisah masing-masing dari Leap Motion. Hebat Sekali. TOMAS Reimers: Mari kita pergi ke depan dan hanya melakukan hal yang terakhir, yaitu, ARMAGHAN BEHLUM: Selamat tinggal. TOMAS Reimers: Awesome. Dan sekarang mari kita periksa website kami. Satu ARMAGHAN BEHLUM: Second. Kami, ya, kita menyebutnya Selamat tinggal. Hebat Sekali. TOMAS Reimers: Tidak, Selamat tinggal adalah fungsi yang nyata. ARMAGHAN BEHLUM: Ya. Mari kita melakukan itu. TOMAS Reimers: Dan ketika kita melambaikan tangan, ia mengatakan selamat tinggal. ARMAGHAN BEHLUM: Kami memiliki kemenangan. TOMAS Reimers: hal Jadi cukup menarik. Mudah-mudahan Anda dapat membangun sesuatu lain, tetapi Anda mendapatkan ide, kan? Anda dapat mendeteksi gerakan. Anda dapat memanggil fungsi-fungsi. Dan itu yang benar-benar memberikan Anda beberapa blok bangunan yang sangat mendasar mengatakan, oh, mungkin ketika mereka geser ke atas, karena Anda juga bisa mendeteksi hal-hal seperti arah. Saya ingin mereka melakukan sesuatu. Atau ketika mereka geser ke kanan, saya ingin mereka melakukan sesuatu. Dan kita bisa mulai untuk mendapatkan kreatif dengan bagaimana sebenarnya kita akan memperbaiki situs web kami menggunakan gerakan menggesek ini atau lingkaran gerakan, atau gerakan tap, baik keran atau keran layar kunci. Dan kemudian selain itu Anda lebih dari diterima untuk bermain dengan data yang sebenarnya, tetapi jika Anda ingin melakukan bahwa kami akan menyarankan Anda pergi ke docs karena mereka benar-benar benar-benar baik. Jadi menuju ke docs sekarang. Atau apakah Anda ingin berbicara tentang itu? ARMAGHAN BEHLUM: Ya. Mari kita melakukan itu. Juga salah satu berita gembira lainnya nasihat, mencoba dan memikirkan ini dalam 3D. Jadi benar-benar mari kita menarik orang-orang gerakan sekali lagi gerakan konsol dot log dan kami melakukan itu. Datang kembali dan sekarang mari kita mencoba beberapa ini, beberapa dari mereka. Jika kita pergi in dan check out gerakan ini juga Anda dapat melihat bahwa mereka dimensi dalam tiga arah, sebenarnya. Jadi jangan hanya membatasi diri ke layar 2D meskipun Anda mungkin berada pada situs 2D. Anda dapat mencoba dan memikirkan bagaimana pengguna mungkin berinteraksi dengan situs di 3D. TOMAS Reimers: Dalam ruang 3D. ARMAGHAN BEHLUM: Tepat. Dan ya. Jadi Anda mendapatkan arah, kecepatan, semua ini bit keren informasi. TOMAS Reimers: Dan jika Anda tidak akrab dengan itu, ia pergi x, y, dan kemudian z adalah dimensi terakhir ini. Hanya sesuatu yang mungkin Anda akrab dengan jika Anda sudah berurusan dengan 3D mengkoordinasikan pesawat sebelumnya. Jika Anda belum, itu sama dengan 2D satu kecuali ada dimensi ketiga. Kami menyebutnya z. Dan segala sesuatu, semacam seperti arah, yang mana itu akan, position-- Saya pikir itu mungkin bahkan mengekspos percepatan, aku tidak yakin. ARMAGHAN BEHLUM: Ya, saya percaya. Hal itu jelas memiliki kecepatan. Aku sebenarnya tidak 100% yakin tentang percepatan. TOMAS Reimers: Ini mungkin menjadi pilihan Anda dapat menyampaikan sesuatu. Jadi posisi dan kecepatan yang terkena dalam semacam ini tiga koordinat. Jadi x, y, z atau delta x, y delta, delta z. Jadi sekarang menuju ke dokumentasi itu developer.leapmotion.com dan kemudian Anda dapat mengklik Dokumentasi. Sekali lagi, Leap Motion memiliki semua ini API yang indah, satu untuk JavaScript, satu untuk C Sharp dan Persatuan, satu untuk C ++, satu untuk Jawa, satu untuk Python, dan satu untuk Objective C. Saya pribadi akan mendorong Anda menuju JavaScript atau jika Anda ingin belajar bahasa baru, coba Python. Kedua bahasa-bahasa yang saya telah bekerja dengan sebelum dan mereka benar-benar mudah untuk belajar dan Anda sudah tahu JavaScript, yang membuatnya menjadi pesaing benar-benar baik. Satu kata peringatan ketika Anda memasukkan dokumen. Pastikan Anda berada di Documents v2.0. Karena jika Anda berada di versi satu, itu tidak akan berhasil. Juga untuk galeri misalnya. Kami menghabiskan baik 30 menit mencoba debug Leap kami sebelum kita menyadari bahwa V1 tidak bekerja dengan V2. Jadi pastikan Anda berada di versi dua. Dan kemudian aku akan membiarkan dia menunjukkan Anda dokumentasi. ARMAGHAN BEHLUM: Ya. Jadi, inilah gambaran API dan kemudian beberapa potongan-potongan informasi bahwa kita sudah memberitahu Anda. Bagus sedikit mengambang tangan di atas Leap Motion. Dan pengingat untuk berpikir tentang ruang dalam 3D. Salah satu objek pertama untuk berpikir tentang dengan Leap Motion adalah tangan, tentu saja. Kita melihat orang-orang yang diakui oleh Visualizer. Dan kemudian Anda mungkin memiliki terlihat bahwa diakui bagian dari pergelangan tangan dan lengan yang terkait dengannya. TOMAS Reimers: Jika Anda ingin untuk naikkan Visualizer. ARMAGHAN BEHLUM: Ya, mari kita lakukan itu lagi. TOMAS Reimers: Anda dapat melihat, selalu hanya pengingat yang baik untuk semacam lihat, yang Visualizer mencoba untuk menunjukkan semua data yang Leap melihat. Jadi, Anda akan melihat bahwa kita memiliki semacam ini empat poin dengan pergelangan tangan dan kemudian pergelangan tangan yang sebenarnya. Dan Anda juga memiliki bola ini di telapak tangan. Semua ini adalah poin mengakui diakui oleh lompatan. ARMAGHAN BEHLUM: Tepat. Dan dengan itu objek tangan setiap frame memiliki array tangan juga di mana Anda juga bisa mendapatkan kiri dan tangan kanan. Anda bisa mendapatkan yang arah tangan yang hadapi dengan normal arah telapak tangan, atau mereka menyebutnya telapak normal. Apa lagi yang kita miliki? Kami juga, ups. Mari kita coba dan gulir ke bawah dengan cara ini. Lengan, jari-jari diwakili oleh jari class, yang merupakan objek pointable. Jadi seperti kita katakan, kita melihat bahwa array pointables untuk masing-masing tangan. Mereka adalah sedikit jari untuk berpikir tentang. Jadi ini adalah gambaran yang baik untuk pergi melalui untuk mencoba dan memahami. TOMAS Reimers: [tidak terdengar] tangan anatomi di sana. ARMAGHAN BEHLUM: Ya, persis. Jadi ya. Ada banyak data mentah yang Leap Motion mengambil dalam menafsirkan baik untuk Anda, jadi besar Ide untuk pergi ke sini dan mencoba dan mencari tahu bagaimana Leap memiliki sudah menduga hal-hal untuk Anda dan informasi apa telah tersedia dari sana. Dan kemudian dari sana saya akan merekomendasikan masuk ke bagian kiri ini di sini, yang berjalan, baik sebenarnya tidak ada, yaitu sebenarnya hanya lebih API hal about-- TOMAS Reimers: Referensi API di bawah biasanya tempat yang baik untuk pergi. Kalian mungkin melihat ini ketika kami melakukan Google Maps PSET. Tapi referensi benar-benar hanya pergi melalui semua fungsi dan parameter tersedia di objek untuk Anda. ARMAGHAN BEHLUM: Ya. Sebagai contoh, ini adalah apa yang Saya sedang mencari sebelumnya. Ketika kita memiliki kita tangan bisa pergi dan mencari tahu bagaimana Leap merekomendasikan kepada kita untuk menemukan tangan. Seperti saya katakan sebelumnya, kami memiliki array tangan. Cari tahu apakah kita memiliki tangan dan kemudian mencoba dan ambil satu tangan untuk berinteraksi dengan cara seperti itu. Jadi itulah yang kami merekomendasikan untuk kalian. Gerak tubuh dan hal-hal juga. Dokumentasi API ini akan menjadi alat yang fantastis untuk kalian. Apakah Anda memiliki rekomendasi lain? TOMAS Reimers: Aku tidak. Saya pikir itu bagus untuk saat ini. ARMAGHAN BEHLUM: Ya, Saya kira begitu juga. Jangan ragu untuk email kami dan mendapatkan berhubungan tentang Leap Motion jika Anda mengalami mungkin masalah atau memerlukan rekomendasi. Dan kita bisa mencoba dan mencari hal-hal dengan kalian juga. Terima kasih. TOMAS Reimers: Great.