【p5.js】自分で作ったクリスマス風アニメーションの解説

　今回は、自ら書いた下記リンクのクリスマス風アニメーションについて、解説を加えていく。デモンストレーションについては既に行ってはいたが、具体的に何を行っているのか、そして改善するべきところも一緒に記述しておく。

https://editor.p5js.org/wohler60/sketches/19I924sx_

　加えて、これを作るにあたって参考にしたサイトも以下に掲載する。

円運動のアニメーション用の関数

　該当する部分は、この関数である。

 function circleCoords(angleC, diffAngleC, radiusC) {
   let x = cos(angleC + diffAngleC) * radiusC;
   let y = sin(angleC + diffAngleC) * (radiusC / 3);
   
   return { x: x, y: y };
 }

　angleCというのは、一定時間で動いた角度であり、これによって各速度の表現を行っているのである。
　diffAngleCというのは、最初にスタートする角度を示している。これによって、最初に円運動をするときに、2つの点の位置をずらすことができる。
　radiusCというのは、半径のことを表現しており、今回の場合、yがradiusC / 3となっているので、楕円形となっている。(円錐のようなクリスマスツリーを表現するために必要)

最終的な描画部分アニメーションのコード

　描画部分については、以下のようになっており、treeY1が到達したy座標ごとに、アニメーションの条件を指定している。

function draw() {
  background(70, 9);

  let coords1 = circleCoords(angle, 0, radius);
  x1 = coords1.x;
  y1 = coords1.y;
  
  treeX1 = 200 + x1;
  treeY1 = 250 + y1 + upperY;
  
  let coords2 = circleCoords(angle, PI, radius);
  x2 = coords2.x;
  y2 = coords2.y;
  
  treeX2 = 200 + x2;
  treeY2 = 250 + y2 + upperY;

  if (drawFlag) {
  fill("#006622")
  ellipse(treeX1, treeY1, 10, 10);
  
  fill("#cc0000")
  ellipse(treeX2, treeY2, 10, 10);
  };

  angle += speed;
  upperY -= diffY;
  
  if (radius > 6) {
    radius -= diffRadius;
  }
  
  if (treeY1 < 70) {
    drawFlag = false;
  }
  
  if (treeY1 < 50) {
   fill("#c99c33");
   ellipse(200, 60, 35, 35);
  }
  
  if (treeY1 < 45) {
    for (i=0; i<5; i++) {
      let snowRadius = random(3, 7);
      let snowCoords = drawSnow(0, 0, width, height * 2 / 3);
      
      fill("snow");
      ellipse(snowCoords.x, snowCoords.y, snowRadius, snowRadius);
    }
  }
  
  if (treeY1 < 40) {
   textAlign(CENTER);
   fill("#a6aaae");
   textSize(20);
   text("Merry X'mas!!", 200, 350);
  }

  if (treeY1 < 30) {
    noLoop();
  }
}

簡単に説明すると、以下のような構成になっている。

1. coords1、　coords2によって表現された2つの点を用意して、今回アニメーションに直接用いる(treeX1, treeY1)と(treeX2, treeY2)を用意する
2. drawFlagによって点に色をつける
3. クリスマスツリーを表現するため、点の位置するy座標と楕円上の角度を変化させる
4. radiusが6より大きい場合はdiffRadius分だけ変化させる
5. treeY1の位置によって、2つの点の色の描写中止、そして黄色の球を出すアニメーション、雪の描写のアニメーション、メッセージを出力する
6. treeY1の位置でnoLoop();が出力されたとき、アニメーションが停止する

改善点(終わりに)

　今回は独自に作成をしたので、あまり変数名などに気を使わずに作ってしまっていたのと、「とある地点でこのアニメーションを出す」といった考えがあったので、youTubeなどでいう「シークバー」のような役割を果たす変数を定義しておき、それを基準にするとアニメーションとしてどのようなことをしている・したいのかの意図がわかりやすくなるかもしれない。