【Processing】ふわふわと球が浮くアニメーションの作成

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、球がふわふわと浮くようなアニメーションの作成をご紹介したいと思います。

実際に作る

クラスを使って作成しました。

Ball ball;

void setup() {
 size(500, 500);
 ball = new Ball(40, width/2, height/2 ); //インスタンス
}

void draw() {
 background(0);

 ball.update();
 ball.display();
}

class Ball {
 float xpos;
 float ypos;
 float rpos;
 float angle;
 float sizeY = 0.0;

 Ball(float tempR, float tempX, float tempY) {
   rpos = tempR;
   xpos = tempX;
   ypos = tempY;
   angle = 0;
 }

 void update() { //y座標の位置を更新
   angle += 0.06;
   sizeY = sin(angle)*100;
 }

 void display() {
   noStroke();
   fill(255, 0, 255);
   ellipse(xpos, ypos + sizeY, rpos, rpos); //円の描画
 }
}

球の上下の動きは、sinを使って表現しています。円運動のY座標の動きだけを取り入れることで、緩急がついてふわふわした感じが表現できました。void update()内の数値を変えると動きの大きさがよく分かるかと思います。
また、クラスを利用して作成したので、オブジェクトを増やしたりできて面白いかと思います。

今回は以上になります。

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

本気で遊ぼう。音楽で。- EVENING -

音楽情報バイラルメディア「EVENING」は、音楽業界に関連するニュースやエンターテイメント情報を提供するWebメディアです。