Processingの学習でアニメーションの基本的なところまで進んだので、動きのあるものを作ってみた。
コード
float diameter; float radius = 200; int angle = 0; float brightness = 0; float hue; float x, y; int count = 8; // 玉の数// (1)voidsetup() { size (800, 600); frameRate(30); stroke(255); colorMode(HSB, 360, 360, 100, 100); } // (2)voiddraw() { translate(width/2, height/2); background(0); diameter = 20 + sin(frameCount * 0.1) * 50; // (3) brightness = sin(frameCount * 0.1) * 120; // (4) radius = sin(frameCount * 0.1) * 200; // (5)fill(0, 0, brightness); for (int i=0; i<count; i+=1) { x = radius*cos(radians(angle+360/count*i)); y = radius*sin(radians(angle+360/count*i)); ellipse(x, y, diameter, diameter); } angle += 5; }
解説
(1) setup、(2)drawについて
アニメーションを作る場合はsetup関数でフレームレート等の初期設定、draw関数でフレームごとの処理を書くという決まりらしい。そうすると自前でループ処理を書かなくても自動的にコマ送りしてくれ、drawにはコマごとの処理を書けば良いということになる。
(3) diameterについて
これは玉の直径を三角関数を使ってなめらかに変化させている。
前回の記事で三角関数を使って円を描けることを説明したが、角度を等間隔で変更していくと三角形の高さと幅の変化量は等間隔ではなく変化量そのまのが変化していることが分かる。この性質を加速・減速として使うことでアニメーションをカクカクさせずに滑らかに変化させることができる。
(4) brightnessについて
これも三角関数の性質を使って明るさを滑らかに変化させている。
(5) radiusについて
これは軌道直径を表す変数。ちょっと名前が雑だったかな。。
こちらも三角関数で滑らかに変化させる。
まさに三角関数のオンパレード。
改造
ちょっと色を付けて更にtranslateの値もいじってみたら面白い動きになった。
改造版のコード
float diameter; float radius = 200; int angle = 0; float brightness = 0; float hue; float x, y; int count = 8; voidsetup() { size (800, 600); frameRate(30); stroke(255); colorMode(HSB, 360, 100, 100, 100); } voiddraw() { translate(width/2, height/2); background(0); diameter = 20 + sin(frameCount * 0.1) * 50; brightness = sin(frameCount * 0.1) * 120; radius = sin(frameCount * 0.1) * 200; translate(cos(radians(angle))*250, sin(radians(angle))*150); fill(frameCount%360, 100, brightness); for (int i=0; i<count; i+=1) { x = radius*cos(radians(angle+360/count*i)); y = radius*sin(radians(angle+360/count*i)); ellipse(x, y, diameter, diameter); } angle += 5; }
以上