使用 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 提供的功能！