More Related Content Similar to Processing上で古典的なコンソール対話型プログラミングから高度なグラフィックスプログラミングまで学習可能なフレームワークCrowbar+Tomahawkの紹介
Similar to Processing上で古典的なコンソール対話型プログラミングから高度なグラフィックスプログラミングまで学習可能なフレームワークCrowbar+Tomahawkの紹介 (20) More from 鈴鹿工業高等専門学校 (20) Processing上で古典的なコンソール対話型プログラミングから高度なグラフィックスプログラミングまで学習可能なフレームワークCrowbar+Tomahawkの紹介1. Crowbar :
○ バール,かなてこ
× シロツメクサの別称
”入力用変数”の宣言
PPrroocceessssiinnggのの特特徴徴
・Casey Reas, Ben Fryが開発
・2008年11月末に安定版Processing1.0公開
・インタラクティブなビジュアルプログラム作成が得意
・インストール(USBメモリ等に展開するだけ)
・Androidアプリケーション,Arduino開発も可能
・Windows/Mac/Linux上で開発可能
・オブジェクト指向言語(Javaベース)
・統合開発環境が用意されている
・オープンソース
初学者や情報系以外の学習者に適する
DP-16 Processing上で
古典的なコンソール対話型プログラミングから
高度なグラフィックスプログラミングまで
学習可能なフレームワークCrowbar+Tomahawkの紹介
鈴鹿工業高等専門学校 機械工学科 白井 達也 (Tatsuya SHIRAI), shirai@mech.suzuka-ct.ac.jp (@tatsuva)
今後の課題
・ドキュメントの整備(マニュアル)
・システムメッセージの言語パック対応(多言語化含む)
・Tomahawkの拡張
正しいビューポート(一つの仮想描画領域に複数のビューポート)
・Crowbar と Tomahawk の融合
各仮想描画領域に一つずつのテキスト領域を割り当て可
(現在,TomahawkとCrowbarは別レイヤー)
・関数名の見直しなど,大幅な改良を予定
PPrroocceessssiinnggのの弱弱点点
・キーボードから文字列を入力できない
(文字単位なら可)
・グラフィックスとして文字は表示
(座標を指定しないといけない)
・描画ウィンドウが一つしか開けない
Crowbar で解決
Tomahawk で解決
フレームワーク
Crowbar
グラフィックスライブラリー
Tomahawk
ゲーム作りには
最適だが…
対話型の”テキスト表示”+”キーボード入力”の
CUI(Character User Interface)の
プログラム(数値解析など)は『作れない』
crowbarClass crow;
void initCrowbar() {
crow = startCrowbar.generate(56, 30); // 画面サイズ設定(キャラクタ×行:固定)
}
void Options() {
crow.fontSize(14); // デフォルトフォントサイズ指定
crow.bgColor(#000000); // 背景色の指定
crow.systemColor(#ffffff, #ff0000, #8888ff); // システムフォント色指定
crow.startLogging(); // ログファイル記録開始
}
void Setup() {
crow.programComment("二分法のプログラム");
crow.programComment("区間aは区間bよりも小さな値(例:a = 1, b = 2)");
crow.param("区間a").setFloat(1.0).label("xa");
crow.param("区間b").setFloat(2.0).label("xb");
}
// メインルーチン
void Main() {
float err;
float a, b, c, tmp;
int loopcount;
// 許容誤差
err = 0.000001;
// 変数の代入
a = crow.getFloat("xa");
b = crow.getFloat("xb");
【Processingで変数の値を変更したい場合】
プログラム中の定数や文字列を直接変更
【Crowbarならば】
実行時にキーボードから入力可能
(制約)
1)キーボードからの入力はメインプログラム実行前に
まとめて入力しなくてはいけない
2)日本語は入力できない(仕様)
// 繰り返し計算
loopcount = 0;
displayBSM(loopcount, a, b);
while (abs(b - a) >= err) {
c = (a + b) / 2.0;
if (sgn(f(a)) == sgn(f(c))) a = c;else b = c;
loopcount++;
displayBSM(loopcount, a, b);
}
crow.textColor(#00ff00); // 文字色変更
// 最終結果
crow.newline().textColor(#ffffff).writeln(str(loopcount) + "回で収束しました.");
crow.writeln("結果は" + nf((a + b) / 2.0, 1, 10) + "です.");
}
// 問題の方程式
float f(float x) {
float y;
y = pow(x,3) - 3.0 * pow(x, 2) + 9.0 * x - 8.0;
return y;
}
// 区間aと区間bの値を表示する関数
void displayBSM(int i, float a, float b) {
crow.textColor(#ffffff).write("[" + nf(i, 3) + "] ");
crow.textColor(#00ffff).write("区間A :xa = " + nf(a, 1, 10) + " f(xa) = " + nf(f(a), 1, 10));
crow.textColor(#ffffff).write(" / ");
crow.textColor(#ff00ff).write("区間B :xb = " + nf(b, 1, 10) + " f(xb) = " + nf(f(b), 1, 10));
crow.newline();
}
aa)) OOppttiioonnss(())内内でで””入入力力用用変変数数””をを宣宣言言
crow.param("区間a").setFloat(1.0).label("xa");
crow.param("区間b").setFloat(2.0).label("xb");
bb)) 実実行行すするるととキキーーボボーードドかかららのの入入力力をを要要求求さされれるる..
cc)) MMaaiinn(())等等でで””入入力力用用変変数数””かからら読読みみ出出すす
a = crow.getFloat("xa");
b = crow.getFloat("xb");
《《画画面面ススククロローールル,,折折りり返返しし》》
文字列は,wite(), writeln(), newlin()などで出力する
(座標を意識しないで垂れ流し可能,ログファイル出力可)
:自前のテキストVRAM領域を持ち,自動的にグラフィックス描画
aa)) 自自動動ススククロローールル
画面最下行にカーソル位置が到達すると上にスクロールする
(自動スクロール量は変更可能)
bb)) 手手動動ススククロローールル
カーソルキーで上下にスクロール可能
cc)) 自自動動折折りり返返しし
画面の右端にカーソルが到達し
たら,自動的に改行されます.
(その他)
画面全消去,文字色変更,
カーソル位置移動が可能
『複数のウィンドウを開けないなら,
一つのウィンドウを分割すれば良いじゃないか』
PGraphics: Off-screen graphics buffer
メインスクリーンに描画する代わりに,PGrapicsのバッファ(複数
確保可能)に対して描画(ほとんど全ての描画コマンドが対応)
し,それをblend()でメインスクリーンに貼り付けることで実現
(注)各矩形領域を”Viewport”と呼んでいるが,現段階では厳密なViewportではない.
・タイリング,重ね合わせ
・順番入替え,半透明化, 枠線有無と太さ
表示/非表示切替,マウスクリック判定
Crowbarの文字出力は背景/前面を選択可能
各Viewport内は二つの座標系で座標を指定可能
(Viewportの設定例)
void Setup() {
crow.createView("Oval").viewBgColor(#eeeeee); // オーバルコース
crow.splitViewV("Text", 0.45).viewBgColor(#ffffff);// テキスト情報
crow.splitViewH("DMC", 0.6).viewBgColor(#eeeeee).viewPivotCenter();// DMC中心視点
// ワールド座標の設定
crow.getView("Oval").world(0.0, 0.0, 12200.0, 2000.0).worldOrigin();
crow.getView("DMC").worldY(-200.0, 200.0).worldOrigin();
// 軌跡表示用の透明なビューポートの作成
crow.cloneView("Oval", "Trajectory").setTransparentView(true);
}
標準の描画関数では
円(ellipse)のクリッピングはできない
(Tomahawkの描画例)
vp = crow.getView("Oval");
vp.fill(#ffff00).stroke(#000000).ellipse(-5500.0, 0.0, 40.0);
// ゴールエリア
vp.moveTo(-2000.0, 0.0);
drawCircle(vp, 500.0, lw);
drawCircle(vp, 300.0, lw);
drawCircle(vp, 100.0, lw);
円のクリッピング成功
【【一一つつのの言言語語ででCCUUIIかかららGGUUIIままでで!! 】】
【【((先先生生がが))死死蔵蔵ししてていいるるココーードドをを復復活活!! 】】
【【一一つつのの言言語語ででCCUUIIかかららGGUUIIままでで!! 】】
【【((先先生生がが))死死蔵蔵ししてていいるるココーードドをを復復活活!! 】】
”入力用変数”からの読み出し
(Crowbarサンプルプログラム)