leapjs+johnny-fiveでクレーンゲームを操作する

はじめまして、@ufoo68です。普段はAWSとかReactを触る業務をやっておりますが、Qiitaでは色々と雑多なことを書いたりしております。

はじめに

今回は今更ながらLeap Motionを買ったのでこれをNode.jsのライブラリで遊んだりしておりました（何年前の記事だよと思われるかもしれませんが）。きっかけは私がとあるイベントでここ２年くらい前から展示している改造クレーンゲームがありまして↓

こいつは市販のやつにArduino Nanoを仕込んだものになってます。Arduinoの中にはFirmataを書き込むことで、PC上で動くのプログラミング言語で操作することができます。今まではPythonとOpenCVを使って、手のオブジェクト検出を使って操作するものを展示していたのですが、どうも照明とか外の光加減とか手の形の個人差とかで認識精度が左右されて調整とかが難しかったのでここは思い切って、Leap Motionを買うことにしました。

まずは動画

以下が実際に動作したものになります。

Leap Motionについて

Leap Motionを操作するためにleapjsというライブラリを用いました。今回はpalmPositionという手のひらの位置を検出するメソッドを用いました。あと、注意点として、Leap Motionのドライバが認識しないという問題で躓いたりしたのでこういった情報を参考に調べるといいと思います。

クレーンゲームについて

クレーンゲームというよりは、中に仕込んだArduinoについてですが、Firmataを書き込んでいるのでArduinoに毎回新しいソフトウェアを書き込む必要が無いです。このFirmataを書き込んだArduinoとUSB経由でPCと通信するわけですが、今回はJohnny-Fiveというライブラリを用いてNode.jsとArduinoを連動させました。

Leap MotionとArduinoを連動させる

今回はここのサイトを参考に実装しました。と言ってもまずは動くもの、という感じで書いたので以下のような雑な感じの実装になりました。

const Leap = require("leapjs")
const five = require('johnny-five')

const motor = { right: 6, left: 5, down: 2, up: 3, forward: 8, back: 9 }

const board = new five.Board()
board.on('ready',  () => {
    const up = new five.Led(motor.up)
    const down = new five.Led(motor.down)
    const forward = new five.Led(motor.forward)
    const back = new five.Led(motor.back)
    const right = new five.Led(motor.right)
    const left = new five.Led(motor.left)

    const stop = () => {
        back.off()
        forward.off()
        down.off()
        up.off()
        right.off()
        left.off()
    }

    const controller = new Leap.Controller()
    controller.connect()
    controller.on('hand', hand => {
        console.log(hand.palmPosition)
        hand.palmPosition[0] > 0 ? right.on() : left.on()
        hand.palmPosition[1] > 150 ? up.on() : down.on()
        hand.palmPosition[2] < 40 ? forward.on() : back.on()
        setTimeout(stop, 500)
    })
})

一応johnny-fiveはモーター動作をサポートしたライブラリもあるのですが、今回は単純なON/OFFでいいかなと思ったのでfive.Ledを使っちゃいました。

さいごに

もう少しソフトウェアとハードウェアのアップデートをして今年のNT京都2020に挑みたいと思います。一応今回はこのアドベントカレンダーへの間に合せということで。。。
一応ソースはGitHubで公開します。ではこのへんで、次は@kimamulaさんの投稿です。お楽しみに！