岡山県立大学オープンキャンパスで実施している体験講義用資料。Processingを題材として、プログラミングの体験をしてもらうという内容です。2014-07-25追記: 改訂版に置き換えました。

1. プログラミングで
アニメーションを作ろう
岡山県立大学情報工学部
知能メディア工学研究室
国島丈生（kunishi@c.oka-pu.ac.jp）
http://www.slideshare.net/kunishi/20120723

2. 今日の内容
• プログラミング言語
Processingによるアニメー
ション作成
• 画面上で
• 図形が動く
• マウスに合わせて図形が反応
して動く
• etc.
• いわゆる「アニメ」ではありま
せん
• アニメーションを通してプ
ログラミングの体験をして
もらう

3. 参考資料
• Processing公式サイト http://www.processing.org/
• Processing入門講座 http://ap.kakoku.net/
• 書籍
• 「Processingをはじめよう」（オライリー・ジャパン）
• 「Built with Processing デザイン/アートのためのプログラミング入門」
（BNN）

4. 第１部
プログラムの基礎知識：変数、ループ、条件分岐など

5. まず動かしてみよう
起動
プログラムをここに書く

6. 最初のプログラム
課題1. 次のプログラムを書いて実行してみましょう。
ellipse(50, 50, 80, 80);
課題2. 課題1のプログラムをわざと次のように間違えて書いて
実行してみましょう。
(1)Ellipse(50, 50, 80, 80);
(2)ellipse(50. 50, 80, 80);
(3)ellipse(50, 50, 80, 80)
[プログラムを書く時の注意点]
• かな漢字変換がオフになっていることを確認しましょう（特に空白文字に注
意!）
• 大文字と小文字を間違えないように（間違うとプログラムは動きません）
• セミコロンをつけ忘れないように

7. もう少し難しいプログラム
課題3. ブラウザを開いて、次のURLにあるプログラムを書いて
実行してみましょう。コピー&ペーストではなく、手で写してみま
しょう。
https://gist.github.com/3096487
• マウスを追うように円が次々描かれます。
• マウスを押すと黒い円が、マウスを離すと白い円が描かれま
す。

8. プログラムを書くときの注意
• カッコ (), {} の対応に注意し
ましょう。
• 全角スペースが混じらない
ように気をつけましょう。
• カッコの前や後、コンマの後
などの空白はなくても動き
ますが、空白を入れることで
プログラムが見やすくなりま
す。入れるように心がけま
しょう。
• 行頭の字下げ（インデント）
も、プログラムを見やすくす
るために入れています。
void setup() {
size(480, 120);
smooth();
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}

9. プログラムで絵を描く
課題4. 次のプログラムを実行してみましょう。
size(800, 600);
point(240, 60);
line(20, 50, 420, 110);
[ポイント]
• Processingでは、描画の命令（関数）を次々と実行していくことで絵を描きま
す。
• 前に書いた図形は後に書いた図形に上書きされていきます。
• 関数の書式： 関数名(引数1, 引数2, …)
• 引数の個数や順番には意味があります。勝手に変えてはいけません。
• Processingでは、描画ウインドウの左上隅が原点となっており、x軸は右方向、
y軸は下方向が正になります。（y軸の正方向が数学とは逆です）
[関数]
• size(横方向のピクセル数, 縦方向のピクセル数)
• 描画ウインドウの大きさを決めます。

10. 図形を描く関数(1)
• point(x, y)
• 点(x, y)を描く
• line(x1, y1, x2, y2)
• (x1, y1) から (x2, y2) に線を引く
• rect(x1, y1, width, height)
• 左上隅が(x1, y1), 幅 width, 高さ height の長方形を描く
• triangle(x1, y1, x2, y2, x3, y3)
• (x1, y1), (x2, y2), (x3, y3) を頂点とする三角形を描く
• quad(x1, y1, x2, y2, x3, y3, x4, y4)
• (x1, y1), (x2, y2), (x3, y3), (x4, y4) を頂点とする四角形を描く

11. 図形を描く関数(2)
• ellipse(x1, y1, width, height)
• 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheightである楕円
を描く
• 円を描く場合は width と height を同じ値にします
• arc(x1, y1, width, height, start, end)
• 中心が(x1, y1), 横方向の幅がwidth, 縦方向の幅がheight, 描き始めの
角度が start, 描き終わりの角度が end である円弧を描く
• 角度は弧度法で指定します
• 便利な関数
• radians(a)…角度a（0°≦a≦360°）を弧度法の値に変換する
• 例: arc(90, 60, 80, 80, 0, radians(90))

12. 図形を描く関数
課題5. 下の図は、横方向480, 縦方向120の描画ウインドウに、
以下の2つの図形を描いています。このプログラムを作ってみ
てください。
• 左上隅 (160, 30), 横幅260, 縦幅20の長方形
• 中心が (140, 0), 半径が190の円
https://gist.github.com/kunishi/7996f7d50e511e3358d9

13. 色についての予備知識
• 色の種類
• 有彩色…色味のある色（赤、青、黄など）
• 無彩色…色味のない色（白、灰色、黒）
• 色を数値で表現する方法
• グレイスケール：無彩色の表現。0が黒、数値が大きいほど白
• RGB：赤(R), 青(B), 緑(G)に色を分解して、その濃さで表現
• HSB：色相（H）、彩度（S）、明度（B）という成分で表現

14. 描画色の指定(1)
• colorMode(mode, max)
• 色の指定方法をmode (RGB またはHSB)に決める。maxは色指定の
上限値である。
• background(グレイスケール値), background(R, G, B),
background(H, S, B)
• 背景色の指定
[例]
colorMode(HSB, 100); // HSBモード、H, S, Bはそれぞれ0〜99で指定
background(99); // 背景をグレイスケール値99（＝色指定の上限値＝白）に指定

15. 描画色の指定(2)
• stroke(グレイスケール値), stroke(R, G, B), stroke(H, S, B)
• 線の色を指定
• strokeWeight(線の太さのピクセル数)
• 線の太さを指定
• noStroke()
• 縁取り線を消す
• fill(グレイスケール値), fill(R, G, B), fill(H, S, B)
• 図形の塗りつぶし色を指定
• noFill()
• 図形の塗りつぶしをしない（＝輪郭線だけを描く）

16. 色を使った図形の描画
• 課題6. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3134851
こんな風にグラデーションが
描けましたか?

17. 同じような描画の繰り返し
fill(45, 80, 99);
rect(0, 0, 200, 200);
fill(45, 60, 99);
rect(0, 0, 150, 150);
fill(45, 40, 99);
rect(0, 0, 100, 100);
fill(45, 20, 99);
rect(0, 0, 50, 50);
[0回目]
彩度80 = 80–20×0, 大きさ200 = 200−50×0
[1回目]
彩度60 = 80–20×1, 大きさ150 = 200−50×1
[2回目]
彩度40 = 80–20×2, 大きさ100 = 200−50×2
[3回目]
彩度20 = 80–20×3, 大きさ50 = 200−50×3

18. 変数と繰り返しでまとめる
課題7. 課題6（https://gist.github.com/3134851）のプログラム
を、変数と繰り返しで書き換えて実行してみましょう。
同じようにグラデーションが
描けましたか?
https://gist.github.com/kunishi/53f33842f7e95207e37c

19. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[プログラムにおける変数]
何らかの値を保存しておくときに使います。数学での変数とは違い、未知数を表すわ
けではありません。
[変数の宣言：変数を使う前に、必ずその変数を宣言しなければなりません]
変数の型 変数名;
• 変数の型＝変数に保存できる値の定義域。int (整数), float (実数) など。
• 変数の宣言は、ほかにも似たような書き方がいくつもあります。今回は省略。

20. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[変数へ値を保存する：プログラムの用語で「変数に値を代入する」と言います]
変数名 = 式;
• まず、= の右側の式を計算します。
• その結果の値を、左側の変数に保存します。
• だから、= の左側と右側に同じ変数が出てくることもあります。

21. 変数と繰り返しでまとめる
int i; // 繰り返し回数を保存する変数
for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * i);
}
[for文：条件が成立する間、処理を繰り返します]
for (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) {
繰り返し実行する命令
}
• 最初に、繰り返し変数の設定をします。
• 以下を繰り返します。
• 繰り返し継続の条件が成り立っているか調べます。
• 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。
• 成り立っていなければ、繰り返しを終了します。

22. 2次元に敷き詰める
課題8. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3140854
こんな風に正方形が敷き詰
められましたか?

23. for文の入れ子
for (i = 0; i < 10; i = i + 1) { // for文1
for (j = 0; j < 10; j = j + 1) { // for文2
fill(i * 10, 10 + j * 10, 99);
rect(i * 20, j * 20, 10, 10);
}
}
i = 0, j = 0 … 色相0*10, 彩度10+0*10, 正方形の左上隅(0*20, 0*20)
j = 1 … 色相0*10, 彩度10+1*10, 正方形の左上隅(0*20, 1*20)
…
i = 1, j = 0 … 色相1*10, 彩度10+0*10, 正方形の左上隅(1*20, 0*20)
j = 1 … 色相1*10, 彩度10+1*10, 正方形の左上隅(1*20, 1*20)
…
… …

24. プログラミングを知っている方向け
for文以外にも、次のような文が用意されています。
• if (条件) {
条件が成立するとき実行
}
• if (条件) {
条件が成立するとき実行
} else {
条件が成立しないとき実行
}
• while (繰り返し継続条件) {
繰り返し処理
}
• ++演算子
i++; // i = i + 1と同じ意味

25. 繰り返しごとに微妙に違いを出す
課題9. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3141111
微妙に色や位置が違う正方
形が敷き詰められましたか?

26. ランダムな値（乱数）
for (i = 0; i < 10; i = i + 1) {
for (j = 0; j < 10; j = j + 1) {
fill(random(20, 40), random(50, 70), 99);
rect(i * 20 + random(-3, 3),
j * 20 + random(-3, 3),
10, 10);
}
}
[ポイント]
random(下限, 上限) … 下限≦x＜上限の範囲でランダムな数字xを生成する関数
上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し
ています。

27. 第２部
アニメーションをプログラムで作る

28. 絵からアニメーションへ
課題10. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3141167
色や大きさの違う楕円が
次々に描かれていますか?

29. アニメーション処理の基本
void setup() { // 初期化。プログラムの最初に1回だけ実行
size(200, 200);
colorMode(HSB, 100);
background(99);
noStroke();
}
void draw() { // 何度も繰り返して実行
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(random(0, 200), random(0, 200),
random(0, 50), random(0, 50));
}
setup(), draw()ともに関数です。
つまり、このプログラムはsetup(),
draw()という2つの関数を自作してい
るのです。

30. マウスに反応するアニメーション
課題11. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3141201
マウスの位置に次々に円が
描かれていますか?

31. マウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY, 5, 5);
}
[ポイント]
mouseX, mouseYという変数に、自動的に現在のマウスポインタの位置が保存され
ます。
• これらの変数は宣言しなくても使えます。
• 大文字と小文字の区別に注意しましょう。

32. マウスの移動量に反応するアニメーション
課題12. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3141239
マウスが大きく移動すると大
きな楕円が、小さく移動する
と小さな楕円が描かれてい
ますか?

33. 直前のマウスの位置を取得する
void draw() {
fill(random(0, 100), random(50, 100), random(80, 100));
ellipse(mouseX, mouseY,
mouseX - pmouseX, mouseY - pmouseY);
}
[ポイント]
pmouseX, pmouseY という変数に、直前のマウスの位置が保存されています。
• これらの変数も、宣言しなくても使えます。
• 上の例では、楕円の幅と高さを、現在のマウスの位置と直前のマウスの位置の差
にしていますね。だから、マウスの移動距離に応じて楕円の大きさが変わったの
です。

34. サイン波
課題13. 次の場所にあるプログラムを実行してみましょう。
https://gist.github.com/3141333
サイン波が動いていますか?

35. 変数宣言の位置に注意!
int start; // 左端の円のy座標に対応する角度
void setup() {
…
start = 0;
}
void draw() {
int theta;
…
start = start + 2;
theta = start;
…
}
[ポイント]
• setup()やdraw()の外に変数宣言を書くと
• グローバル変数の宣言になります
• グローバル変数はsetup()でもdraw()でも使
えます
• draw()が何回実行されても、グローバル変
数に保存された値は壊れません
• setup()やdraw()の中に変数宣言を書くと
• ローカル変数の宣言になります
• ローカル変数は宣言された関数の中でしか
使えません
• ローカル変数thetaは、draw()が実行される
たびに作り直されます（値が毎回壊れます）
• 使い分けが必要です

36. 自由にアニメーションを作ってみよう
• ここまでで、Processingによるプログラミングについて、基本
的なことをひと通りお話しました。
• 残りの時間は、自由にアニメーションを作ってみてください。
• いろんな図形を使ってみる、とか
• 色の変化をプログラムで作ってみる、とか
• 繰り返し文とアニメーションを組み合わせる、とか
• etc.