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

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 

コメント

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