processingによるプログラミング入門 第4回
DESCRIPTION
Processing によるプログラミング入門の第 4 回目。研究室の勉強会で発表しました。 PowerPoint のファイルが欲しい場合は連絡をください。 [←前回] 第 3 回 http://www.slideshare.net/Reputeless/processing-3-23489861 [次回→] 第 5 回 http://www.slideshare.net/Reputeless/processing-5TRANSCRIPT
![Page 1: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/1.jpg)
早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼
2 July 2013
![Page 2: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/2.jpg)
今日やること
Processing とプログラミングの基礎
簡単なことを 13 項目だけ覚えます
![Page 3: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/3.jpg)
1. boolean 型
true と false は boolean 型の値
boolean 型の有効な値は true か false のみ
boolean 型の値は if の条件に直接使える
boolean a = true, b = false; println(a + " " + b); if(a) { println("AAA"); } if(b) { println("BBB"); }
true false AAA
![Page 4: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/4.jpg)
2. グローバル変数
setup/draw ブロックの外で作られた変数
それ以降のどこでも使うことができ、値は保存される
int global = 100; void draw() { int local = 100; ++global; ++local; println(global + " " + local); }
101 101 102 101 103 101 104 101 105 101 106 101 107 101 …
▲ 変数 local は毎回 新しく作り直される
![Page 5: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/5.jpg)
3. 配列
同じ型のデータを複数連続して集め、同じ
名前で操作できるようにしたもの
型名[] 名前 = new 型名[サイズ] で作成
int[] iArray = new int[100]; double[] dArray = new double[50];
▲ 100 個の要素を持つ int 型の配列
▲ 50 個の要素を持つ double 型の配列
![Page 6: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/6.jpg)
4. 配列の要素へのアクセス
配列の要素は添え字 [index] を使って読み書きできる。1 つ目の要素の index は 0, 2 つ目の要素の index は 1 となる。したがってサイズ N の配列における最大 index は N-1
int[] a = new int[3]; a[0] = 100; a[1] = 200; a[2] = 300; println(a[0]+ " " +a[1]+ " " + a[2]);
100 200 300
![Page 7: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/7.jpg)
5. 配列の範囲外アクセス
配列の index が間違った範囲にある場合、
エラーになる
int[] a = new int[3]; a[0] = 100; a[1] = 200; a[10] = 300; // Error! println(a[0]+ " " +a[1]+ " " + a[2]);
![Page 8: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/8.jpg)
6. 配列の初期値
波括弧 {} を使うと、要素の初期値を指定し
て配列を作ることができる
new で作った int または double 型の配列の
要素の初期値は 0
int[] a = { 100, 200, 300 }; println(a[0]+ " " +a[1]+ " " + a[2]);
100 200 300
![Page 9: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/9.jpg)
7. 配列のサイズ
.length を使うと配列のサイズを取得できる
int[] a = new int[150]; double[] b = { 1.2, 3.4, 5.6, 7.8 }; println(a.length); println(b.length);
150 4
![Page 10: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/10.jpg)
8. 配列とループ
for 文のループカウンタを index として使うことで、配列の操作を簡潔に記述できる
int[] a = new int[8]; for(int i=0; i<a.length; ++i) { a[i] = i*100; } for(int i=0; i<a.length; ++i) { println(a[i]); }
0 100 200 300 400 500 600 700
![Page 11: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/11.jpg)
9. width と height [1/2]
width と height はディスプレイウィンド
ウの幅と高さを表す変数
size(600,400); println(width + "x" + height);
600x400
![Page 12: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/12.jpg)
9. width と height [2/2]
size(600,400); rect(0,0,width/2,height/2);
![Page 13: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/13.jpg)
10. マウス座標 [1/2]
mouseX と mouseY はマウスカーソルの
位置を表す変数
void setup() { size(600,400); } void draw() { println(mouseX + " " + mouseY); }
![Page 14: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/14.jpg)
10. マウス座標 [2/2]
void setup() { size(600,400); noStroke(); } void draw() { ellipse(mouseX,mouseY,10,10); }
![Page 15: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/15.jpg)
11. マウスボタン [1/2]
mousePressed はマウスのボタンが押さ
れていたら true, 押されていなかったら
false になる boolean 型の変数
void setup() { size(600,400); } void draw() { println(mousePressed); }
![Page 16: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/16.jpg)
11. マウスボタン [2/2]
void setup() { size(600,400); noStroke(); } void draw() { if(mousePressed) { ellipse(mouseX,mouseY,10,10); } }
![Page 17: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/17.jpg)
12. テキスト [1/2]
テキストを描く
str 表示するテキスト
x, y 描き始める位置の座標(左下)
text(str, x, y);
![Page 18: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/18.jpg)
12. テキスト [2/2]
void setup() { size(600,400); } void draw() { background(0,0,0); text("One",0,100); text("Two",50,200); text(3,100,300); }
![Page 19: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/19.jpg)
13. テキストのサイズ [1/2]
テキストのサイズを変更する
size テキストのサイズ
textSize(size);
![Page 20: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/20.jpg)
13. テキストのサイズ [2/2]
void setup() { size(600,400); textSize(60); } void draw() { background(0,0,0); text("One",0,100); text("Two",50,200); text(3,100,300); }
![Page 21: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/21.jpg)
Complete!
100%
boolean 型 グローバル変数 配列 添え字式 [] 配列の範囲外アクセス 配列のサイズ
width height mouseX mouseY mousePressed text() textSize()
![Page 22: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/22.jpg)
Practice [1/2]
boolean currentlyMousePressed = false; int previousX = 0, previousY = 0; void setup() { size(600,400); background(255,255,255); stroke(0,120,255); strokeWeight(5); // width of the line } void draw() { if(mousePressed) { if(!currentlyMousePressed) { previousX = mouseX; previousY = mouseY; } line(previousX,previousY,mouseX,mouseY); previousX = mouseX; previousY = mouseY; currentlyMousePressed = true; } else { currentlyMousePressed = false; } }
![Page 23: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/23.jpg)
Practice [2/2]
int[] blocks = new int[64]; void setup() { size(600,400); colorMode(HSB,360,1.0,1.0); } void draw() { for(int i=0; i<blocks.length; ++i) { if(blocks[i]==1) { fill(i*5, 1.0, 1.0); } else { fill(0, 0.0, 1.0); } rect(i*10,0,64,height); if(mousePressed) { int index = mouseX/10; blocks[index] = 1; } } }
![Page 24: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/24.jpg)
Challenge
マウスの操作で変化するアニメーションを
作ろう!
![Page 25: Processingによるプログラミング入門 第4回](https://reader033.vdocuments.net/reader033/viewer/2022052311/5564b102d8b42a366c8b573c/html5/thumbnails/25.jpg)
続きは再来週の第 5 回で!