::after是怎么生成的_生成艺术简介：它是什么，以及如何制作

最新推荐文章于 2023-09-05 01:37:26 发布

cumifi2519

最新推荐文章于 2023-09-05 01:37:26 发布

阅读量1k

点赞数

文章标签： python java 人工智能机器学习大数据

原文链接：https://www.freecodecamp.org/news/an-introduction-to-generative-art-what-it-is-and-how-you-make-it-b0b363b50a70/

版权

::after是怎么生成的

by Ali Spittel

通过Ali Spittel

生成艺术简介：它是什么，以及如何制作 (An introduction to Generative Art: what it is, and how you make it)

Generative art can be an intimidating topic — it seems like there is a lot of math involved, and art is tricky in itself!

生成艺术可能是一个令人生畏的话题-似乎涉及很多数学，而艺术本身就是棘手的！

But, it doesn’t have to be difficult — you can build some really cool things without a math or art degree. This post will break down what generative art even is and how you can get started building your own generative art.

但是，这并不困难-无需数学或艺术学位即可构建一些非常酷的东西。这篇文章将分解什么是生成艺术，以及您如何开始构建自己的生成艺术。

首先，什么是代码艺术？ (First, what is code art?)

Code art is any art that is built using code. There are endless examples on CodePen — for example CSS art.

代码艺术是使用代码构建的任何艺术。 CodePen上有无穷无尽的示例，例如CSS art 。

什么是生成艺术？ (What is generative art?)

Often, generative art draws inspiration from modern art, especially pop art that makes heavy use of orderly geometric patterns.

生成艺术通常会从现代艺术中汲取灵感，尤其是大量使用有序几何图案的波普艺术。

However, it is a very broad and rich category of art created with code with a central characteristic. Generative art incorporates a self-governed or autonomous system in some way.

但是，这是一门非常广泛且丰富的艺术类别，使用具有中心特征的代码创建。生成艺术以某种方式并入了自治系统或自治系统。

Randomness is one type of autonomous system. By incorporating chance into a piece of code art, you get a different, completely unique piece of art each time you run your script, load your page, or respond to some user interaction.

随机性是一种自治系统。通过将机会整合到一段代码中，您每次运行脚本，加载页面或响应某些用户交互时，都会获得完全不同的独特艺术品。

There are also more orderly autonomous systems. One example is Mandelbrot’s Fractal, derived from a deceptively simple equation.

还有更多有序的自治系统。一个例子是曼德布罗特的分形，从一个看似简单的方程式推导而来。

We can also integrate both approaches, blending order and chaos!

我们还可以集成两种方法，混合顺序和混乱！

The artwork becomes a collaboration between the computer and the artist. Some aspects of the artwork are controlled by the coder, but not all of them. The artist controls both the randomness and the order in the art.

艺术品成为计算机与艺术家之间的协作。艺术品的某些方面由编码器控制，但并非全部。艺术家控制艺术中的随机性和顺序。

In a way, with an autonomous system, the artist gives up control over their art, and the computer is doing it for them. A more nuanced perspective emerges when a new creative process is considered.

在某种程度上，借助自治系统，艺术家可以放弃对他们作品的控制，而计算机则可以为他们完成控制。考虑新的创作过程时，会出现更细微的差别。

The coder-artist engages in a feedback loop where they are constantly tweaking a system to produce more desirable and often more surprising results.

编码人员会参与一个反馈循环，在该循环中，他们不断调整系统，以产生更理想的和通常更令人惊讶的结果。

This process embraces experimentation and happy accidents in a way that reshapes the role of the artist. As generative artists, we use the code basics like loops, control flow and specialized functions. We then blend them with often unpredictable forces, to produce completely unique results unlike anything else that exists.

这个过程以重塑艺术家角色的方式包含了实验和意外事故。作为生成艺术家，我们使用诸如循环，控制流和专用功能之类的代码基础。然后，我们将它们与通常不可预测的力量融合在一起，以产生与众不同的完全独特的结果。

生成艺术的例子 (Examples of Generative Art)

Kate Compton’s Flowers

凯特·康普顿的花

Cellular Automata and the Edge of Chaos

元胞自动机和混沌边缘

菲尔·纳什(Phil Nash)的彩色动画生成艺术 (Animated generative art in multi-colour by Phil Nash)

印象派斑点的作者Murasaki Uma (Impressionists Blobs by Murasaki Uma)

Miriam Nadler生成的树 (Generated Tree by Miriam Nadler)

什么是生成艺术？ (What goes into a piece of generative art?)

Randomness is crucial for creating generative art. The art should be different each time you run the generation script, so randomness is usually a large part of that.
随机性对于创造生成艺术至关重要。每次您运行生成脚本时，技术应该有所不同，因此随机性通常是其中的很大一部分。
Algorithms — Implementing an algorithm visually can often generate awesome art, for example, the binary tree above.
算法 -以视觉方式实施算法通常可以产生出色的技术，例如上面的二叉树。
Geometry — Most generative art incorporates shapes, and the math from high school geometry class can aid in some really cool effects.
几何 -大多数生成艺术都融合了形状，高中几何课的数学可以帮助实现一些非常酷的效果。

您如何处理生成的艺术品？ (How can you approach a generative art piece?)

There are two main strategies for creating generative art, though most will fall between the two strategies.

创造生成艺术有两种主要策略，尽管大多数策略将介于这两种策略之间。

The first is to have no results in mind and see what the computer generates as you play around.

首先是没有结果，请看一下计算机在玩耍时会产生什么。

The second is that you have a very finalized idea of what you want the art to look like, and the randomness only slightly changes the end result.

第二个是您对艺术的外观有了非常确定的想法，而随机性只会稍微改变最终结果。

你应该从哪里开始？ (Where should you start?)

If you know JavaScript, p5.js is an awesome place to start. Its goal is to “make coding accessible for artists, designers, educators, and beginners.” It is a wrapper on the Canvas API, and it simplifies a lot of the math. It focuses on drawing, but you can also do sound, video, or webcam interaction with it if you are interested in those forms of art!

如果您知道JavaScript， p5.js是一个很棒的起点。其目标是“使艺术家，设计师，教育者和初学者都可以使用编码。” 它是Canvas API的包装，并且简化了许多数学运算。它专注于绘画，但是如果您对这些艺术形式感兴趣，也可以与之进行声音，视频或网络摄像头交互！

P5快速入门 (A Quick Introduction to P5)

First, load in the p5 CDN. Then, in your JavaScript file, you will add two functions that will be used in pretty much ever p5 script: setup and draw. These names are necessary for p5 to call them.

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

setup is called when the program starts. You will probably create a canvas to draw on within it using the createCanvas function, and you may set some defaults there. It is only called once!

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

draw is called after setup, and is executed constantly until you call noLoop, which will stop it from running again. You can control how many times draw runs each second with the frameRate function.

draw是在安装后调用，直到调用不断执行noLoop ，这将再次停止投放。您可以使用frameRate函数控制每秒draw运行多少次。

With generative art, I usually put noLoop in the setup function, which makes draw only run once instead of continuously.

对于生成艺术，我通常将noLoop放入setup函数中，该函数使draw只运行一次，而不是连续运行。

Here’s a p5 starter template on CodePen.

这是CodePen上的p5入门模板。

Since we’ve talked so much about the importance of randomness for generative art, another important function in p5 is random. It works similarly to JavaScript's Math.random but you can set a range for the numbers so that you don't have to do as much math to get the number to a useful format.

由于我们讨论了随机性对生成艺术的重要性，因此p5中的另一个重要功能是random 。它的工作方式与JavaScript的Math.random相似，但是您可以为数字设置一个范围，这样就不必做太多的数学运算就能将数字转换为有用的格式。

p5线 (p5 Lines)

You can create a line in p5.js like this:

您可以像这样在p5.js中创建一行：

line(startX, startY, endX, endY)

Then, you can randomly generate a bunch of lines and create a simple piece of generative art like this:

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

Even really simple scripts can generate cool pieces of art!

即使是非常简单的脚本也可以产生很棒的艺术品！

p5形状 (p5 Shapes)

You can also create shapes with p5 — like circles, triangles, and squares.

您也可以使用p5创建形状，例如圆形，三角形和正方形。

Here’s an example of creating some shapes with p5:

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

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

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

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

Then, we can create some more shapes to build something more fun!

然后，我们可以创建更多形状来构建更多乐趣！

p5运动 (p5 Movement)

We can add movement to our drawings by removing the noLoop function call in the setup function — check this out!

我们可以通过删除添加运动我们的图纸noLoop在函数调用setup功能-检查了这一点！

颜色 (Color)

You can also play with color with generative art by randomly choosing colors. You can do this mathematically through RGB values, or you can generate a color palette with your favorite color picker (we’ve been using this one).

您还可以通过随机选择颜色来利用生成艺术来发挥颜色。您可以通过RGB值以数学方式执行此操作，也可以使用自己喜欢的颜色选择器生成调色板(我们一直在使用该调色板)。

You can set the fill color with the color function. It takes a bunch of different formats, like named colors, RGBAs, and hex codes.

您可以使用color功能设置填充颜色。它采用一堆不同的格式，例如命名的颜色，RGBA和十六进制代码。

You can also change the color of the outline using stroke. You can also remove that outline using noStroke or make it a different width with strokeWeight.

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

全部放在一起 (Putting it all together)

Once we have all of those pieces in place, we can combine the techniques to build some really cool stuff.

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

另一个策略：调整教程 (Another Strategy: Tweaking Tutorials)

You can also generate really cool generative art by taking someone else’s work and building off of it. For example, here’s the result of a tutorial by Dan Shiffman:

您也可以通过将他人的作品改制成自己的作品来生成非常酷的生成艺术。例如，这是Dan Shiffman的教程的结果：

Here are two tweaks of it to create different effects:

以下是对它的两个调整以创建不同的效果：

Here’s a Codepen Collection with even more!

这是Codepen系列，还有更多！

You can follow tutorials, fork CodePens, or Glitch projects and create something new and unique. Just make sure to give the original artist some credit too.

您可以按照教程，派生CodePens或Glitch项目创建新的独特功能。只要确保也给原始艺术家一点信用即可。