Processing によるプログラミング入門の第 3 回目。研究室の勉強会で発表しました。 PowerPoint のファイルが欲しい場合は連絡をください。 [←前回] 第 2 回 http://www.slideshare.net/Reputeless/processing-2 [次回→] 第 4 回 http://www.slideshare.net/Reputeless/processing-4

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

2. 今日やること
 Processing とプログラミングの基礎
 簡単なことを 8 項目だけ覚えます

3. 1. 単一行コメント
 コメントはプログラムに影響しない
 一時的な削除や解説に使ったりする
 単一行コメント // はその行でそれ以降を
コメントにする
println("AAA");
//println("BBB");
println("CCC");
AAA
CCC

4. 2. 複数行コメント
 複数行コメント /* ～ */ は囲んだ範囲をす
べてコメントにする
println("AAA");
/*
println("BBB");
println("CCC");
*/
AAA

5. 3. プログラミングモード [1/3]
 Processing には大きく分けて 2 つのプロ
グラミングモードがある
Static Mode
Active Mode

6. 3. プログラミングモード [2/3]
Static Mode
 静止画を描く
 今までのプログラムは全部このモード

7. 3. プログラミングモード [3/3]
Active Mode
 プログラムを永遠に実行し、動きのある画
像を描く
 draw() と setup() を使う、新しいプログラ
ムの書き方を覚える

8. ここからのプログラムは全部 Active Mode です
※とくに設定をいじる必要はありません

9. 4. draw() 関数
 draw() ブロック内のコードは、繰り返し
実行される
void draw()
{
println("I'm running");
}
I’m runnning
I’m runnning
I’m runnning
I’m runnning
…

10. 5. frameCount
 frameCount はこれまでのフレーム数を保
持する変数
void draw()
{
println("I'm running");
println(frameCount);
}
I’m runnning
1
I’m runnning
2
I’m runnning
3
I’m runnning
…

11. 6. setup() 関数 [1/2]
 setup() ブロック内のコードは最初に 1 度
だけ実行される
void setup()
{
println("I'm starting");
println(frameCount);
}
void draw()
{
println("I'm running");
println(frameCount);
}
I’m starting
0
I’m runnning
1
I’m runnning
2
I’m runnning
3
I’m runnning
…

12. 6. setup() 関数 [2/2]
setup
draw
frameCount = 0
++frameCount
++frameCount
1秒に 60 回
（変更可能）

13. 7. アニメーション [1/2]
void setup()
{
size(600,400);
background(0,0,80);
noStroke();
}
void draw()
{
ellipse(frameCount,200,20,20);
}

14. 7. アニメーション [2/2]
void setup()
{
size(600,400);
background(0,0,80);
noStroke();
}
void draw()
{
background(0,0,80);
ellipse(frameCount,200,20,20);
}

15. 8. random 関数 [1/3]
 0 から high, または low から high の範囲
のランダムな浮動小数点数を返す
random( high );
random( low, high );

16. 8. random 関数 [2/3]
void draw()
{
println(random(-10,10));
}
2.9956264
-0.35175896
0.79504013
6.8217487
7.30785
2.8419533
9.002245
-2.5961647
0.9746132
9.271757
…

17. 8. random 関数 [3/3]
void setup()
{
size(600,400);
background(0,0,80);
noStroke();
}
void draw()
{
ellipse(random(600),random(400),20,20);
}

18. Complete!
100%
単一行コメント//
複数行コメント/* ～*/
Static Mode
Active Mode
draw()
frameCount
setup()
random()

19. Challenge
 面白い動きをする１つの円を描く
 背景にこだわっても OK

20.  続きは再来週の第 4 回で！
 次はインタラクションのあるプログラム！

21. Questions?
@Reputeless