早稲田大学 基幹理工学部 表現工学科
長研究室 B4 鈴木 遼
16 July 2013
今日やること
 Processing とプログラミングの基礎
 今日は 10 項目
1. スケッチを保存する
 プログラムを保存する
 場所は Windows だとドキュメント/Processing
画像を扱う準備
 画像ファイル(.png, .jpg, .gif, .tga)を用
意する
 画像の名前を覚えやすいものに変える
例) picture.png
 画像ファイルは 1. のスケッチと同じフォ
ルダに保存
画像を扱う準備
2. 画像
 PImage 型の変数は画像を保持することが
できる
PImage picture;
void setup()
{
size(600,400);
}
void draw()
{
}
3. 画像データを読み込む [1/2]
 loadImage(filename) は指定されたファイ
ル名の画像を読み込む
PImage picture;
void setup()
{
size(600,400);
picture = loa...
3. 画像データを読み込む [2/2]
 draw ブロックで毎フレーム画像を読み込む
と動作が重くなるので避ける
void setup()
{
size(600,400);
}
void draw()
{
PImage picture = ...
4. 画像データを表示する [1/2]
 image(p,x,y) は PImage 型のデータ p を座
標 x, y の位置に表示する
PImage picture;
void setup()
{
size(600,400);
pictu...
4. 画像データを表示する [2/2]
 問題) 画像がマウスカーソルについてくるよ
うなプログラムをつくる
PImage picture;
void setup()
{
size(600,400);
picture = loadImage(...
5. フレームの保存 [1/2]
 save(filename) は現在のウィンドウを画
像ファイルとして保存する
 draw ブロックの中で毎回 save をすると動
作が重くなるので注意
save(filename);
5. フレームの保存 [2/2]
void setup()
{
size(600,400);
fill(0,0,255);
}
void draw()
{
background(255,255,255);
ellipse(frameCount,...
6. 複数の選択肢 [1/2]
 else if で追加の条件を指定できる
if(条件A)
{
// 条件 A が true
}
else if(条件B)
{
// それ以外で 条件 B が true
}
else
{
// どちらの条件にも...
6. 複数の選択肢 [2/2]
void setup()
{
size(600,400);
float value = random(0,3);
println(value);
if(value<1.0)
{
background(255,0,...
7. 文字リテラル
 シングルクオーテーション ‘ で囲まれた文
字は文字リテラルと呼ばれる文字データ
 文字列リテラルと違って 1 文字
println(‘a’);
println(‘B’);
println(‘?’);
8. char 型
 文字リテラルは char (チャー) 型
char a = ‘a’;
char b = ‘B’;
println(a);
println(b);
9. キーボード入力 [1/2]
 keyPressed はキーボードのキーが押され
ていたら true, 押されていなかったら
false になる boolean 型の変数
void setup()
{
size(600,400);
}
v...
9. キーボード入力 [2/2]
void setup()
{
size(600,400);
}
void draw()
{
background(0,0,0);
if(keyPressed)
{
ellipse(300,200,200,200...
10. キーの文字 [1/2]
 key は最後に押されたキーの文字が保存さ
れた, char 型の変数
void setup()
{
size(600,400);
}
void draw()
{
println(key);
}
10. キーの文字 [2/2]
void setup()
{
size(600,400);
}
void draw()
{
if(keyPressed)
{
if(key==‘r’)
{
background(255,0,0);
}
else ...
Complete!
100%
スケッチの保存
PImage
loadImage()
image()
save()
if – else if - else
文字リテラル
char 型
keyPressed
key
 基礎編はここで終わり
 続きは夏休みの集中講座で!
Questions?
@Reputeless
Upcoming SlideShare
Loading in...5
×

Processingによるプログラミング入門 第5回

1,498

Published on

Processing によるプログラミング入門の第 5 回目。研究室の勉強会で発表しました。
PowerPoint のファイルが欲しい場合は連絡をください。

[←前回] 第 4 回 http://www.slideshare.net/Reputeless/processing-4
[次回→] 第 6 回 (8月上旬更新予定)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,498
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Processingによるプログラミング入門 第5回

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

    Clipping is a handy way to collect important slides you want to go back to later.

×