Processing によるプログラミング入門の第 1 回目。研究室の勉強会で発表しました。 PowerPoint のファイルが欲しい場合は連絡をください。 [←前回] Kinect 入門 http://www.slideshare.net/Reputeless/kinect-20715686 [次回→] 第 2 回 http://www.slideshare.net/Reputeless/processing-2

1. 早稲田大学 基幹理工学部 表現工学科
長研究室 B4 鈴木 遼
21 May 2013

2. (講座の前に)準備と動作確認
 http://processing.org/download/ から
OS に応じた最新版をダウンロード
 processing を起動
（ショートカットを作っておこう）
 と入力し、▶ ボタンをクリック
size(400,400);
background(0,0,255);

3. (講座の前に)準備と動作確認

4. 今日やること
 Processing とプログラミングの基礎
 簡単なことを 22 項目だけ覚えます

5. 今日やること
 C 言語の授業を覚えていなくても OK
 新しい気持ちでメディアアートプログラミ
ングの世界へ旅立とう

6. 今日やること
 英語の勉強で言えばアルファベットを覚え
るところ
 文章を作れるようになるのはこれから

7. 1. Processingとは [1/4]
 Java というメジャーなプログラミング言
語をシンプルにして、アートやビジュアル
デザイン機能に特化させた言語とシステム
 視覚的なフィードバックをすぐに得られる
 基本文法は Java と同じなので、Java の
勉強にもなる!

8. 1. Processingとは [2/4]
 デジタルアート・ビジュアルデザイン
http://www.openprocessing.org/

9. 1. Processingとは [3/4]
 2001 年 MIT メディアラボの Casey Reas
と Benjamin Fry が最初のバージョンを開発
 Windows や Mac など様々なプラットフォー
ムで動作
 人気が上昇するにつれ、3D 描画や MIDI,
Arduino, Kinect といった様々なシステムとの
連携が拡張され、活用範囲が広がっている

10. 1. Processingとは [4/4]
 国内でも多くの書籍

11. 2. 画面の説明 [1/2]
ディスプレイ
ウィンドウ
PDE (Processing Development
Environment) ウィンドウ

12. 2. 画面の説明 [2/2]
Run ボタン
テキストエディタ
テキストエリア

13. プログラミング
 これの意味がなんとなく読み解けるなら、素質が
あります！
 さっぱりわからなくても、今日の講座でわかるよ
うになります
size(400,400);
background(0,0,255);

14. 3. 整数リテラル
 整数を書くと、それは整数リテラルと呼ば
れる数値データになる
100
-50

15. 4. テキストエリア出力 [1/3]
 println() は ( ) の中のデータをテキスト
エリアに表示する
println(xxx);
テキストエリア

16. 4. テキストエリア出力 [2/3]
println(100);

17. 4. テキストエリア出力 [3/3]
println(100);
println(50);

18. セミコロン
 命令の終了を意味する
 文章の句点と同じ「眠い 。」
println(100);
println(50);

19. 5. 計算 [1/6]
 数値データは計算ができる
 演算子
 + 足し算, - 引き算, * 掛け算, / 割り算
100+50
100-50
100*50
100/50

20. 5. 計算 [2/6]
 計算結果を表示
println(100+50);
println(100-50);
println(100*50);
println(100/50);

21. 5. 計算 [3/6]
 % 余り算
println(13%5);
println(111%50);

22. 5. 計算 [4/6]
 計算は連続できる
println(1+2+3+4+5);
println(2*2*2*2);

23. 5. 計算 [5/6]
 計算順序は算数と同じ
 掛け算・割り算・余り算が優先
 必要なら( )を使う
println(2+3*5);
println((2+3)*5);

24. 5. 計算 [6/6]
 注意: 整数の割り算は小数以下切り捨て
println(10/3);
println(71/7);

25. 6. 型
 型は、あるデータで扱える値と可能な計算
を決める
 整数リテラルは int 型
 int 型
 扱える値はおよそ -21 億～21億の整数
 できる計算は + - * / % など

26. 7. 変数 [1/5]
 名前の付いたデータ
 型名 名前 = 初期値;
 「int 型の変数 x を定義、初期値は 100」
int x = 100;

27. 7. 変数 [2/5]
int x = 100;
println(x);
println(x+10);
println(x*x);

28. 7. 変数 [3/5]
 名前が異なれば、変数をいくつでも作れる
int x = 100;
int y = 50;
println(x+y);
int a = 1, b = 2, c = 3;
println(a+b+c);

29. 7. 変数 [4/5]
 変数の値は 代入演算子= で変更できる
 「x に新しい値を代入する」と言う
int x = 100;
println(x);
x = 200;
println(x);

30. 7. 変数 [5/5]
int x = 100;
println(x);
x = x+5;
println(x);

31. 8. 複合代入演算 [1/2]
 複合代入演算子は計算と代入を同時に行う
int x = 100;
println(x);
x += 5;
println(x);
x *= 2;
println(x);

32. 8. 複合代入演算 [2/2]
 結果は？
int x = 10;
x -= 2;
x *= 5;
println(x);
x /= 4;
println(x);

33. 9.インクリメントとデクリメント
 ++ 1 増やす、-- 1 減らす
int x = 10;
++x;
++x;
println(x);
--x;
println(x);

34. 10. 比較演算 [1/3]
 数値の大小を比較する計算
 等しい ==
 等しくない !=
 右辺未満 <
 右辺以下 <=
 右辺より大きい >
 右辺以上 >=

35. 10. 比較演算 [2/3]
 比較演算の結果は true か false
 100<200 true
 50==50 true
 80>90 false
 5!=5 false

36. 10. 比較演算 [3/3]
int x = 100;
println(x<150);
println(x<=-50);
println(x>150);
println(x>=-50);

37. 11. forループ [1/3]
 継続条件を満たす間 {} の中身を繰り返す
for(int i=0; i<3; ++i)
{
println(i);
}
for(初期設定; 継続条件; ターン終了時にやること)
{
何らかの処理;
}

38. 11. forループ [2/3]
 [問題 1] 10から 0 までカウントダウン

39. 11. forループ [2/3]
 [問題 1] 10から 0 までカウントダウン
for(int i=10; i>=0; --i)
{
println(i);
}

40. 11. forループ [3/3]
 [問題 2] 0から 100 までの偶数を表示

41. 11. forループ [3/3]
 [問題 2] 0から 100 までの偶数を表示
for(int i=0; i<=100; i+=2)
{
println(i);
}
for(int i=0; i<=50; ++i)
{
println(i*2);
}

42. 復習
50%
Processing
ディスプレイウィンドウ
PDE ウインドウ
テキストエディタ
テキストエリア
整数リテラル
println()
;
+ - * / %
型
int 型
変数
複合代入演算 += *= など
++ --
比較演算
== != < <= > >=
true false
for ループ

43. 12. 画面サイズ [1/2]
 ディスプレイウィンドウのサイズを設定
 w : 幅
 h : 高さ
size(w,h);
幅
高さ

44. 12. 画面サイズ [2/2]
size(600,200);

45. 13. 画面背景 [1/3]
 背景の色を設定
 r : Red [0,255]
 g : Green [0,255]
 b : Blue [0,255]
background(r,g,b);

46. 13. 画面背景 [2/3]
size(600,400);
background(0,0,0);

47. 13. 画面背景 [3/3]
 [問題] 背景を黄色にしよう

48. 13. 画面背景 [3/3]
 [問題] 背景を黄色にしよう
size(600,400);
background(255,255,0);

49. 画面の設定
 本講座では、このサイズのウィンドウを使
います
size(600,400);

50. 14.画面の座標 size(600x400) の場合
(0,0) (599,0)
(0,399) (599,399)
+ X
+ Y

51. 15. 円を描く [1/2]
 円を描く
 x : 中心の X 座標
 y : 中心の Y 座標
 w : 円の幅
 h : 円の高さ
ellipse(x,y,w,h);

52. 15. 円を描く [2/2]
size(600,400);
ellipse(300,200,200,200);

53. 16. 線を描く [1/2]
 線を描く
 x1 : 始点の X 座標
 y1 : 始点の Y 座標
 x2 : 終点の X 座標
 y2 : 終点の Y 座標
line(x1,y1,x2,y2);

54. 16. 線を描く [2/2]
size(600,400);
line(0,100,300,200);

55. 17. 長方形を描く [1/2]
 長方形を描く
 x : 左上の X 座標
 y : 左上の Y 座標
 w : 幅
 h : 高さ
rect(x,y,w,h);

56. 17. 長方形を描く [2/2]
size(600,400);
rect(300,200,250,150);

57. 18. 枠を消す [1/2]
 これ以降は枠をつけないようにする
noStroke();

58. 18. 枠を消す [2/2]
size(600,400);
noStroke();
rect(300,200,250,150);

59. 19. 枠をつける [1/2]
 これ以降は枠を描くようにする
 r, g, b : 枠の色
stroke(r,g,b);

60. 19. 枠をつける [2/2]
size(600,400);
noStroke();
ellipse(200,200,200,200);
stroke(255,0,0);
ellipse(400,200,200,200);

61. 20. 塗りつぶしの色を変える [1/2]
 塗りつぶしの色を変える
 r, g, b : 塗りつぶしの色
fill(r,g,b);

62. 20. 塗りつぶしの色を変える [2/2]
size(600,400);
fill(0,0,255);
rect(300,200,250,150);

63. 21. 塗りつぶしをしない [1/2]
 これ以降は塗りつぶしをしない
noFill();

64. 21. 塗りつぶしをしない [2/2]
size(600,400);
noFill();
rect(300,200,250,150);

65. 22. 透過 [1/2]
 r,g,b に続き、不透明度 a [0,255] を指定
 255 は透過しない、0 は完全に透過
fill(r,g,b,a);

66. 22. 透過 [2/2]
size(600,400);
rect(50,50,300,200);
fill(0,0,255,100);
rect(100,100,300,200);

67. Complete!
size(x,y)
background(r,g,b)
画面の座標
ellipse(x,y,w,h)
line(x1,y1,x2,y2)
rect(x,y,w,h)
noStroke()
stroke(r,g,b)
fill(r,g,b)
noFill()
fill(r,g,b,a)
100%

68. Practice [1/2]
 円をたくさん表示
size(600,400);
for(int x=0; x<7; ++x)
{
ellipse(x*100,200,100,100);
}

69. Practice [2/2]
 円をもっと表示
size(600,400);
for(int x=0; x<7; ++x)
{
for(int y=0; y<5; ++y)
{
ellipse(x*100,y*100,100,100);
}
}

70. Challenge
 好きな色でグラデーションを作ろう

71. 補足|『ジェネラティブ・アート』
 講座で紹介した Processing の本
 「メディアアート表現論」授業の沖先生が翻訳
 コンピュータ生成アートの醍醐味の紹介
ジェネラティブ・アート
- Processingによる実践ガイド

72. 補足| 公式リファレンス

73. 補足| 公式サンプル

74.  続きは再来週の第 2 回で！

75. Questions?
@Reputeless