Dash Code for iPhone と Processing.js でちょっとお遊び

-> i --- Play <-

Dash Code for iPhone と Processing.js でちょっとお遊び

ほとんど役に立たないけど・・・名付けてiProcessing.js

(.MacユーザーならWebで公開可・・・のはず）
→　公開出来た！。iPhoneがベストだけどMacのSafariでも動く。【１０月１２日　１５：３０　追記】
例えば、
stroke(255);line(10,10,200,200);
で左上から右下への線が引ける。

【解説 １０月１２日　１７：００　追記】

iProcessing.jsの出来るまで

１．JavaScriptで動くProcessing環境、Processing.jsをここから入手
　processing.jsとinit.js

２．ADCメンバーになってiPhoneSDKを入手
　xcode3.1,iPhone Libs,iPhone Simulator,DashCode for iPhoneが同梱されている。

３．DashCodeのWidgetテンプレートでiProcessing.jsという名前のスケルトンプロジェクトを作る。
　前面には全面をカバーするCanvasと「i」ボタン、背面にはタイトル、テキストボックス、Playボタンを配置

４．プロジェクト構成（ファイル）にprocessing.jsとinit.jsをコピーする。

５．プロジェクトのindex.htmlファイルに下記の行を追加する。

    <script type="text/javascript" src="Parts/utilities.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/setup.js" charset="utf-8"></script>
   これ！ <script type="text/javascript" src="processing.js"></script>
   これ！ <script type="text/javascript" src="init.js"></script>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Transitions.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/StackLayout.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/Text.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/PushButton.js" charset="utf-8"></script>
    <script type="text/javascript" src="Parts/ButtonHandler.js" charset="utf-8"></script>

６．プロジェクトのmain.jsファイルに以下のスクリプトを追加する

function flipToFront(event)
{
    var views = document.getElementById('views');
    var front = document.getElementById('front');
    if (views && views.object && front) {
        views.object.setCurrentView(front, true);
    }
  // canvas 要素　＜これ！
  var canvas = document.getElementsByTagName('canvas')[0];
  // Processing のソースコード　＜これ！
  var code = document.getElementsByTagName('textarea')[0].value;
  // Processing 関数を呼び出す　＜これ！
  Processing(canvas, code);
}

以上で出来上がり。

Webに公開するには、DasCodeで保存したローカルサイト（user名/サイト/iProcessin.js）をアップロードする。
(無料のGeoCityじゃあ広告が邪魔するけれど、アップロード可能。有料のGeoCityなら問題ない）
(.MacならDashCodeのメニューで一発の模様）

６．のスクリプトを見ての通り、
前面に配置したcanvasのインスタンスと背面に配置したテキストボックスに入れられている内容を取り出して、前面への切り替え時に描画モジュールに渡せばオK。

---

Processing については、
・日本語サポートサイトからたどれるP5インフォメーション→言語が参考になる。
（解説してあるのは一昔前の版だから注意が必要だけど、loop()→draw()の読み替えだけで大抵OK）
・山本徹(thoru)さんがFunProce55ingで解説してくれている。（【簡潔】で【わかり易く】、【楽しい】解説）
例題集は習作集と区別するためにこちらに置いている。
・P5のスケッチからアプレットを作り、【ジオシティーズ】にアップする手順をまとめたので、参考に。
WiiRemoteアクセスライブラリWrj4P5はここ