konashiをProcessing.jsとともに使う　-　konashi

konashi

konashiをProcessing.jsとともに使う　-　konashi †

私について †

konashiの開発元であるユカイ工学でアルバイトをしておりました．(過去)
当時開発に関わっていた中の人として，konashi.jsについて解説しろという要請がありそうだと感じましたので，急いで書かせていただきました．
この記事の内容について質問等がありましたらコメント欄にお書きいただくか，私の個人メールアドレス

tokoro10g[atmark]tokor.org

までお願いします．(@に置き換えてください)

konashi.jsについて †

konashi.jsは，iOS向けアプリとそれに対応したJavascriptライブラリです．

Javascript,HTML,CSSをブラウザ上でコーディングして実行できるサービス"jsdo.it"の開発元であるカヤックさんにご協力いただき，jsdo.it上でkonashiを制御するコードを作成し，アプリでそれを読み込んで実行することができるようになっています．

konashi.js | エンジニアとデザイナ・アーティストを繋ぐアプリ

これまでのkonashi-ios-sdkでは，開発にMacとiOS Developer Programのライセンスが必要でしたが，このkonashi.jsを利用することによって，Mac以外の環境でもkonashiを動かすプログラムを書くことができます．
また，WebディベロッパやWebデザイナの方にはとても扱いやすいことと思います．

アプリはApp Storeから無料でダウンロード出来ますので，是非お試しください．
このチュートリアルでは，このアプリとjsdo.itを使用してコーディングを行なっていきます．

Processing.jsについて †

Processingは，ビジュアライズのためのプログラミング言語・開発環境であり，デザインやアートの世界においてはもちろん，グラフネットワークやクラスタリングなどの可視化にも幅広く利用されています．

単純な図形の描画・アニメーションに加えて，最近のものは3D表示にも対応しており，様々なデータの表現が可能です．

このProcessingの動作に相当するものをJavascriptからも実行できるようにと開発されたのがProcessing.jsです．

Processing.jsには，Processingのコードをそのまま渡すか，Javascriptにコンパイルしたものを実行するかの2通りの動作方法があります．
konashiと連携させるためにはProcessingの動作部分にいくつか手を加える必要があるので，後者を採用することになります．

なお，2013年7月現在，安定版としてバージョン1.4.1が公開されています．

konashiとの連携 †

概要 †

それでは，Processing.jsのサイトに公開されているボールが弾むサンプルBouncyBubblesを例にとって説明します．
目標は，ボタンを押している間ボールの弾み具合を変えるというものを作成するところまでです．
私が作成したサンプルはボタンを押すとボールの数を増やすというものでしたが，ボールを追加するためのスクリプトが少しむずかしいため，今回は簡単にコーディングできそうな弾み具合の変更を実装します．

必要なもの †

• konashiと電源(もちろん動作させるために必要です)
• 対応したiPhoneまたはiPad(対応状況はhttp://konashi.ux-xu.comをごらんください．)
• konashi.jsのアプリ(App Storeから無料で入手しましょう)
• jsdo.itのアカウント(登録しましょう)

forkからはじめよう †

まずjsdo.itでkonashiの初歩をforkしてみましょう．

forkすると編集画面が出てきます．

とりあえずこの状況で"Finish Editing"をクリックして，iPhone/iPadから動作を確認してみてください．

Processing.jsサンプルコードの変換 †

Processing.jsのサンプルBouncyBubblesのページのソースコードをまずまるごとコピーします．

次に，同じページの右側にあるメニューから"Processing.js Helper"をクリックします．

すると，Processingのコードを貼り付ける場所が表示されます．

これはProcessingのコードをProcessing.jsで扱えるJavascriptのコードにコンパイルできるツールです．ここで生成したコードを改造してkonashiと連携させます．
コードを貼り付けて"Convert to JS"をクリックすると，Javascriptのコードが生成されます．

変換後のコードを使えるようにする †

このJavascriptコードは，関数オブジェクトが生成されているだけなので，Processing.jsで利用するには少しだけコードを付け足す必要があります．
jsdo.itの編集画面に戻って，生成されたコードを一番最初に貼り付けて，その直前に

var sketch=

と記述します．つまり，

var sketch=(function($p) {
    var Ball = (function() {
        function Ball() {
            var $this_1 = this;
...

のような感じになります．念のため画像でも示すとこんな感じになります．

次に，貼りつけたコードの最後にセミコロンを追加します．（追加しても動くかもしれないけど御行儀よく行きましょう．）

このような感じになれば大丈夫です．

キャンバスの準備 †

次に，このProcessingのコードの実行結果を描画するためのcanvasを作成します．
HTMLを開いて，もともとあったpタグを削除し，canvasタグを次のように挿入します．

上の画像のようについでにメッセージも変えておきましょう．

Processing.jsの読み込み †

また，HTML中にProcessing.jsを読みこませるためのscriptタグを記述します．
まず，Processing.jsのダウンロードページに飛んでprocessing-1.4.1.min.jsのアドレスをコピーしましょう．

こういうのって直リンクするとお行儀が悪くて怒られるんですが，今回はテスト用途なので直リンク張っちゃいましょう．(さっきお行儀よくとか言ったのに・・・)
(気になる方は，jsdo.itのファイルアップロード機能を使ってリンクを生成してください．)
で，貼り付けます．

(scriptタグを閉じ忘れないように気をつけてください)

キャンバスとスケッチを結びつける †

次に，またJavascriptに戻り，作成したcanvasとsketchを結びつけます．

var canvas=document.getElementById("canvas-processing");
// attaching the sketch to the canvas
var p = new Processing(canvas, sketch);

を先ほどセミコロンを挿入した次の行に追記します(コメントの部分は不要です)．

ここまででProcessing.jsの準備は完了です．お疲れ様でした．
jsdo.it上でProcessingのコードが動作していることを確認できます．

この段階でのコードを載せておきます．
Javascript:konashi-processing-01.js
HTML　　　:konashi-processing-01.html

konashiの準備完了時の処理の記述 †

まずkonashiの準備が完了した時の処理を記述します．
今回作成するものは基板にあるスイッチ(S1)の入力を受け取るだけのシンプルなものですので，ready時の処理も非常に簡単です．
S1に相当するピン(PIO0)をインプットに設定するだけですので，以下のように記述すればOKです．

fork元のサンプルで記述されているk.ready関数の中身をこれに置き換えます．

スイッチを押した時の処理の記述 †

次に，スイッチを押した時の処理を記述します．
ボールの弾み具合を決定する変数 spring がコード内に定義されていますので，konashiの入力から変更できるようにグローバルな場所に変数を移します．
要するにこれを

ここに動かします(カット&ペーストです．コピー&ペーストではありません．)

これでkonashiのイベントハンドラから値を変更できるようになりました．

konashiのIOピンの変化は，JavascriptではupdatePioInput関数で扱うことができます．
konashi - Documents updatePioInput

updatePioInput関数の引数には，インプットピンが変化した時に実行させたい関数を記述します．
実行させたい関数には現在のすべてのインプットピンの値が引数として渡されるようになっています．
つまり，こんな感じに書くことができます．

もちろん，digitalRead関数を用いてピンの状態を取得することもできます．

わかる方はこの2つの例を見ていただいても分かる通り，konashiへの命令や状態の変化の取得は非同期に行うことになります．
今回は後者を使おうと思います．(前者の場合，S1の値だけを取り出すには少しテクニック的な処理を書く必要があるため)

さて，処理を記述して行きましょう．
ボタンが押されている間(つまり，S1がHIGHになってからLOWに戻るまでの間)だけspringの値を0.5にしてみます．

これをjsdo.itのJavascript編集画面に追記します．

この段階でのJavascriptコード

この状態でiPhone/iPad上でkonashi.jsアプリを起動して実行してみましょう．

konashiのスイッチをポチポチと何度か押してみると，ボールが激しく弾むのがわかると思います．

これで今回のチュートリアルの内容は終わりです．お疲れ様でした．

konashi.jsとProcessing.jsの連携のコツ †

(そのうち書く)
Processingのコードにkonashi向けのコードを埋め込めるようにしたいなあ

コメント欄 †

お名前: