加賀一稿一記

心は戦国

バーサライタの点灯パターン計算報告書

概要
ロボコン30お祝いロボット | ロボコン30th | ロボコン30thに参加しました.
今回作成したロボットは次の動画で確認できます.

この記事では特に私が担当した点灯パターンの計算についてまとめます.
それ以外の大部分は
ロボコン30th記念ロボット「バーサライタ」製作過程 | jp3cyc's blog
をご覧ください.


1. はじめに
私は高専ロボコンを見て育ったため「高専ロボコンに出たい」の一心で高専に入学したのに,結局一度もロボコンに出ることなく卒業してしまいました.
別に5年間遊んで暮らしていたわけではなくプロコンとかに参加していたのですが,
(一緒にプロコンに出てた人のブログ記事:
第25回高専プロコン競技部門参加記 - kyuridenamidaのブログ

心のどこかで「ロボコンにも参加してみたかったな...」という気持ちもくすぶっていました.

そんな後悔を引きずったある日,誰でも参加できるユルめのロボコンが開かれることを知り,各地に散った友人たちと参加することを決めたのです.
参加するとは言ってもロボットが組めるわけでも制御ができるわけでもないのですが,簡単なプログラム(とくに画像処理とか)はお手伝いできる自信がありました.
本イベントの内容は「ロゴをロボットで目立たせろ」なので,ロゴ画像周辺を担当しました.

2. 画像処理パート
2.1 2値画像作成
さて,ロゴはいくつかのファイル形式(ai, pdf, eps)で提供されていたのですが,私が画像処理で扱うのに適した形式ではありませんでした.
f:id:kgsn:20170426160055p:plain
(↑公式サイトスクショ,なぞり書き練習画像みたいなのがロゴ)

そこでまずpdfからpngを作り,適当に各マス毎にトリミングし,いい感じに画素値を処理してグレーの部分だけを取り出した2値画像を作成しました.
f:id:kgsn:20170426160946p:plain
(↑2値画像)

これでとりあえず簡単な処理はできるようになりました.

2.2 バーサライタシミュレータ
話し合いによりバーサライタを作ることが決まったので,とりあえず簡単なシミュレータを作りました.
f:id:kgsn:20170426185510p:plain
(↑パラメータ入力画面)

f:id:kgsn:20170426184015p:plain
(↑入力画像とシミュレート結果)

これは画像から点灯時の雰囲気をシミュレートするためのもので,例えばLEDの数であったり間隔であったりといった数値を簡単に試してもらうことを目的としました.
入力画像を2値化し,入力されたパラメータからLEDがどの位置でON/OFF切替できるかを計算し,その位置が画像上でONなら円を描画しています.

2.3 点灯パターン計算機
実機は遠く離れた地で開発されていましたが,試作品を持ってきてくれた時がありました.
その時の記憶と追加でやり取りした内容から,点灯パターン計算機の(とても簡単な)仕様を考えました.

  • 入力は分割数のみ(LEDの配置情報や回転方向,画像データなどの不変情報は埋め込み)
    • 分割数:バーサライタが1周する間にON/OFFを切り替える回数,実機の速度と応相談
  • 出力は点灯パターンとシミュレート結果(文字別に出力)
    • 点灯パターン:Arduinoのプログラムに埋め込みやすい形式の01データ
    • シミュレート結果:点灯した場合の見え方

点灯パターンの計算方法はとても簡単です.
分割数に応じた弧をLEDごとに考えて,2値画像上で点灯かどうかを調べます.
点灯が多ければシミュレート結果に反映させて1を出力,そうでなければ0を出力します.
f:id:kgsn:20170426204849p:plain
(↑点灯パターン計算イメージ,分割数は20)

これを各文字,各LED,各弧に対して行うことで点灯パターンが計算されます.
f:id:kgsn:20170426191536p:plain
(↑点灯パターン計算機画面)

f:id:kgsn:20170426205459p:plain
(↑実際の点灯画像とシミュレート画像の比較,分割数は40)

3. 処理言語について
何枚か示したシミュレータや計算機の画面からお気づきになると思いますが,インターフェースはHTML5+JavaScriptで記述しています.
画像処理はよくC++OpenCVで描くのですが,複数人開発なため実行環境の辺りで手間取る気がしました.
exeを送り付けても相手が非Windowsユーザだと困りますし,じゃあコードだけ送るからそっちで環境整えてコンパイルしろって言うのもよろしくありません.
(プロコンならコードを送り付けていたと思いますが,今回はロボコンなので...)

そこで選んだのがHTML5+JavaScriptです.
たいていのPCには動作環境であるブラウザが入っていますし,数値入力はもちろんHTML5のFile APIでファイル入力も簡単に行えます.
HTML5canvasでは画像処理の基本的な操作が可能なので,今回のような簡単な処理なら画像処理用のサーバを立てるまでもありません.
GitHubでコードを管理してPagesの機能で公開しておけばURLを送るだけでみんな利用できますし,コードの修正も簡単!
シミュレータはPagesの機能で公開していましたが,点灯パターン計算機は書いた環境がプロキシ等の都合でGitHubを使いにくい環境だったので,結局コードをzipでまとめて送ることになりました.

4. 余談
今回の開発には直接関係しませんが,シミュレータがブラウザで利用できる利点としてスマホでできるという点があります.
スマホはどこでも使えるだけでなく良いカメラがついていますので,「わいわい会議しながらイメージ図を描く」→「図を写真に撮って即シミュレート」の流れができます.
(今回はそもそも顔を合わせることがほとんどなかった・・・)
f:id:kgsn:20170427105136p:plain
(↑ホワイトボードに書いたデザインとそれの点灯シミュレーション)

スマホアプリを作るとなると少々面倒ですが,webアプリならコードをコミット即公開の流れが可能です.
簡易シミュレータはコード量が少なくて低コストでありながら,イメージがしやすくなって開発の助けになる(と信じてる)ので,何かを作るチームに放り込まれたプログラマはぜひ取り組んでみてください.

謝辞
(これは高専ロボコンそのものではないのですが,)少しでもロボコンに携われる機会をくれ,作業をくれた方々に感謝します.