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

2 July 2013

今日やること

Processing とプログラミングの基礎

簡単なことを 13 項目だけ覚えます

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

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 は毎回 新しく作り直される

3. 配列

同じ型のデータを複数連続して集め、同じ

名前で操作できるようにしたもの

型名[] 名前 = new 型名[サイズ] で作成

int[] iArray = new int[100]; double[] dArray = new double[50];

▲ 100 個の要素を持つ int 型の配列

▲ 50 個の要素を持つ double 型の配列

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

5. 配列の範囲外アクセス

配列の index が間違った範囲にある場合、

エラーになる

int[] a = new int[3]; a[0] = 100; a[1] = 200; a[10] = 300; // Error! println(a[0]+ " " +a[1]+ " " + a[2]);

6. 配列の初期値

波括弧 {} を使うと、要素の初期値を指定し

て配列を作ることができる

new で作った int または double 型の配列の

要素の初期値は 0

int[] a = { 100, 200, 300 }; println(a[0]+ " " +a[1]+ " " + a[2]);

100 200 300

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

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

9. width と height [1/2]

width と height はディスプレイウィンド

ウの幅と高さを表す変数

size(600,400); println(width + "x" + height);

600x400

9. width と height [2/2]

size(600,400); rect(0,0,width/2,height/2);

10. マウス座標 [1/2]

mouseX と mouseY はマウスカーソルの

位置を表す変数

void setup() { size(600,400); } void draw() { println(mouseX + " " + mouseY); }

10. マウス座標 [2/2]

void setup() { size(600,400); noStroke(); } void draw() { ellipse(mouseX,mouseY,10,10); }

11. マウスボタン [1/2]

mousePressed はマウスのボタンが押さ

れていたら true, 押されていなかったら

false になる boolean 型の変数

void setup() { size(600,400); } void draw() { println(mousePressed); }

11. マウスボタン [2/2]

void setup() { size(600,400); noStroke(); } void draw() { if(mousePressed) { ellipse(mouseX,mouseY,10,10); } }

12. テキスト [1/2]

テキストを描く

str 表示するテキスト

x, y 描き始める位置の座標（左下）

text(str, x, y);

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); }

13. テキストのサイズ [1/2]

テキストのサイズを変更する

size テキストのサイズ

textSize(size);

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); }

Complete!

100%

boolean 型 グローバル変数 配列 添え字式 [] 配列の範囲外アクセス 配列のサイズ

width height mouseX mouseY mousePressed text() textSize()

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; } }

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; } } }

Challenge

マウスの操作で変化するアニメーションを

作ろう！

続きは再来週の第 5 回で！

Questions?

@Reputeless