ICT演習

第11回

色の指定（その２）、アニメーション

１色の指定（その２）

・色の指定（再掲）
　　描画などの色は３つのパラメータ R（赤色）、G（緑色）、B（青色）の成分を 0～255 で指定します。

　　■ ( 0, 0, 0 )　　■ ( 255, 0, 0 )　　■ ( 0, 255, 0 )　　■ ( 0, 0, 255 )
　　■ ( 255, 255, 0 )　　■ ( 0, 255, 255 )　　■ ( 255, 0, 255 )　　■ ( 255, 255, 255 )
　　■ ( 255, 128, 0 )　　■ ( 128, 24, 160 )　　■ ( 60, 128, 32 )　　■ ( 128, 128, 128 )　　
　
・色のグラデーション
　　色指定のパラメータを繰り返し（for文）と組み合わせて「色のグラデーション」を作ります。
　　基本的な方法は 0.0～1.0 の範囲で変化する変数を用意して 0～255 に変換した値を用います。

　＜黒色 --> 白色のグラデーションを描画＞

size( 400, 400 );
noStroke(); // 枠線は描画しない
for(int i=0;i<10;i++){ // 10回繰り返す
float deg = (float)i/9; // 0.0, 0.111, 0.222, ‥ , 0.888, 1.0 となる
fill( deg*255, deg*255, deg*255 ); // 色の指定
rect( 40*i, 0, 40, 400 ); // タテ長の長方形を描画（左から右へ）
}

　
　＜白色 --> 黒色のグラデーションを描画＞

size( 400, 400 );
noStroke(); // 枠線は描画しない
for(int i=0;i<10;i++){ // 10回繰り返す
float deg = 1.0 - (float)i/9; // 1.0, 0.888, ‥ , 0.222, 0.111, 0.0 となる
fill( deg*255, deg*255, deg*255 ); // 色の指定
rect( 40*i, 0, 40, 400 ); // タテ長の長方形を描画（左から右へ）
}

　
　＜黄色 --> 青色のグラデーションを描画＞

size( 400, 400 );
noStroke(); // 枠線は描画しない
for(int i=0;i<10;i++){ // 10回繰り返す
float deg = (float)i/9;
fill( (1.0-deg)*255, (1.0-deg)*255, deg*255 ); // 色の指定
rect( 40*i, 0, 40, 400 ); // タテ長の長方形を描画（左から右へ）
}

　
　
＜演習１＞

　下図を描画しなさい。

　Windowのサイズは 400x400
　幅8、高さ400の長方形を50個描画する
　色は左端が青色、右端が黄色のグラデーション
　
　

　
　解答例
　　

２アニメーション

Processingでは、動きのある描画（アニメーション）が簡単に作成できます。

・ setup() 関数と draw() 関数
　アニメーションのプログラムに必要な記述があります。

　setup() 関数・・・プログラム実行開始時に１度だけ呼び出される（変数の初期化などを行う）
　draw() 関数・・・プログラムが実行されている間は、自動的に繰り返しシステムから呼び出される
　　　　　　　　　　デフォルトの設定では１秒間に60回実行される（FPS=60）
　特別な変数 frameCount に、draw()が実行された回数が随時格納される

　＜ frameCount をコンソールに表示する＞

void draw()
{
println( frameCount );
}

　　
アニメーション処理は、draw() 関数に１フレームごとの描画処理を記述することにより実現する
１フレームごとに、少しずつ描画位置を移動する、形を変化させるなどの操作で、動きを表現する
　
　＜例：〇が左から右に移動する＞

int x; // 〇の水平位置を示す変数

void setup() //最初に1度だけ実行される
{
size( 400, 400 );
x = 0; // 初期値は 0
}

void draw() // 自動的に1秒間に60回実行される
{
background( 255 ); // これが無いと、残像が残る
ellipse( x, 200, 40, 40 );
x += 1; // 〇の位置を少し右にずらす
}

　　draw() 関数が呼び出されるごとに x が 1 増える
　　1秒間に、x は 60増加することになる
　＜実行結果＞　
　　

　　
　
＜演習２＞

　上記のプログラムを、「〇が右端から左方向へ移動する」ように修正しなさい。

　
　解答例
　　
　　
　＜例：〇が少しずつ大きくなる＞

int d; // 〇の直径

void setup() //最初に1度だけ実行される
{
size( 400, 400 );
d = 0; // 初期値は 0
}

void draw() // 自動的に1秒間に60回実行される
{
background( 255 ); // これが無いと、残像が残る
ellipse( 200, 200, d, d );
d += 1; // 〇の直径を少し大きくする
}

　＜実行結果＞　
　　

　
　　
　＜例：〇の色が黒色-->白色に少しずつ変化する＞

float deg; // 色の輝度（0.0～1.0)）

void setup()
{
size( 400, 400 );
deg = 0.0; // 初期値は 0.0
}

void draw()
{
background( 255 );
float c = deg*255; // 0.0～1.0 --> 0～255 に変換
fill(c,c,c);
ellipse( 200, 200, 200, 200 );
deg += 0.005; // 色の輝度を少し増やす
if( deg>1.0 ){ // degが1より大きくなった場合は
deg = 0.0; // dを0に戻す
}
}

　
　＜実行例の動画＞

＜演習３＞

　上記のプログラムを、「〇の色が黒色-->白色-->黒色-->白色・・」のように繰り返すように修正しなさい。
　＜実行例の動画＞

　ヒント）
　　条件分岐（if文）を使う
　　int flag;を追加し「黒-->白」は flag=0、「白-->黒」は flag=1 として、２つの処理を切り替える
　　または float dir; を追加して、1.0 or -1.0 を入れ替えてdegの増減を制御する、など
　　
　
　解答例
　　