Code-Package-p5.js

跟着书抄代码不如直接跑，生成艺术案例库随开随用

Code-Package-p5.js 是《Generative Design – Creative Coding for the Web with JavaScript in p5.js》一书的官方代码包，由原书作者维护。该项目为读者和创意编程爱好者提供书中所有示例的完整代码，涵盖从基础图形绘制到复杂生成艺术、数据可视化和交互设计的丰富案例。它解决的核心问题是帮助学习者跳过繁琐的代码抄写，直接运行和修改示例，从而聚焦于理解生成设计的核心概念和算法。项目基于 p5.js 框架，代码结构清晰，注释详尽，每个示例都独立成文件，便于单独运行和调试。此外，项目还包含一些扩展案例和实用工具函数，展示了如何将生成设计应用于实际网页项目中。对于希望系统学习生成艺术或寻找灵感的设计师与开发者而言，这是一个宝贵的资源库。

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1015

维护状态活跃

是否开源是

定价模式 free

项目预览

项目数据

分类设计创意

开发团队generative-design

所属国家

官网地址http://www.generative-gestaltung.de/2

GitHubhttps://github.com/generative-design/Code-Package-p5.js

定价模式free

价格说明开源代码包，基于Apache-2.0许可证，完全免费，无付费版本。

访问状态

是否开源是

开源协议Apache-2.0

主要语言JavaScript

技术栈/模型generative-art,generative-design,p5,p5-sketches,p5js,sketches

GitHub 星标★ 1015

30天Star增速

HF 下载量

上线时间2015-10-21 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数3

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 10 分钟部署方式：本地安装 5 步

环境要求

Node.js（最新稳定版，npm 随附）
可用的终端/命令行
已下载到本地的 Code-Package-p5.js 文件夹
可访问 GitHub 与 npm 源的网络

安装与启动步骤

1下载代码包

从 GitHub 获取 Code-Package-p5.js 仓库到本地；README 中后续步骤默认你已把该文件夹下载到电脑上。
```
git clone https://github.com/generative-design/Code-Package-p5.js
```
2安装 Node.js

前往 nodejs.org 下载并安装最新稳定版 Node.js，npm 会随安装包一起装好。
3进入项目目录

打开终端，用 cd 进入下载好的 Code-Package-p5.js 文件夹，路径按你自己的实际位置替换。
```
cd /Users/GG/Documents/Code-Package-p5.js
```
4安装依赖

在项目目录执行 npm install，安装与“为项目贡献改动”相关的依赖（如 generative-design-library.js）。只跑示例可跳过。
```
npm install
```
5运行示例

README 的 Running the Sketches 章节说明如何用 node 起本地服务器来运行 sketch；本次节选在此处被截断，具体命令请以 README 原文为准。

如何确认成功

npm install 顺利结束且无报错即依赖安装成功；示例是否跑通以 README 的 Running the Sketches 原文步骤为准。

常见问题

Q：我只想运行书中示例，需要装 Node.js 和依赖吗？

A：README 说明 Setup 主要是为了改项目依赖（如 generative-design-library.js）以及用 node 起本地服务器；如果只是想跑示例，可直接跳到 Running the Sketches 章节。

Q：本地服务器怎么启动？

A：README 提到可以用 node 运行本地 web 服务器，但具体命令在 Running the Sketches 章节，本次节选被截断，请打开仓库 README 原文查看。

Q：npm install 报错怎么办？

A：先确认已安装最新稳定版 Node.js，并确保终端已 cd 到 Code-Package-p5.js 目录后再执行；网络不通也会导致安装失败。

Q：项目用什么语言写的？

A：书中示例使用 JavaScript，基于 p5.js 框架，每个示例独立成文件，便于单独运行和调试。

注意事项

本次 README 节选在 Running the Sketches 处被截断，运行示例的完整命令请查看仓库 README 原文，不要凭猜测执行。
只想浏览示例代码的读者可跳过 Setup 中的 npm install 步骤，直接按 Running the Sketches 操作。
更多背景信息可访问官网 http://www.generative-gestaltung.de/2

核心亮点

覆盖书中全部示例，代码即学即用，省去手打时间
每个案例独立完整，注释清晰，适合按需查阅
基于 p5.js 生态，与网页集成简单，便于二次开发

不足之处

示例偏向教学，部分代码未优化性能，复杂场景需自行调整
文档/社区待观察

适用场景

学习生成设计理论时对照代码实践
寻找创意编程灵感，快速验证算法效果
作为教学素材，用于编程或设计课程

替代项目

generative-design、p5.js-sketches、Nature of Code

项目介绍

Code-Package-p5.js 是开源模型领域的开源项目，由 generative-design 开发，2015 年首次发布。

在全站 13,635 个收录项目中，它的 GitHub 星标数（1,015）位列前 30%，在开源模型分类中处于中上游。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-29。开源代码包，基于Apache-2.0许可证，完全免费，无付费版本。从国内网络环境看，可直接访问。

它主要面向的使用场景是：学习生成设计理论时对照代码实践。同类可对比的替代方案包括 generative-design、p5.js-sketches、Nature of Code。

上一篇：OmniFusion

下一篇：awesome-generative-ai