PEN(xDNCL)を使ったランダムアニメーションの作成方法【初心者向け】

PEN(xDNCL)を使用して、配列と乱数を活用したアニメーションを作成する方法について解説します。今回は、ランダムに動く円を追いかけるアニメーションの例を使って、基本的なアニメーション作成の手順を説明します。

1. PEN(xDNCL)とは
2. ランダムな動きを作る基本的な構造
3. 追いかける円を作る
4. まとめと応用

1. PEN(xDNCL)とは

PEN(xDNCL)は、JavaScriptを使ったシンプルで強力なアニメーションライブラリです。特に、数値計算やランダム生成を簡単に行えるため、視覚的に面白いアニメーションを作るのに非常に便利です。

まずは、PEN(xDNCL)を使う準備として、ライブラリの読み込みと基本的な設定を行います。インターネットから公式のCDNを利用して、HTMLファイルにスクリプトを追加しましょう。

2. ランダムな動きを作る基本的な構造

ランダムに動く円を作るために、PEN(xDNCL)で簡単なアニメーションを作成します。以下のコードは、ランダムな位置に円を動かし、その円をアニメーションで追いかけるものです。

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

let circles = [];

// ランダムな円の生成
for (let i = 0; i < 10; i++) {
  circles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: 20,
    dx: Math.random() * 2 - 1,
    dy: Math.random() * 2 - 1
  });
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 各円を描画してランダムに動かす
  circles.forEach(circle => {
    circle.x += circle.dx;
    circle.y += circle.dy;
    if (circle.x > canvas.width || circle.x < 0) circle.dx *= -1;
    if (circle.y > canvas.height || circle.y < 0) circle.dy *= -1;

    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
  });

  requestAnimationFrame(animate);
}

animate();

このコードでは、10個のランダムな円を生成し、それらが画面上をランダムに動くアニメーションを作成しています。これをベースに、さらに複雑なアニメーションを作成することができます。

3. 追いかける円を作る

次に、これらのランダムに動く円を追いかける円を作成します。以下のコードは、中心に固定した円が、ランダムに動く円を追いかけるように動くアニメーションを作成します。

let target = { x: canvas.width / 2, y: canvas.height / 2, radius: 15 }; // 追いかける円

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 追いかける円を描画
  ctx.beginPath();
  ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();

  // ランダムな円を描画して追いかける
  circles.forEach(circle => {
    let angle = Math.atan2(circle.y - target.y, circle.x - target.x);
    target.x += Math.cos(angle) * 0.5;
    target.y += Math.sin(angle) * 0.5;

    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
  });

  requestAnimationFrame(animate);
}

animate();

このコードでは、赤い円がランダムに動く青い円を追いかけるように動きます。`Math.atan2`を使って角度を計算し、ターゲット円を追跡します。