ps での動的な幾何学アニメーションの作成

はじめに

このチュートリアルでは、p5.js を使用してダイナミックでカラフルな幾何学的なアニメーションを作成する方法を学びます。このアニメーションは、「世界には素晴らしいことをしている素晴らしい人々で溢れている」という考えを象徴しています。図形はキャンバス上でランダムに動き、色を変えて視覚的に魅力的な効果を生み出します。

---

ステップ 1: 環境をセットアップする

1. p5.js をダウンロード:

   • p5.js Web サイトにアクセスし、p5.js の最新バージョンをダウンロードします。
   • または、オンラインの p5.js エディタ editor.p5js.org を使用すると、ブラウザでコードを直接作成して実行できます。

2. 新しいプロジェクトを作成します:

   • オンライン エディタを使用している場合は、左上隅の [新規] をクリックして新しいスケッチを作成します。
   • ローカルでコーディングしている場合は、新しい HTML ファイルを作成し、p5.js ライブラリをリンクします。

---

ステップ 2: 基本構造を書く

p5.js スケッチの基本構造を設定することから始めましょう。これには、setup() 関数とdraw() 関数の定義が含まれます。

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

説明:

createCanvas(windowWidth, windowHeight);: これにより、ブラウザ ウィンドウに合わせてキャンバス サイズが設定されます。
noStroke();: これにより、作成する図形から境界線が削除されます。
Background(30, 30, 60, 25);: これにより、背景色がある程度の透明度を持つ濃い青に設定され、図形の末尾の効果が作成されます。

ステップ 3: 動的な幾何学的形状を追加する

次に、コードを追加して、さまざまな色、位置、サイズのランダムな形状を作成しましょう。

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i < 5; i++) {
    let x = random(width);
    let y = random(height);
    let size = random(20, 80);
    let colorR = random(255);
    let colorG = random(255);
    let colorB = random(255);
    let shapeType = random(['ellipse', 'rect', 'triangle']);

    fill(colorR, colorG, colorB, 150); // Set fill color with some transparency

    if (shapeType === 'ellipse') {
      ellipse(x, y, size, size);
    } else if (shapeType === 'rect') {
      rect(x, y, size, size);
    } else if (shapeType === 'triangle') {
      triangle(x, y, x + size, y, x + size / 2, y - size);
    }
  }
}

説明:

• ランダム化変数:

  • x と y は、キャンバス上の各図形の位置を決定します。
  • サイズは各シェイプのサイズを制御します。
  • colorR、colorG、colorB は、塗りつぶし色の赤、緑、青のコンポーネントのランダムな値を生成します。
  • fill(colorR, colorG, colorB, 150);: わずかに透明度のある塗りつぶしの色を設定します。

• 形状タイプ:

  • ellipse(x, y, size, size);: 円または楕円を描画します。
  • rect(x, y, size, size);: 正方形または長方形を描画します。
  • トライアングル(x, y, x + サイズ, y, x + サイズ / 2, y - サイズ);: 三角形を描画します。

ステップ 4: アニメーションをレスポンシブにする

キャンバスのサイズがウィンドウに合わせて変更されるようにするには、次の関数を追加します。

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

ステップ 5: スケッチを実行する

• p5.js オンライン エディターを使用している場合は、「再生」ボタンを押すだけでアニメーションが表示されます。
• ローカルでコーディングしている場合は、Web ブラウザで HTML ファイルを開いてアニメーションを表示します。

以上がps での動的な幾何学アニメーションの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。