使用 p5.js 繪製笑臉

在本文中，我們將探索如何使用 p5.js 庫創建一個簡單但迷人的圖畫：笑臉。 p5.j​​s 是一個 JavaScript 函式庫，可以輕鬆建立互動式圖形和動畫。它是想要創建基於程式碼的視覺專案的藝術家、設計師和開發人員的理想選擇。

什麼是 p5.js？

p5.js 是一個旨在讓視覺化程式設計世界變得易於存取的函式庫。它提供了一組功能，可讓您以簡單的方式繪製形狀、創建動畫以及與使用者互動。儘管它是用 JavaScript 編寫的，但用戶無需成為該語言的專家即可開始創建引人注目的視覺效果。

p5.j​​s 中草圖的基本結構

p5.js中的草圖有兩個主要功能：

1. setup()：開始時執行一次。這是我們初始化畫布、設定顏色並準備任何必要元素的地方。
2. draw()：逐幀循環運行。在這裡，我們放置要連續重複的指令（如動畫）。在我們的例子中，我們不需要動畫，所以我們將其留空。

項目：一張笑臉

目標是用簡單的形狀畫一張笑臉：一個大圓圈代表臉部，兩個小圓圈代表眼睛，一個弧線代表嘴巴。

第 1 步：建立畫布

我們要做的第一件事是定義畫布的大小。在本例中，我們將使用 400x400 像素的大小並設定黑色背景。

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

第二步：畫臉

臉簡直就是一個大圓。要在 p5.js 中繪製圓形，我們使用 ellipse() 函數，該函數需要其中心座標以及寬度和高度。在我們的例子中，我們將在畫布中心繪製一個直徑 200 像素的圓。

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

第三步：畫出眼睛

眼睛是兩個白色的小圓圈。我們可以使用相同的 ellipse() 函數，但這次我們給它們填充白色並將它們稍微向上放置到臉部中心的兩側。

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

第四步：畫出微笑

最後，對於微笑，我們使用 arc() 函數。此功能可讓您繪製橢圓弧，在本例中，它看起來像一個微笑。我們調整座標，讓曲線居中，看起來像一張嘴。

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

完整程式碼：

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

結論

這個簡單的範例展示如何透過幾行程式碼，使用 p5.js 創建有吸引力的圖形。儘管這個專案很基礎，但這裡使用的原理可以擴展以創建更複雜和詳細的視覺效果。如果你想嘗試更多，你可以嘗試調整元素大小，添加顏色，甚至在draw()中製作動畫。

繼續創建您自己的笑臉版本，並探索 p5.js 提供的功能！