Processing上で古典的コンソールアプリケーションも開発可能な                         @tatsuvaCrowbar+Tomahawkの紹介鈴鹿工業高等専門学校          機械工学科 准教授白井 達也 (...
どんなプログラミング言語を習いましたか? 【メジャーな】                        【ちょっと特殊な】                                COBOL FORTRAN                ...
最初の“マイコン”はMZ-731(シャープ)だった…           フレームワーク Crowbar + Tomahawkの開発
プログラミング言語 Processing とは?                        Casey Reas, Ben Fryが開発                       2008年11月末に                 ...
プログラミング言語 Processing とは? ↑ エディター(統合開発環境)            フレームワーク Crowbar + Tomahawkの開発
プログラミング言語 Processing とは?                        ↑ 実行ウィンドウ ↑ エディター(統合開発環境)            フレームワーク Crowbar + Tomahawkの開発
正式な Processing のプログラミング作法        int x, y, c;        RUN後,        int i;              ①は1回のみ実行        void setup() {      ...
素晴らしい Processing の仕方無い二つの制約   RUN !     (1) 二文字以上の文字列を入力できない問題              キーボード打鍵を検知可能(ただし,1文字ずつ)   setup()    (古典的には…) ...
試行錯誤の結果,「フレームワーク」を作ることに  Crowbar で解決!         フレームワーク Crowbar + Tomahawkの開発
パラメータ入力の宣言: Setup()Crowbar.param(表示文字列).setFloat(初期値).label(ラベル名);画面に“区間a”と表示 → 数値の入力(初期値1.0)                 → “XA”というラベル...
Main() 内で入力済みのパラメータを受け取るには          フレームワーク Crowbar + Tomahawkの開発
計算の途中経過をダラダラと出力しよう         フレームワーク Crowbar + Tomahawkの開発
計算の途中経過をダラダラと出力しよう         フレームワーク Crowbar + Tomahawkの開発
計算の途中経過をダラダラと出力しようcrowbar.clrscr()           : 画面消去crowbar.write(String)      : 文字列出力crowbar.writeln(String)    : 文字列出力+改行...
ログファイルにも同時出力         フレームワーク Crowbar + Tomahawkの開発
ログファイルにも同時出力         フレームワーク Crowbar + Tomahawkの開発
ログファイルにも同時出力         フレームワーク Crowbar + Tomahawkの開発
ログファイルにも同時出力可能         フレームワーク Crowbar + Tomahawkの開発
文字列をグラフィックスで描画すると遅いのでは?         フレームワーク Crowbar + Tomahawkの開発
文字列をグラフィックスで描画すると遅いのでは?         フレームワーク Crowbar + Tomahawkの開発
文字列をグラフィックスで描画すると遅いのでは?WindowsXP/64(Core i7, 2.7GHz, 6GB)1万文字の表示速度一文字単位の表示で506.8[s]       ∴ C = 約19.7 [文字/s]L = 2 → 約39.5[...
Crowbarの動作                         プロセス管理(status)                                     (初期化・説明)           スタート             ...
グラフィックスライブラリ Tomahawkとは?           フレームワーク Crowbar + Tomahawkの開発
Tomahawkとは?      領域左                領域右              フレームワーク Crowbar + Tomahawkの開発
Tomahawkとは?       領域左                領域右   1) 直線OK!   2) 三角形OK!   3) 四角形OK!   4) 円… 無理!               フレームワーク Crowbar + To...
Tomahawk に Crowbar をオーバーレイ    Background      viewport1                          viewport2        viewport3               ...
Tomahawk に Crowbar をオーバーレイ             フレームワーク Crowbar + Tomahawkの開発
二つの座標系: (1) ピクセル座標系               x   (0, 0)                          height   y                      width            フレー...
二つの座標系: (2) ワールド座標系      y          (0, 0)                         x           viewport               フレームワーク Crowbar + To...
C言語のプログラムをCrowbarに移植してみよう#include <stdio.h>                  void Setup() {                                      crowbar.p...
C言語のプログラムをCrowbarに移植 /* バブルソートを行う */                                     /* バブルソートを行う */int BubSort(int x[ ], int n) {    ...
Processing, Crowbar, Tomahawk と教育課程 Tomahawkを使うには,  コンピュータグラフィックスの知識が必要  コンピュータグラフィックスの学習を阻害?(自分で一度はコーディングすべき)          導入...
まとめ•Processing は,   習得が容易かつパワフルな教育用コンピュータ言語•Crowbar で,   「コンソール対話型」のプログラミングも可能になる•Tomahawk で,   「ビューポート」を使ったプログラミングが可能•Pro...
オープンソースです【SourceForge.JPで公開】 : http://sourceforge.jp/projects/crowbar/• Subversion / Git などが無料で利用できる• 複数名で協力してプログラム開発するための...
Crowbar(クロウバー)とは?                        「這いよれ!ニャル子さん」 ©逢空万太・ソフトバンク クリエイティブ                                    /名状しがたい製作委員...
2012 ce116 crowbar_snct_shirai
Upcoming SlideShare
Loading in …5
×

2012 ce116 crowbar_snct_shirai

662 views

Published on

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

Published in: Education
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
662
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

2012 ce116 crowbar_snct_shirai

  1. 1. Processing上で古典的コンソールアプリケーションも開発可能な @tatsuvaCrowbar+Tomahawkの紹介鈴鹿工業高等専門学校 機械工学科 准教授白井 達也 (専門はロボット工学)shirai@mech.suzuka-ct.ac.jp日本ムードル協会 広報担当理事
  2. 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. 3. 最初の“マイコン”はMZ-731(シャープ)だった… フレームワーク Crowbar + Tomahawkの開発
  4. 4. プログラミング言語 Processing とは?  Casey Reas, Ben Fryが開発 2008年11月末に 安定版Processing1.0公開  グラフィックスが得意  オブジェクト指向言語(Javaベース)  統合開発環境 インストール不要でオールインワン オープンソース プログラミング初心者向き → より高度な言語習得 菊池 誠:Processingによるプログラミング教育,情報処理,Vol. 52, No. 2, pp.213-215, 2011. フレームワーク Crowbar + Tomahawkの開発
  5. 5. プログラミング言語 Processing とは? ↑ エディター(統合開発環境) フレームワーク Crowbar + Tomahawkの開発
  6. 6. プログラミング言語 Processing とは? ↑ 実行ウィンドウ ↑ エディター(統合開発環境) フレームワーク Crowbar + Tomahawkの開発
  7. 7. 正式な Processing のプログラミング作法 int x, y, c; RUN後, int i; ①は1回のみ実行 void setup() { ②は 連続実行 x = 800; ① y = 600; size(x, y); 描画,キー/マウス入力タイミングは, c = 0; ②の1サイクルに1回のみ } void draw() { if (++i < 200) { fill(c += #010000);② ellipse(random(x), random(y), random(x), random(y)); } else noLoop(); } フレームワーク Crowbar + Tomahawkの開発
  8. 8. 素晴らしい Processing の仕方無い二つの制約 RUN ! (1) 二文字以上の文字列を入力できない問題 キーボード打鍵を検知可能(ただし,1文字ずつ) setup() (古典的には…) INKEY$ はあるが,INPUT()は無い (少し新しい人には…) draw() getchar()はあるが,scanf()は無い (2) テキストはグラフィックスとして描画 行端折り返しなし,スクロールなし 数値解析の課題が… フレームワーク Crowbar + Tomahawkの開発
  9. 9. 試行錯誤の結果,「フレームワーク」を作ることに Crowbar で解決! フレームワーク Crowbar + Tomahawkの開発
  10. 10. パラメータ入力の宣言: Setup()Crowbar.param(表示文字列).setFloat(初期値).label(ラベル名);画面に“区間a”と表示 → 数値の入力(初期値1.0) → “XA”というラベル名で格納 フレームワーク Crowbar + Tomahawkの開発
  11. 11. Main() 内で入力済みのパラメータを受け取るには フレームワーク Crowbar + Tomahawkの開発
  12. 12. 計算の途中経過をダラダラと出力しよう フレームワーク Crowbar + Tomahawkの開発
  13. 13. 計算の途中経過をダラダラと出力しよう フレームワーク Crowbar + Tomahawkの開発
  14. 14. 計算の途中経過をダラダラと出力しようcrowbar.clrscr() : 画面消去crowbar.write(String) : 文字列出力crowbar.writeln(String) : 文字列出力+改行crowbar.newline() : 改行crowbar.textColor(Color) : 文字色変更 フレームワーク Crowbar + Tomahawkの開発
  15. 15. ログファイルにも同時出力 フレームワーク Crowbar + Tomahawkの開発
  16. 16. ログファイルにも同時出力 フレームワーク Crowbar + Tomahawkの開発
  17. 17. ログファイルにも同時出力 フレームワーク Crowbar + Tomahawkの開発
  18. 18. ログファイルにも同時出力可能 フレームワーク Crowbar + Tomahawkの開発
  19. 19. 文字列をグラフィックスで描画すると遅いのでは? フレームワーク Crowbar + Tomahawkの開発
  20. 20. 文字列をグラフィックスで描画すると遅いのでは? フレームワーク Crowbar + Tomahawkの開発
  21. 21. 文字列をグラフィックスで描画すると遅いのでは?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]最高で,1秒あたり約216行の表示 + 200行程度の行単位のスクロール フレームワーク Crowbar + Tomahawkの開発
  22. 22. Crowbarの動作 プロセス管理(status) (初期化・説明) スタート (パラメータ入力)setup() preMain() initCrowbar() draw() Main() Options() Draw() postMain() Setup() (終了処理)
  23. 23. グラフィックスライブラリ Tomahawkとは? フレームワーク Crowbar + Tomahawkの開発
  24. 24. Tomahawkとは? 領域左 領域右 フレームワーク Crowbar + Tomahawkの開発
  25. 25. Tomahawkとは? 領域左 領域右 1) 直線OK! 2) 三角形OK! 3) 四角形OK! 4) 円… 無理! フレームワーク Crowbar + Tomahawkの開発
  26. 26. Tomahawk に Crowbar をオーバーレイ Background viewport1 viewport2 viewport3 Text plane (Crowbar) フレームワーク Crowbar + Tomahawkの開発
  27. 27. Tomahawk に Crowbar をオーバーレイ フレームワーク Crowbar + Tomahawkの開発
  28. 28. 二つの座標系: (1) ピクセル座標系 x (0, 0) height y width フレームワーク Crowbar + Tomahawkの開発
  29. 29. 二つの座標系: (2) ワールド座標系 y (0, 0) x viewport フレームワーク Crowbar + Tomahawkの開発
  30. 30. 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の開発
  31. 31. 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の開発
  32. 32. Processing, Crowbar, Tomahawk と教育課程 Tomahawkを使うには, コンピュータグラフィックスの知識が必要 コンピュータグラフィックスの学習を阻害?(自分で一度はコーディングすべき) 導入 発展 応用 (A) データ型 コンピュータグラフィックス数値計算優先 アルゴリズム 数値計算 データ処理,数値解析 Processing + Crowbar + Tomahawk (B) コンピュータグラフィックスグラフィックス 優先 データ型・数値計算 アルゴリズム データ解析 Processingのみ Crowbar → Tomahawk 低レベルのグラフィックス機能でゲームを作ったりして, モチベーションを維持しながらプログラミングに慣れる フレームワーク Crowbar + Tomahawkの開発
  33. 33. まとめ•Processing は, 習得が容易かつパワフルな教育用コンピュータ言語•Crowbar で, 「コンソール対話型」のプログラミングも可能になる•Tomahawk で, 「ビューポート」を使ったプログラミングが可能•Processing → Crowbar → Tomahawk で, 入門から発展まで単一の言語でカバー•教員の「死蔵した資産」が Crowbar + Tomahawk で再利用できる! フレームワーク Crowbar + Tomahawkの開発
  34. 34. オープンソースです【SourceForge.JPで公開】 : http://sourceforge.jp/projects/crowbar/• Subversion / Git などが無料で利用できる• 複数名で協力してプログラム開発するための仕組み フレームワーク Crowbar + Tomahawkの開発
  35. 35. Crowbar(クロウバー)とは? 「這いよれ!ニャル子さん」 ©逢空万太・ソフトバンク クリエイティブ /名状しがたい製作委員会のようなもの 模写 by 近接格闘(CQC: Close Quarters Combat)でも効果を発揮 T.Shirai フレームワーク Crowbar + Tomahawkの開発

×