生成式设计代码包（适用于 P5.js）

你好！这个 GitHub 仓库包含了所有用 JavaScript 在 p5.js 中实现的《生成式设计：网页创意编程》一书的源代码。要开始使用，请按照以下章节的说明进行操作：设置和运行草图。祝你使用愉快！

作者：

贡献者：

设置

该设置允许你下载与为项目贡献更改相关的依赖项（例如 generative-design-library.js）。它还允许你使用 node 运行本地 Web 服务器。如果这些听起来太陌生或不感兴趣，你只想运行草图，请直接跳到运行草图部分。

安装 node.js（选择最新的稳定版本）
打开终端并导航到你下载到计算机上的 Code-Package-p5.js 文件夹：

$ cd 路径/到/文件夹
# 例如 cd /Users/GG/Documents/Code-Package-p5.js

运行：

$ npm install

运行草图

虽然大多数草图无需运行本地 Web 服务器即可工作，但有些草图由于使用外部文件2（如图片或数据）来创建和提供可视化信息，因此无法正常运行。要运行草图，你可以使用你喜欢的本地 Web 服务器。

有很多方法可以启动本地 Web 服务器。请参阅以下选项（顺序不分先后）

选项 1

一种方法是使用你选择的本地 Web 服务器（例如简单的 Python Web 服务器），然后在浏览器中打开 localhost:<端口>1。

$ cd 路径/到/文件夹
# 例如 cd /Users/GG/Documents/Code-Package-p5.js

$ python -m SimpleHTTPServer
# 检查 localhost:8000

选项 2

如果你已经按照设置部分的说明操作，并且正在使用 Node.js，可以按照以下说明进行操作：

在终端或命令行中输入以下命令，启动本地 Web 服务器（带有实时重载功能）。这将在新的浏览器窗口中打开 index.html 文件（所有草图的列表）。

$ npm start

点击列出的任何链接 🔗 以查看和交互草图。
互动、创作、保存并分享你的作品！🌈#GenerativeGestaltung #generativedesign #p5js

1默认端口是 8000，但你可以通过在命令后指定数字来更改端口号，例如 python -m SimpleHTTPServer 5000

2某些草图只有在文件放置在线上时才能按预期工作，因为它们依赖于"安全"敏感功能，如加载外部文件。如果你尝试在没有运行 Web 服务器的情况下本地查看它们，你会得到某种"跨域"错误 😭（请查看浏览器的控制台）。解决方法是使用所谓的本地 Web 服务器来提供文件。这就是当你运行上面显示的 npm start 或运行你自己的本地服务器时所发生的情况。