使用 JavaScript 探索生成藝術

生成藝術是一種藝術家創建系統的技術，通常以演算法的形式，自動生成藝術品。這些系統可以從一組初始規則中產生無限的結果，使這個過程令人著迷且充滿可能性。在本文中，我們將深入研究使用 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; i++) {
    let x = random(width);
    let y = random(height);
    fill(random(255), random(255), random(255), 150); // Random colors with transparency
    noStroke();
    ellipse(x, y, random(50, 100)); // Draw random circles
  }
}

在這個基本草圖中，我們建立一個空白畫布，並用隨機顏色繪製 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 < 100; i++) {
    let angle = map(i, 0, 100, 0, TWO_PI);
    let x = radius * cos(angle);
    let y = radius * sin(angle);
    ellipse(x, y, 50, 50); // Draw circles in a circular pattern
  }
  noLoop(); // Static drawing
}

在此範例中，我們使用 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 < numLines; i++) {
    let x = i * spacing;
    let colorValue = map(mouseX, 0, width, 0, 255); // Changes with mouse position
    stroke(colorValue, 100, 150);
    line(x, 0, width / 2, height);
  }
}

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

結論

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

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

以上是使用 JavaScript 探索生成藝術的詳細內容。更多資訊請關注PHP中文網其他相關文章！