第116回コンピュータと教育研究発表会 http://www.ipsj.or.jp/sig-reports/CE/CE116.html （17）Processing上で古典的コンソールアプリケーションも開発可能なCrowbar+Tomahawkの紹介 　　　白井達也

1. Processing上で
古典的コンソール
アプリケーションも
開発可能な @tatsuva
Crowbar+Tomahawkの紹介
鈴鹿工業高等専門学校 機械工学科 准教授
白井 達也 （専門はロボット工学）
shirai@mech.suzuka-ct.ac.jp
日本ムードル協会 広報担当理事

2. どんなプログラミング言語を習いましたか？
【メジャーな】 【ちょっと特殊な】
COBOL
FORTRAN FORTH
BASIC 【CUI】 テキスト
LOGO
HSP
機械語 パンチカードのバッチ処理 なでしこ
PASCAL 時分割（TSS)端末
Python
C言語 D言語
マイコンボード awk
C++言語 シェルスクリプト(csh, bash,…)
マイコン
Java LISP
パソコン（MS-DOS） Prolog
Ruby Smalltalk
【GUI】グラフィックス
Perl Scratch
PHP ワークステーション（UNIX) HTML
JavaScript
VBA パソコン（Windows, Mac）
TeX
パソコン（Linux）
フレームワーク Crowbar + Tomahawkの開発

3. 最初の“マイコン”はMZ-731（シャープ）だった…
フレームワーク Crowbar + Tomahawkの開発

5. プログラミング言語 Processing とは？
 Casey Reas, Ben Fryが開発
2008年11月末に
安定版Processing1.0公開
 グラフィックスが得意
 オブジェクト指向言語（Javaベース）
 統合開発環境
インストール不要でオールインワン
オープンソース
プログラミング初心者向き
→ より高度な言語習得
菊池 誠：Processingによるプログラミング教育，情報処理，Vol. 52, No. 2, pp.213-215, 2011．
フレームワーク Crowbar + Tomahawkの開発

6. プログラミング言語 Processing とは？
↑ エディター（統合開発環境）
フレームワーク Crowbar + Tomahawkの開発

7. プログラミング言語 Processing とは？
↑ 実行ウィンドウ
↑ エディター（統合開発環境）
フレームワーク Crowbar + Tomahawkの開発

8. 正式な Processing のプログラミング作法
int x, y, c; RUN後，
int i; ①は１回のみ実行
void setup() {
②は 連続実行
x = 800;
①
y = 600;
size(x, y); 描画，キー／マウス入力タイミングは，
c = 0; ②の１サイクルに１回のみ
}
void draw() {
if (++i < 200) {
fill(c += #010000);
② ellipse(random(x), random(y), random(x), random(y));
} else noLoop();
}
フレームワーク Crowbar + Tomahawkの開発

9. 素晴らしい Processing の仕方無い二つの制約
RUN ! （１） 二文字以上の文字列を入力できない問題
キーボード打鍵を検知可能（ただし，１文字ずつ）
setup() （古典的には…）
INKEY$ はあるが，INPUT()は無い
（少し新しい人には…）
draw()
getchar()はあるが，scanf()は無い
（２） テキストはグラフィックスとして描画
行端折り返しなし，スクロールなし
数値解析の課題が…
フレームワーク Crowbar + Tomahawkの開発

10. 試行錯誤の結果，「フレームワーク」を作ることに
Crowbar で解決！
フレームワーク Crowbar + Tomahawkの開発

11. パラメータ入力の宣言： Setup()
Crowbar.param(表示文字列）.setFloat(初期値）.label(ラベル名);
画面に“区間a”と表示 → 数値の入力（初期値1.0）
→ “XA”というラベル名で格納
フレームワーク Crowbar + Tomahawkの開発

12. Main() 内で入力済みのパラメータを受け取るには
フレームワーク Crowbar + Tomahawkの開発

13. 計算の途中経過をダラダラと出力しよう
フレームワーク Crowbar + Tomahawkの開発

14. 計算の途中経過をダラダラと出力しよう
フレームワーク Crowbar + Tomahawkの開発

15. 計算の途中経過をダラダラと出力しよう
crowbar.clrscr() : 画面消去
crowbar.write(String) : 文字列出力
crowbar.writeln(String) : 文字列出力＋改行
crowbar.newline() : 改行
crowbar.textColor(Color) : 文字色変更
フレームワーク Crowbar + Tomahawkの開発

16. ログファイルにも同時出力
フレームワーク Crowbar + Tomahawkの開発

17. ログファイルにも同時出力
フレームワーク Crowbar + Tomahawkの開発

18. ログファイルにも同時出力
フレームワーク Crowbar + Tomahawkの開発

19. ログファイルにも同時出力可能
フレームワーク Crowbar + Tomahawkの開発

20. 文字列をグラフィックスで描画すると遅いのでは？
フレームワーク Crowbar + Tomahawkの開発

21. 文字列をグラフィックスで描画すると遅いのでは？
フレームワーク Crowbar + Tomahawkの開発

22. 文字列をグラフィックスで描画すると遅いのでは？
WindowsXP/64
（Core i7, 2.7GHz, 6GB）
1万文字の表示速度
一文字単位の表示で506.8[s]
∴ C = 約19.7 [文字/s]
L = 2 → 約39.5[文字/s]
L = 3 → 約59.3[文字/s]
L = 2,500以降→約13,000[文字/s]
最高で，１秒あたり約216行の表示
＋ 200行程度の行単位のスクロール
フレームワーク Crowbar + Tomahawkの開発

23. Crowbarの動作 プロセス管理（status）
（初期化・説明）
スタート
（パラメータ入力）
setup()
preMain()
initCrowbar()
draw() Main()
Options() Draw()
postMain()
Setup()
（終了処理）

24. グラフィックスライブラリ Tomahawkとは？
フレームワーク Crowbar + Tomahawkの開発

25. Tomahawkとは？
領域左 領域右
フレームワーク Crowbar + Tomahawkの開発

26. Tomahawkとは？
領域左 領域右
１） 直線OK！
２） 三角形OK！
３） 四角形OK！
４） 円… 無理！
フレームワーク Crowbar + Tomahawkの開発

27. Tomahawk に Crowbar をオーバーレイ
Background
viewport1
viewport2
viewport3
Text plane (Crowbar)
フレームワーク Crowbar + Tomahawkの開発

28. Tomahawk に Crowbar をオーバーレイ
フレームワーク Crowbar + Tomahawkの開発

29. 二つの座標系： (1) ピクセル座標系
x
(0, 0)
height
y
width
フレームワーク Crowbar + Tomahawkの開発

30. 二つの座標系： (2) ワールド座標系
y
(0, 0)
x
viewport
フレームワーク Crowbar + Tomahawkの開発

31. C言語のプログラムをCrowbarに移植してみよう
#include <stdio.h> void Setup() {
crowbar.param("データ").setInt().label("data").array();
int BubSort(int x[ ], int n); }
void ShowData(int x[ ], int n);
void main(void); int NUM_DATA;
#define NUM_DATA 10
void Main() {
void main(void) { int [] x;
int x[ NUM_DATA]; x = crow.getIntArray("data");
for (int i=0; i < NUMDATA; i++) NUM_DATA = x.length;
scanf(“%d”, x + i);
printf("ソート前:¥n"); crow.writeln("ソート前:");
ShowData(x, NUM_DATA); ShowData(x, NUM_DATA);
printf("¥n¥n"); crow.newline(2);
BubSort(x, NUM_DATA); BubSort(x, NUM_DATA);
printf("¥n¥nソート後:¥n"); crow. writeln(“¥n¥nソート後:");
ShowData(x, NUM_DATA); ShowData(x, NUM_DATA);
} }
フレームワーク Crowbar + Tomahawkの開発

32. C言語のプログラムをCrowbarに移植
/* バブルソートを行う */ /* バブルソートを行う */
int BubSort(int x[ ], int n) { void BubSort(int [] x, int n) {
int i, j, temp; int i, j, temp;
for (i = 0; i < n - 1; i++) { for (i = 0; i < n - 1; i++) {
for (j = n - 1; j > i; j--) { for (j = n - 1; j > i; j--) {
if (x[j - 1] > x[j]) { if (x[j - 1] > x[j]) {
temp = x[j]; temp = x[j];
x[j] = x[j - 1]; x[j] = x[j - 1];
x[j - 1]= temp; x[j - 1]= temp;
} }
} }
ShowData(x, NUM_DATA); ShowData(x, NUM_DATA);
} }
} }
void ShowData(int x[ ], int n) { void ShowData(int [] x, int n) {
int i; int i;
for (i = 0; i < n ; i++) printf("%d¥t", x[i]); for (i = 0; i < n ; i++) crow.write(x[i]).tab(3);
printf(“¥n”); crow.newline();
} }
フレームワーク Crowbar + Tomahawkの開発

33. Processing, Crowbar, Tomahawk と教育課程
Tomahawkを使うには，
コンピュータグラフィックスの知識が必要
コンピュータグラフィックスの学習を阻害？（自分で一度はコーディングすべき）
導入 発展 応用
（A）
データ型 コンピュータグラフィックス
数値計算優先 アルゴリズム
数値計算 データ処理，数値解析
Processing + Crowbar + Tomahawk
（B）
コンピュータグラフィックス
グラフィックス
優先 データ型・数値計算 アルゴリズム データ解析
Processingのみ Crowbar → Tomahawk
低レベルのグラフィックス機能でゲームを作ったりして，
モチベーションを維持しながらプログラミングに慣れる
フレームワーク Crowbar + Tomahawkの開発

34. まとめ
•Processing は，
習得が容易かつパワフルな教育用コンピュータ言語
•Crowbar で，
「コンソール対話型」のプログラミングも可能になる
•Tomahawk で，
「ビューポート」を使ったプログラミングが可能
•Processing → Crowbar → Tomahawk で，
入門から発展まで単一の言語でカバー
•教員の「死蔵した資産」が
Crowbar + Tomahawk で再利用できる！
フレームワーク Crowbar + Tomahawkの開発

35. オープンソースです
【SourceForge.JPで公開】 ： http://sourceforge.jp/projects/crowbar/
• Subversion / Git などが無料で利用できる
• 複数名で協力してプログラム開発するための仕組み
フレームワーク Crowbar + Tomahawkの開発

36. Crowbar（クロウバー）とは？
「這いよれ！ニャル子さん」 ©逢空万太・ソフトバンク クリエイティブ
／名状しがたい製作委員会のようなもの
模写
by
近接格闘（CQC: Close Quarters Combat）でも効果を発揮 T.Shirai
フレームワーク Crowbar + Tomahawkの開発