狠狠撸

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

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

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

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

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

最初のプログラム
課題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)
[プログラムを書く時の注意点]
? かな漢字変換がオフになっていることを確認しましょう（特に空白文字に注
意!）
? 大文字と小文字を間違えないように（間違うとプログラムは動きません）
? セミコロンをつけ忘れないように

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

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

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

図形を描く関数(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) を頂点とする四角形を描く

図形を描く関数(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))

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

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

描画色の指定(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（＝色指定の上限値＝白）に指定

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

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

同じような描画の繰り返し
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

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

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 (実数) など。
? 変数の宣言は、ほかにも似たような書き方がいくつもあります。今回は省略。

for (i = 0; i <= 3; i = i + 1) {
fill(45, 80 – 20 * i, 99);
rect(0, 0, 200 - 50 * i, 200 – 50 * 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 (繰り返し変数の設定; 繰り返し継続の条件; 繰り返し変数の更新) {
繰り返し実行する命令
}
? 最初に、繰り返し変数の設定をします。
? 以下を繰り返します。
? 繰り返し継続の条件が成り立っているか調べます。
? 成り立っていれば、{ } 内を実行して、繰り返し変数を更新します。
? 成り立っていなければ、繰り返しを終了します。

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

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)
…
… …

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

繰り返しごとに微妙に違いを出す
微妙に色や位置が違う正方
形が敷き詰められましたか?

ランダムな値（乱数）
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を生成する関数
上の例では、正方形の色相、彩度、左上隅の位置に乱数を使い、微妙な違いを出し
ています。

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

絵からアニメーションへ
色や大きさの違う楕円が
次々に描かれていますか?

アニメーション処理の基本
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つの関数を自作してい
るのです。

マウスに反応するアニメーション
マウスの位置に次々に円が
描かれていますか?

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

マウスの移動量に反応するアニメーション
マウスが大きく移動すると大
きな楕円が、小さく移動する
と小さな楕円が描かれてい
ますか?

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

サイン波
サイン波が動いていますか?

変数宣言の位置に注意!
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()が実行される
たびに作り直されます（値が毎回壊れます）
? 使い分けが必要です

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

狠狠撸

冈山県立大学オープンキャンパス资料

Recommended

More Related Content

What's hot (20)

Similar to 冈山県立大学オープンキャンパス资料 (20)

More from Takeo Kunishima (20)

Recently uploaded (11)

冈山県立大学オープンキャンパス资料

Editor's Notes