生成藝術是一種藝術家創建系統的技術，通常以演算法的形式自動產生藝術品。這些系統可以從一組初始規則中產生無限的結果，使這個過程令人著迷且充滿可能性。在本文中，我們將深入研究使用 JavaScript 的生成藝術世界，更具體地說，是流行的函式庫 p5.js。

什麼是生成藝術？

生成藝術依賴於創建可以生成藝術作品的無限種變體的系統。這些系統可以透過特定規則、數學演算法甚至隨機性來控制。系統的每次執行都可以產生新的、獨特的且視覺上有趣的藝術品。

這種藝術形式與程式設計密切相關，因為規則和程式碼定義瞭如何創建視覺結果。生成藝術家使用演算法來定義圖案、顏色、形狀和運動，使每件作品都是發現的過程。

為什麼選擇 JavaScript？

JavaScript 是一種通用且易於存取的語言，可直接在網頁瀏覽器中運行，允許生成藝術結果的即時視覺化。此外，借助 p5.js 等函式庫，只需幾行程式碼就可以建立複雜的圖形。

p5.js 是一個專門為建立互動式和可視圖形而設計的 JavaScript 函式庫。它的簡單性使其成為開始探索生成藝術的理想工具。

p5.j​​s 入門

設定環境

要開始使用 JavaScript 創建生成藝術，您只需要一個瀏覽器和一個程式碼編輯器。您可以使用 p5.js Web 編輯器或下載庫並將其新增至您的專案。

p5.j​​s 草圖的基本骨架

每個 p5.js 草圖分為兩個主要功能：

• setup()：此函數在開始時運行一次。這是我們設定畫布、顏色和任何初始參數的地方。
• draw()：此函數在迴圈中重複運行。在這裡，我們放置繪製和創建視覺元素的說明。

這是一個基本範例：

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i 



在這個基本草圖中，我們創建一個空白畫布，並用隨機顏色繪製 100 個圓圈，每個圓圈的位置都是隨機的。生成藝術的美妙之處在於結果的可變性。每次運行程式碼時，圓圈都會出現在不同的位置並具有不同的顏色。 


  
  
  用數學創建模式


生成藝術通常將隨機性與精確的數學結構結合。讓我們來看一個基於規則形狀和循環運動生成幾何圖案的範例：



function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i 



在此範例中，我們使用 cos() 和 sin() 等三角函數以圓形圖案圍繞畫布中心分佈 100 個圓。生成藝術中數學的美妙之處在於，您可以使用簡單的方程式來創建複雜且令人驚訝的模式。 


  
  
  增加互動性


使用 JavaScript 和 p5.js 的一大優勢是您可以輕鬆地為您的創作添加互動性。以下是圖案顏色根據滑鼠位置變化的範例：



function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i 



在此草圖中，線條的顏色會根據滑鼠位置而變化。互動性是生成藝術的重要組成部分，因為它允許觀眾直接影響藝術品。 


  
  
  結論


使用 JavaScript 的生成藝術開啟了一個充滿創意可能性的世界。使用 p5.js，我們可以將數學方程式、隨機函數和使用者互動轉換為動態且令人驚訝的視覺效果。最好的部分是，由於該環境的靈活性，結果是獨特的，並且每次執行總是不同的。 

探索生成藝術是融合程式設計和創造力的好方法。嘗試不同的形狀、顏色和圖案，看看您可以將自己的生成藝術作品推向多遠！