【Processing】円が回転するアニメーション

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、円(丸)が回転して円を描くアニメーションを作ります。

イメージ

完成のイメージは、ゲームによくある、ロードするとき円がくるくる回るアニメーションです。

実際に作る

実際に作ってみましょう。

float a = 0;
float x ;
float y ;
float r = 255;
float g = 0;
float b = 255;

void setup() {
  size(500, 500);
  background(0);
}

void draw() {
  fill(r, g, b);

  x = width/2 - 100*cos(radians(a));
  y = height/2 - 100*sin(radians(a));
  noStroke();
  ellipse(x, y, 40, 40); 
  a +=5;
  fill(0, 10);
  rect(0, 0, width, height);
}

うまく動作しましたでしょうか。特別な関数などなく、シンプルに作れます。変数aは回転している円の角度です。ここを大きくしたり小さくすると、印象が変わって面白いと思います。円の後に、透明の黒い四角形を描画することで、徐々に円が消えていく様子を表現しています。
これを応用したらweb制作にも使えそうですね。

今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました