t-hom’s diary

主にVBAネタを扱っているブログ…とも言えなくなってきたこの頃。

Processingと三角関数で滑らかなアニメーション

Processingの学習でアニメーションの基本的なところまで進んだので、動きのあるものを作ってみた。

コード

float diameter;
float radius = 200;
int angle = 0;
float brightness = 0;
float hue;
float x, y;
int count = 8; // 玉の数

// (1)
void setup() { 
  size (800, 600);
  frameRate(30);
  stroke(255);
  colorMode(HSB, 360, 360, 100, 100);
}

// (2)
void draw() {
  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;

void setup() {
  size (800, 600);
  frameRate(30);
  stroke(255);
  colorMode(HSB, 360, 100, 100, 100);
}

void draw() {
  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;

}


以上

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。