JavaScript教程：生成艺术和P5.js入门-CSDN博客

在过去的几年中，我一直在介绍生成艺术，即用代码创建的艺术。我在9月举行的Strange Loop 2018大会上的两次演讲是我需要深入探讨的最后一招。但是，当我这样做时，我偶然发现了一些设置问题，这些问题使我挠头挠了脑筋，并使我放慢了脚步。下面，我将简要介绍一下P5.js是什么，最初的障碍是什么，以及如何直接使用P5.js和ES6进行美术创作。下周，我们将介绍一些API基础知识，并尝试制作水彩效果。但首先，要注意创造力。

你有创意吗？与他人谈论制作艺术或音乐时，您经常会听到有人说：“我只是没有创造力。” 对我来说，这就像我在说：“我不是篮球运动员。” 从技术上讲，这是正确的，但是如果我开始玩的话，我当然可以学习和享受皮卡游戏。最初可能会感到不舒服，但是如果我继续这样做，它将变得更加舒适，就像生活中的其他任何事情一样。

[在InfoWorld上更深入：超越jQuery：JavaScript框架专家指南 • Node.js框架的完整指南 • 10个必备JavaScript开发人员工具 • 6个最佳JavaScript IDE和10个最佳JavaScript编辑器。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

当我听到人们说他们没有创造力时，我将其作为不参加创造活动的理由。对于那些真正相信自己没有创造力或无法创造艺术的人，我非常推荐约翰·克莱斯（John Cleese）关于创造力的演讲，他在演讲中说：“创造力不是人才，这是一种创造力。操作。”

什么是P5.js？

为了回答这个问题，我们将首先讨论Processing 。处理是一种旨在促进视觉艺术与编程之间的读写交流的语言。处理可帮助视觉艺术家学习如何编程以创造艺术，并帮助程序员学习如何以他们喜欢的媒介制作艺术。就像代码中的素描本，可用于制作静态图像或动画。 P5.js是一个基于ProcessingJavaScript库，该库扩展了视觉范式，以包括动态交互和声音。

什么是生成艺术？

我从本杰明·科瓦奇（ Benjamin Kovach）的一次演讲中学到，杰森·贝利（Jason Bailey）将生成艺术定义为“使用计算机进行编程的艺术，该计算机在创建过程中故意引入了随机性”。如果您想快速了解生成艺术的外观，以及一些思考方式，我建议本杰明的演讲“ 混乱的盒子：生成艺术家的工具包” 。

P5.js对程序员的陷阱

我对P5.js的第一印象被文档中的一些“缺点”所污染。我应该注意，这些（感知到的）缺点与我的编程背景有关。当您在迎合新来者的背景下考虑它们时，它们无疑是“功能”。

NPM没有明确的设置步骤 。我知道这通常很简单，但是我很习惯在自述文件的顶部看到简单的npm安装说明，当我在任何地方都找不到它们时，我有点迷失了方向。相反，只有打包JavaScript文件的下载链接。对于刚接触编程的人来说，必须设置软件包安装工具和Node.js才是入门的巨大障碍，因此简单下载是理想的选择。但是，对我而言，这与处理依赖关系的最常用方法有所不同。

没有使用ES6语法的示例 。所有示例都使用ES5语法，在使用更好的语言人体工程学多年之后，这感觉有些困惑。当然，您可以在ES6中编写代码，但是如果您希望从文档中复制示例代码，请准备好重写它。 ES6是P5.js 1.0路线图中的优先事项，但与此同时，您必须自己进行转换。对于刚接触编程的人来说，使用ES6意味着必须重新引导Webpack和Babel，即使对于经验丰富的前端开发人员来说，这也像是巫毒教。对我而言，依靠ES5感觉就像是向JavaScript开发“黑暗时代”迈出了一步。

全球范围内的污染 。学习部分中的所有示例都使用P5.js的全局模式，其中您可以在P5.js期望它们的全局上下文中定义方法。 P5有一个实例模式，您可以以更模块化的方式使用该库而不必污染全局范围，但是除非您已经知道要查找的内容，否则很难找到它。