生成式设计代码包(适用于 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
或运行你自己的本地服务器时所发生的情况。
许可证
本书的所有源代码均根据 Apache License Version 2.0 授权