在 ps 中建立動態幾何動畫

簡介

在本教程中，您將學習如何使用 p5.js 創建動態且豐富多彩的幾何動畫。這部動畫象徵著「世界上充滿了神話般和不可思議的人，他們在做著奇妙的事」。形狀將在畫布上隨機移動，改變顏色並創造出迷人的視覺效果。

---

第 1 步：設定您的環境

1. 下載p5.js：

   • 前往 p5.js 網站並下載最新版本的 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();：這會刪除我們將要建立的形狀的邊框。
背景(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 決定畫布上每個形狀的位置。
  • size 控制每個形狀的大小。
  • colorR、colorG、colorB 為填滿顏色的紅色、綠色和藍色分量產生隨機值。
  • fill(colorR, colorG, colorB, 150);：設定稍微透明的填滿顏色。

• 形狀類型：

  • ellipse(x, y, size, size);：繪製圓形或橢圓形。
  • rect(x, y, size, size);：繪製正方形或長方形。
  • triangle(x, y, x + size, y, x + size / 2, y - size);: 繪製三角形。

第 4 步：讓動畫具有反應性

確保畫布隨視窗調整大小，請新增下列函數：

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

第 5 步：運行草圖

• 如果您使用的是 p5.js 線上編輯器，只需按下「播放」按鈕即可查看動畫。
• 如果您在本機編碼，請在網頁瀏覽器中開啟 HTML 檔案以查看動畫。

以上是在 ps 中建立動態幾何動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！