04-04　アニメーションの概要

学習日

2025年7月8日

名前

樋口桜大

この単元に取り掛かる前に・・・

アニメーションでよく使われる機能として以下の２つがあるので、確認しておこう！

・frameRate(n)

 draw関数を１秒間に呼び出す回数を設定する。デフォルトは60回。

・frameCount

予約変数の一つで、現在のフレーム数(draw関数が呼ばれた回数)を示す。

自分で作った図形（コードと画像）

✅ 例題 4-4-1

円を画面の左から右に、大きさを変えながら移動させよう。
円の中心のX座標と半径は frameCount を使って変化させる。

コード

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(50);
  noFill();
  stroke(255);
  strokeWeight(8);
  ellipse(frameCount, 200, 100, 50 + (frameCount / 2));
}

📷 実行結果

✅ 練習問題 4-4-1

2つの円を左右から中央に向かって移動させよう。
それぞれの円の高さ（縦の大きさ）も時間とともに変化させ、
frameCount % 400 を使って、X座標と大きさを調整する。

コード

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(50);
  noFill();
  stroke(255);
  strokeWeight(8);
  ellipse(frameCount, 200, 100, 50 + (frameCount % 400));
  ellipse(400-frameCount, 200, 100, 50 + (frameCount % 400));
}

📷 実行結果

まとめ・感想

・frameCountは、あくまでframeRate(n)で呼ばれた関数の回数を繰り返しているだけなので、座標を利用して表したい場合は、frameCountを「ー（マイナス）」にするなどしなくても、元の座標を変えれば、簡単にできることがわかった。

・今回の問題であった、円の縦の長さを伸ばすときに、frameCountを演算とかけ合わせて、伸びるスピードを調整することが難しかった。

・次は、全体的に図形を大きくしたりしてみたいと思った。