介紹

在本教程中，您將學習如何使用 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 



解釋：

• 隨機變數:

  • 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);
}

第五步：運行你的草圖

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