Processingによるプログラミング入門 第5回
-
Upload
ryo-suzuki -
Category
Technology
-
view
1.272 -
download
1
description
Transcript of Processingによるプログラミング入門 第5回
![Page 1: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/1.jpg)
早稲田大学 基幹理工学部 表現工学科長研究室 B4 鈴木 遼
16 July 2013
![Page 2: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/2.jpg)
今日やること
Processing とプログラミングの基礎
今日は 10 項目
![Page 3: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/3.jpg)
1. スケッチを保存する
プログラムを保存する
場所は Windows だとドキュメント/Processing
![Page 4: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/4.jpg)
画像を扱う準備
画像ファイル(.png, .jpg, .gif, .tga)を用
意する
画像の名前を覚えやすいものに変える
例) picture.png
画像ファイルは 1. のスケッチと同じフォ
ルダに保存
![Page 5: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/5.jpg)
画像を扱う準備
![Page 6: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/6.jpg)
2. 画像
PImage 型の変数は画像を保持することが
できる
PImage picture; void setup() { size(600,400); } void draw() { }
![Page 7: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/7.jpg)
3. 画像データを読み込む [1/2]
loadImage(filename) は指定されたファイ
ル名の画像を読み込む
PImage picture; void setup() { size(600,400); picture = loadImage(“picture.png”); } void draw() { }
![Page 8: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/8.jpg)
3. 画像データを読み込む [2/2]
draw ブロックで毎フレーム画像を読み込む
と動作が重くなるので避ける
void setup() { size(600,400); } void draw() { PImage picture = loadImage(“picture.png”); }
![Page 9: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/9.jpg)
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); }
![Page 10: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/10.jpg)
4. 画像データを表示する [2/2]
問題) 画像がマウスカーソルについてくるよ
うなプログラムをつくる
PImage picture; void setup() { size(600,400); picture = loadImage(“picture.png”); } void draw() { background(255,255,255); image(picture,mouseX,mouseY); }
![Page 11: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/11.jpg)
5. フレームの保存 [1/2]
save(filename) は現在のウィンドウを画
像ファイルとして保存する
draw ブロックの中で毎回 save をすると動
作が重くなるので注意
save(filename);
![Page 12: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/12.jpg)
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”); } }
![Page 13: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/13.jpg)
6. 複数の選択肢 [1/2]
else if で追加の条件を指定できる
if(条件A) { // 条件 A が true } else if(条件B) { // それ以外で 条件 B が true } else { // どちらの条件にも当てはまらない }
![Page 14: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/14.jpg)
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() { }
![Page 15: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/15.jpg)
7. 文字リテラル
シングルクオーテーション ‘ で囲まれた文
字は文字リテラルと呼ばれる文字データ
文字列リテラルと違って 1 文字
println(‘a’); println(‘B’); println(‘?’);
![Page 16: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/16.jpg)
8. char 型
文字リテラルは char (チャー) 型
char a = ‘a’; char b = ‘B’; println(a); println(b);
![Page 17: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/17.jpg)
9. キーボード入力 [1/2]
keyPressed はキーボードのキーが押され
ていたら true, 押されていなかったら
false になる boolean 型の変数
void setup() { size(600,400); } void draw() { println(keyPressed); }
![Page 18: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/18.jpg)
9. キーボード入力 [2/2]
void setup() { size(600,400); } void draw() { background(0,0,0); if(keyPressed) { ellipse(300,200,200,200); } }
![Page 19: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/19.jpg)
10. キーの文字 [1/2]
key は最後に押されたキーの文字が保存さ
れた, char 型の変数
void setup() { size(600,400); } void draw() { println(key); }
![Page 20: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/20.jpg)
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); } } }
![Page 21: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/21.jpg)
Complete!
100%
スケッチの保存 PImage loadImage() image() save()
if – else if - else 文字リテラル char 型 keyPressed key
![Page 22: Processingによるプログラミング入門 第5回](https://reader034.fdocuments.net/reader034/viewer/2022052222/5564b1aad8b42a98268b4f20/html5/thumbnails/22.jpg)
基礎編はここで終わり
続きは夏休みの集中講座で!