生成艺术简介

生成艺术可能是一个令人望而生畏的话题——它似乎涉及大量数学知识，而且艺术本身就很棘手！但其实它并不一定很难——即使没有数学或艺术学位，你也可以创作出一些非常酷的作品。这篇文章将深入剖析生成艺术，以及如何开始创作你自己的生成艺术作品。

首先，什么是代码艺术？

代码艺术是指任何使用代码创作的艺术作品。CodePen 上有无数示例，例如CSS 艺术作品。

什么是生成艺术？

生成艺术常常从现代艺术中汲取灵感，尤其是大量运用有序几何图案的波普艺术。然而，它实际上是一个用代码创作的、非常广泛且丰富的艺术类别，其核心特征是：生成艺术是用代码构建的艺术，但在此基础上，它在某种程度上融入了一个自主或自治的系统。

随机性是一种自主系统。通过将随机性融入代码艺术作品中，每次运行脚本、加载页面或响应用户交互时，我们都会得到不同的、完全独特的艺术作品。

当然，还有更有序的自治系统，比如曼德布洛特的分形，它源于一个看似简单的方程。

我们还可以整合两种方法，将秩序与混乱融合在一起！

艺术作品成为计算机与艺术家合作的成果。艺术作品的某些方面由程序员控制，但并非全部。艺术家既控制着艺术作品中的随机性，也控制着其秩序性。

某种程度上，有了自主系统，艺术家就放弃了对艺术的控制，而计算机则代劳。当我们思考一种新的创作过程时，就会出现一种更微妙的视角：调整这些系统并观察其输出。然后，程序员兼艺术家会参与到一个反馈循环中，不断调整系统，以产生更理想、通常也更令人惊喜的结果。

这个过程融合了实验和意外的惊喜，重塑了艺术家的角色。作为生成艺术家，我们运用循环、控制流、特殊函数等代码基础知识，并将它们与通常难以预测的力量融合，从而创作出独一无二、与现有事物截然不同的作品。

生成艺术的例子

凯特·康普顿的花

细胞自动机与混沌边缘

Phil Nash 创作的彩色动画生成艺术

印象派斑点 by Murasaki Uma

Miriam Nadler 生成的树

生成艺术作品包含哪些内容？

• 随机性对于生成艺术创作至关重要。每次运行生成脚本，艺术作品都应该有所不同，因此随机性通常是其中很重要的一部分。

• 算法——以可视化的方式实现算法通常可以产生令人惊叹的艺术作品，例如上面的二叉树。

• 几何——大多数生成艺术都包含形状，高中几何课上的数学知识可以帮助产生一些非常酷的效果。

您如何看待一件生成艺术作品？

创作生成艺术主要有两种策略，但大多数策略介于两者之间。第一种是心中没有结果，边玩边看计算机生成什么。第二种是，你对艺术作品的外观有一个非常确定的想法，随机性只会对最终结果产生轻微的影响。

您应该从哪里开始呢？

如果您了解 JavaScript，p5.js是一个很棒的入门工具。它的目标是“让艺术家、设计师、教育工作者和初学者都能轻松掌握编程”。它是Canvas API的封装器，简化了许多数学运算。它专注于绘图，但如果您对这些艺术形式感兴趣，也可以使用它进行声音、视频或网络摄像头交互！

P5 简介

首先，加载p5 CDN。然后，在你的 JavaScript 文件中添加两个几乎在所有 p5 脚本中都会用到的函数：setup和draw。这两个函数名是 p5 调用它们所必需的。

setup在程序启动时调用。您可能会使用该createCanvas函数创建一个画布并在其中进行绘制，并可能在其中设置一些默认值。它只会调用一次！

draw在设置后调用，并持续执行，直到您调用noLoop，这将停止它再次运行。您可以draw使用该frameRate函数控制每秒运行的次数。在生成艺术中，我通常会添加noLoop函数setup，这样它draw只会运行一次，而不是持续运行。

这是 CodePen 上的 p5 入门模板

既然我们已经讨论了很多关于随机性对于生成艺术的重要性，那么 p5 中的另一个重要功能就是random。它的工作原理与 JavaScript 类似，Math.random但你可以为数字设置一个范围，这样就不必进行太多的数学运算就能将数字转换为有用的格式。

p5 线

您可以在 p5.js 中创建如下一行：

line(startX, startY, endX, endY)

然后，您可以随机生成一堆线条并创建一个简单的生成艺术作品，如下所示：

即使是非常简单的脚本也可以生成很酷的艺术作品！

p5 形状

您还可以使用 p5 创建形状——例如圆形、三角形和正方形。

以下是使用 p5 创建一些形状的示例：

// circle
ellipse(xCoordinate, yCoordinate, width, height)

// square
rect(xCoordinate, yCoordinate, width, height)

// triangle
triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

然后，我们可以创建更多形状来构建更有趣的东西！

p5 运动

noLoop我们可以通过删除函数中的函数调用来为我们的绘图添加动作setup——看看这个！

颜色

您还可以通过随机选择颜色，在生成艺术中玩转色彩。您可以通过 RGB 值进行数学运算，也可以使用您最喜欢的颜色选择器（我们一直在用这个）生成调色板。

你可以使用该函数设置填充颜色color。它支持多种格式，例如命名颜色、RGBA 和十六进制代码。

您还可以使用 更改轮廓的颜色stroke。您还可以使用 删除该轮廓，noStroke或使用 更改其宽度strokeWeight。

整合起来

一旦我们将所有这些部分准备好，我们就可以结合这些技术来构建一些非常酷的东西。

另一个策略：调整教程

你也可以借鉴他人的作品，创作出非常酷炫的生成艺术作品。例如，以下是Dan Shiffman的教程成果：

以下是两个可以产生不同效果的调整：

这里有一个 Codepen 合集，其中包含更多内容！

您可以按照教程操作，fork CodePens 或 Glitch 项目，创作一些新颖独特的作品！请务必注明原创者。

备忘单

这是一份备忘单，其中包含我们在本教程中使用的所有 P5 功能。

阅读更多

• 生成艺术
• 编码训练
• 蒂姆·霍尔曼演讲

保持联系

如果您创作了自己的艺术作品，请务必在推特上告诉我们！（阿里和詹姆斯）