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

2.
今日やること
 Processing とプログラミングの基礎
 今日は 10 項目

3.
1. スケッチを保存する
 プログラムを保存する
 場所は Windows だとドキュメント/Processing

4.
画像を扱う準備
 画像ファイル（.png, .jpg, .gif, .tga）を用
意する
 画像の名前を覚えやすいものに変える
例) picture.png
 画像ファイルは 1. のスケッチと同じフォ
ルダに保存

5.
画像を扱う準備

6.
2. 画像
 PImage 型の変数は画像を保持することが
できる
PImage picture;
void setup()
{
size(600,400);
}
void draw()
{
}

7.
3. 画像データを読み込む [1/2]
 loadImage(filename) は指定されたファイ
ル名の画像を読み込む
PImage picture;
void setup()
{
size(600,400);
picture = loadImage(“picture.png”);
}
void draw()
{
}

8.
3. 画像データを読み込む [2/2]
 draw ブロックで毎フレーム画像を読み込む
と動作が重くなるので避ける
void setup()
{
size(600,400);
}
void draw()
{
PImage picture = loadImage(“picture.png”);
}

9.
4. 画像データを表示する [1/2]
 image(p,x,y) は PImage 型のデータ p を座
標 x, y の位置に表示する
PImage picture;
void setup()
{
size(600,400);
picture = loadImage(“picture.png”);
}
void draw()
{
image(picture,30,50);
}

10.
4. 画像データを表示する [2/2]
 問題) 画像がマウスカーソルについてくるよ
うなプログラムをつくる
PImage picture;
void setup()
{
size(600,400);
picture = loadImage(“picture.png”);
}
void draw()
{
background(255,255,255);
image(picture,mouseX,mouseY);
}

11.
5. フレームの保存 [1/2]
 save(filename) は現在のウィンドウを画
像ファイルとして保存する
 draw ブロックの中で毎回 save をすると動
作が重くなるので注意
save(filename);

12.
5. フレームの保存 [2/2]
void setup()
{
size(600,400);
fill(0,0,255);
}
void draw()
{
background(255,255,255);
ellipse(frameCount,200,80,80);
if(frameCount==100)
{
save(“mypicture.png”);
}
}

13.
6. 複数の選択肢 [1/2]
 else if で追加の条件を指定できる
if(条件A)
{
// 条件 A が true
}
else if(条件B)
{
// それ以外で 条件 B が true
}
else
{
// どちらの条件にも当てはまらない
}

14.
6. 複数の選択肢 [2/2]
void setup()
{
size(600,400);
float value = random(0,3);
println(value);
if(value<1.0)
{
background(255,0,0);
}
else if(value<2.0)
{
background(0,255,0);
}
else
{
background(0,0,255);
}
}
void draw()
{
}

15.
7. 文字リテラル
 シングルクオーテーション ‘ で囲まれた文
字は文字リテラルと呼ばれる文字データ
 文字列リテラルと違って 1 文字
println(‘a’);
println(‘B’);
println(‘?’);

16.
8. char 型
 文字リテラルは char (チャー) 型
char a = ‘a’;
char b = ‘B’;
println(a);
println(b);

17.
9. キーボード入力 [1/2]
 keyPressed はキーボードのキーが押され
ていたら true, 押されていなかったら
false になる boolean 型の変数
void setup()
{
size(600,400);
}
void draw()
{
println(keyPressed);
}

18.
9. キーボード入力 [2/2]
void setup()
{
size(600,400);
}
void draw()
{
background(0,0,0);
if(keyPressed)
{
ellipse(300,200,200,200);
}
}

19.
10. キーの文字 [1/2]
 key は最後に押されたキーの文字が保存さ
れた, char 型の変数
void setup()
{
size(600,400);
}
void draw()
{
println(key);
}

20.
10. キーの文字 [2/2]
void setup()
{
size(600,400);
}
void draw()
{
if(keyPressed)
{
if(key==‘r’)
{
background(255,0,0);
}
else if(key==‘g’)
{
background(0,255,0);
}
else if(key==‘b’)
{
background(0,0,255);
}
}
}

21.
Complete!
100%
スケッチの保存
PImage
loadImage()
image()
save()
if – else if - else
文字リテラル
char 型
keyPressed
key

22.
 基礎編はここで終わり
 続きは夏休みの集中講座で！

23.
Questions?
@Reputeless