1. Processingについて
@reona396

2.  @reona396
 情報電気電子工学専攻 修士1年
 Processingについて研究中
 ブログ:だらっと学習帳
http://blog.livedoor.jp/reona396/
 BNN新社「[普及版]ジェネラティブ・アート」
日本語版編集協力
2

3.  プログラミング初心者の方へ
 Processingとはどのようなものか
 どうしてProcessingがオススメなのか
 プログラミング経験者の方へ
 近年のProcessingの進化
 プログラミング教育とProcessing
3

4. そもそもProcessingとは
4

5.  Javaベースのプログラミング言語および環境
 コンピュータグラフィック作成に特化
 もちろんオープンソース&無料！
5

6. 6

7. PDE
(Processing Develop Environment)
スケッチ
7

8. エディタ
PDE
(Processing Develop Environment)
実行ボタン
&
停止ボタン
コンソール
モードチェンジボタン
(Java,JavaScript,Android…)
8

9. PDEのモードチェンジボタンから変更可能
 Javaモード : 通常モード、実行ファイル作成
 JavaScriptモード :Webへの公開
 Androidモード : Androidアプリ作成
 Tweakモード : スケッチの気軽な編集
9

10. 1. Processing.org からProcessingの
zipファイルをダウンロード
2. zipファイルを展開
3. PDEを起動
4. コードを書く
5. 実行ボタンを押す
10

11. Processingで何が作れるのか
11

12. “Magnetosphere”
iTunes 公式ビジュアライザ
引用元 絵心がなくても簡単に絵が描けるProcessing - ＠IT 12

13. メジャーリーグにおける
勝率ランキングと
チーム運営費の比較
引用元
書籍「ビジュアライジング・データ」13

14. アメリカの郵便番号対応地図
14引用元 書籍「ビジュアライジング・データ」

15. アメリカの郵便番号対応地図
15引用元 書籍「ビジュアライジング・データ」

16. 16

17. 17

18.  ArduinoはProcessingベース
 センサーデータをProcessingでグラフ化等
18

19.  PDEに「Android」モード搭載
 ProcessingのスケッチをAndroid上で動作可能
19

20. Processingがオススメな理由
20

21.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
21

22.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
22

23. 例 : 以下の条件をProcessingとJavaで描く
 大きさは200×200
 背景は白
 (x,y) = (100,100) の位置に黒いドットを描く
23

24. 引用元
ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass
size(200, 200);
background(255);
// Draw a dot
point(100, 100);
Processingの場合
24

25. import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Color;
public class GraphicsTest extends Applet{
public void paint(Graphics g){
g.setColor(Color.white);
g.fillRect(0, 0, 200, 200);
g.setColor(Color.black);
g.drawLine(100, 100, 100, 100);
}
}
Javaの場合
25
引用元
ProcessingとJavaの関係 – Expressive Programming |Yasushi NoguchiClass

26.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
26

27. エディタは
アレじゃないと…
まずは
コンパイラを…初心者を悩ませる壁
27

28. 初心者を悩ませる壁
実際に「プログラミング」を始めるまでが
長い！！
28

29. 29
1. Processing.org からProcessingの
zipファイルをダウンロード
2. zipファイルを展開
3. PDEを起動
4. コードを書く
5. 実行ボタンを押す
Processingならこの5ステップだけ！

30.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
30

31.  プログラムを書いて実行ボタンを押すだけ
 エラーもコンソールに出力
31

32.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
32

33. 従来のプログラミングの演習
 四則演算の結果を出力
 数字のソート
33

34. 従来のプログラミングの演習
 四則演算の結果を出力
 数字のソート
本当はゲームを
作りたいのに…
なんか退屈…
これでアプリとか
作れるのかな…
34

35. Processingを利用したプログラミング演習
 単純なお絵描き
 ゲーム作り
 Webに展示して品評会
 Androidアプリへの応用
35

36. Processingを利用したプログラミング演習
 単純なお絵描き
 ゲーム作り
 Webに展示して品評会
 Androidアプリへの応用
36
モチベーションを保ったまま
学習に取り組める

37.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
37

38.  ProcessingはJavaベース
→それほどクセは強くない
 JavaScriptモードやPythonモード等
他言語との連携の充実化
 アプリケーション作成など実践につながる
38

39.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
39

40.  スケッチを実行しながらプログラムを編集
 変数、色を結果を見ながら変更可能
 他の人がつくったプログラムの解析に便利
40

41. 41

42.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
42

43.  デバッグ機能が搭載されたことで
リアルタイムにエラーを検出
 コード補完機能による入力補助
43

44.  文法が簡単
 環境を整えるのが簡単
 プログラムの結果がすぐにわかる
 プログラムの結果が楽しくわかる
 応用が利く
 充実の制作サポート
 Tweakモード
 デバッグとコード補完
 OpenProcessing
44

45.  Processingの作品投稿・共有サイト
 多くのProcessingユーザが利用
 コード閲覧やコメント機能等
45

46. 実際に授業をしてみて
46

47.  学部二年生向け「プログラミング演習」
 本来はC言語によるアルゴリズムの実装の学習
 毎回冒頭でProcessingの情報を提供
 毎回のアルゴリズム実装の課題はC言語で出題
 学期末課題としてProcessingで自由に作品制作
 学部一年生向け「情報リテラシー実習」
 本来はLinuxの操作に関する授業
 学期末にプログラミング入門として導入
47

48.  二年生の授業
 C言語より興味を持って接してもらえた
 意欲的な学生は本格的なゲームを制作
 一年生の授業
 「このしくみはゲームではこういう所に
利用されています」で注目度が上がった
 導入、Processingの独自文法の解説、
プログラミングの基礎が90分に収まった
 自分でプログラムを改造して
積極的にしくみを試している学生も多数
48

49. まとめ
49

50.  プログラミング初心者の方へ
 Processingとはどのようなものか
 どうしてProcessingがオススメなのか
 プログラミング経験者の方へ
 近年のProcessingの進化
 プログラミング教育とProcessing
50

51. ご意見、ご感想はこちらへお願いします
Twitter : @reona396
ご覧いただきありがとうございました！
解説記事もぜひご覧ください！
オープンソースカンファレンス2014福岡 に
参加しました : だらっと学習帳
51