生成艺术是一种艺术家创建系统的技术，通常以算法的形式自动生成艺术品。这些系统可以从一组初始规则中产生无限的结果，使这个过程令人着迷且充满可能性。在本文中，我们将深入研究使用 javascript 的生成艺术世界，更具体地说，是流行的库 p5.js。
什么是生成艺术？
生成艺术依赖于创建可以生成艺术作品的无限种变体的系统。这些系统可以通过特定规则、数学算法甚至随机性来控制。系统的每次执行，都可以产生新的、独特的、视觉上有趣的艺术品。
这种艺术形式与编程密切相关，因为规则和代码定义了如何创建视觉结果。生成艺术家使用算法来定义图案、颜色、形状和运动，使每件作品都是发现的过程。
为什么选择 javascript？
javascript 是一种通用且易于访问的语言，可以直接在网络浏览器中运行，从而可以立即可视化生成艺术结果。此外，借助 p5.js 等库，只需几行代码就可以创建复杂的图形。
立即学习“Java免费学习笔记（深入）”；
p5.js 是一个专门为创建交互式和可视图形而设计的 javascript 库。它的简单性使其成为开始探索生成艺术的理想工具。
p5.js 入门
设置环境
要开始使用 javascript 创建生成艺术，您只需要一个浏览器和一个代码编辑器。您可以使用 p5.js web 编辑器或下载库并将其添加到您的项目中。
p5.js 草图的基本骨架
每个 p5.js 草图都分为两个主要功能：
- setup()：该函数在开始时运行一次。这是我们设置画布、颜色和任何初始参数的地方。
- draw()：该函数在循环中重复运行。在这里，我们放置了绘制和创建视觉元素的说明。
这是一个基本示例：
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
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，我们可以将数学方程、随机函数和用户交互转换为动态且令人惊讶的视觉效果。最好的部分是，由于这个环境的灵活性，结果是独特的，并且每次执行总是不同的。
探索生成艺术是融合编程和创造力的好方法。尝试不同的形状、颜色和图案，看看您能将自己的生成艺术作品推向多远！
