awesome-creative-coding
GitHub 14,900★ 创意编程终极资源清单,422条资源覆盖工具/教程/灵感
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。
GitHub 14,900★ 创意编程终极资源清单,422条资源覆盖工具/教程/灵感
加载项目详情…
本应用为开源项目,仅供学习研究,请遵守其开源协议。

awesome-creative-coding 是 GitHub 上最具影响力的创意编程资源合集之一,由丹麦设计师兼开发者 Terkel Gjervig 主导维护,目前拥有超过 14,900 个 Stars,已成为全球创意编程爱好者入门与深造的标杆性指南。这个仓库并非一个可执行的项目,而是一份精心编目的 Awesome List——通过 Markdown 文档将互联网上的优质资源分门别类,帮助开发者和艺术家快速找到适合自己的工具、教程和灵感来源。
提到"编程",大多数人脑海中浮现的是网站后端、数据处理或者 App 开发这类功能性代码。而 创意编程(Creative Coding) 完全打破了这一刻板印象:它的目标不是"把事情做成",而是"把事情做漂亮"。
创意编程是一种不同于传统编程的学科,目标是创造表达性的成果,而非功能性的产出。交互设计、信息可视化与生成艺术,都是创意编程的不同表现形式——如今它已成为一个约定俗成的术语,用来描述那些"以代码为媒介创作的艺术作品"。
用更通俗的话说:创意编程就是用代码画画、用代码作曲、用代码讲视觉故事。你可以把它想象成一位艺术家的画笔,只不过这位艺术家的画布是屏幕,画笔是代码,颜料是数学与图形学。
举个例子:生成艺术(Generative Art) 是创意编程最常见的应用场景。艺术家编写一段程序,让计算机按照特定规则自动"绘制"图像——这些规则可以是数学函数(如正弦波、分形)、物理模拟(如粒子系统、流体动力学),甚至是完全随机的噪声函数。每一张生成的图像都独一无二,观众每次运行程序都可能看到全新的"作品"。这种创作方式打破了人类手工创作的局限,让算法本身成为艺术家。
创意编程的生态极其碎片化。从 Processing、openFrameworks 等开发框架,到 GLSL Shader 编写,再到 Three.js、p5.js 等 Web 端库,相关资源散布在各种网站、论坛和博客中。对于初学者而言,最大的困难往往不是"找不到工具",而是"不知道哪些工具最适合自己"。
awesome-creative-coding 的核心价值在于降噪与导航。作者 Terkel Gjervig 从数千个资源中精选出 422 条优质内容,覆盖了以下主要领域:
| 分类 | 条目数 | 代表性内容 |
|---|---|---|
| Tools(工具) | 122 | Processing、openFrameworks、Three.js、Unity |
| Learning Resources(学习资源) | 108 | 视频、教程、文章、互动课程 |
| Books(书籍) | 40 | 《The Nature of Code》《Generative Design》 |
| Math(数学基础) | 35 | 线性代数、傅里叶变换、噪声函数 |
| ML/CV/AI(机器学习与视觉) | 13 | TensorFlow.js、ml5.js、Runway |
| Communities(社区) | 14 | Reddit 小组、Slack 频道、线下社群 |
这份清单的独特之处在于,它不仅收录了工具本身,还系统性地涵盖了学习路径:从数学基础(线性代数、几何变换)到图形学理论(OpenGL、WebGL 渲染管线),再到具体框架的使用方法,最终延伸到艺术灵感来源(博物馆、画廊、创意节)。换言之,这是一份从零基础到独立创作的完整知识地图。
对于想在本地创作的艺术家来说,Processing 是当之无愧的入门首选。这是 MIT 媒体实验室专为视觉艺术设计的编程语言和 IDE,用简洁的语法隐藏了底层图形学细节,创作者可以用几十行代码画出复杂的几何图案或动画。Processing 社区极其活跃,配套书籍(如《Generative Art》《The Nature of Code》)质量极高,是入门创意编程的不二之选。
openFrameworks 是 Processing 的 C++ 版本,适合追求更高性能的开发者。它允许直接调用 OpenGL、OpenCV 等底层库,适合需要精细控制渲染管线的项目——比如实时音视频交互装置、公共空间投影Mapping等。
nannou 则是 Rust 语言生态中的创意编程框架,近年来在性能敏感的应用场景中崭露头角。Rust 的内存安全特性让它特别适合需要长时间稳定运行的装置艺术。
随着 WebGL 和 WebGPU 技术的成熟,浏览器已成为创意编程最重要的展示平台之一。p5.js 是 Processing 的 JavaScript 移植版,拥有极其友好的教学文档和活跃的在线社区(OpenProcessing),非常适合快速原型开发。Three.js 则是 Web 3D 领域的绝对主角,从数据可视化到沉浸式艺术装置,都能见到它的身影。
Canvas-sketch 是另一个值得关注的新锐框架,它专注于生成艺术和高质量矢量输出,特别适合制作打印级别的图形作品。
对于追求极致视觉效果的开发者,GLSL Shader 编程是不可绕过的领域。Shader(着色器)是 GPU 上运行的微型程序,可以对每个像素进行并行计算,从而实现普通 CPU 代码无法企及的实时渲染效果。清单中包含大量 GLSL 学习资源,包括 iquilezles.org(Íñigo Quílez 的 GLSL 教程)、hg_sdf(符号距离函数库)以及 ray marching 相关工具。
清单中的 Machine Learning · Computer Vision · AI 章节收录了 13 条资源,涵盖了 AI 辅助视觉创作的主要工具链:TensorFlow.js 让你可以直接在浏览器中运行机器学习模型;ml5.js 是面向艺术家的友好封装,降低了 AI 模型的使用门槛;Runway 则提供了大量预训练 AI 模型的可视化操作界面,非程序员也能玩转风格迁移、图像生成等前沿技术。
值得注意的是,ml5.js 的设计理念与 Processing 一脉相承——它的目标不是做最强大的 AI 工具,而是让 AI 对创意编程社区更加触手可及。
对于初次接触创意编程的朋友,建议按照以下路径使用这份资源清单:
第一步(1-2 周):安装 Processing 或 p5.js 在线编辑器,用几十行代码画出第一张"程序生成的画"。这个阶段的目标是感受创意编程的思维方式——用代码表达视觉想象,而非实现业务逻辑。
第二步(2-4 周):学习数学基础。创意编程的本质是"用数学描述视觉",清单中的 Math 章节提供了线性代数、傅里叶变换、分形与噪声等主题的学习资源。建议重点关注 The Coding Train(Daniel Shiffman)的 YouTube 频道——这位 MIT 导师的讲解深入浅出,是创意编程领域最受欢迎的教育者之一。
第三步(持续):探索细分领域。当你对基础工具足够熟悉后,可以根据兴趣选择深入方向:想创作网页端的交互体验?深入 Three.js 和 WebGL。想做音乐可视化?研究 Web Audio API 和 Shader。想探索 AI 生成艺术?跟进 Runway 和 ml5.js。
任何 Awesome List 都有其局限性。对于 awesome-creative-coding,主要的批评声音集中在以下几个方面:
更新频率问题。作为维护者全凭兴趣维护的开源项目,资源清单的时效性完全依赖贡献者提交 PR。随着创意编程领域快速发展,部分工具链接可能已过时,而新增的热门工具(如 DALL-E、Stable Diffusion WebUI)在此清单中覆盖有限。
边界模糊。什么是"创意编程"?这个问题没有标准答案。清单中同时收录了游戏引擎(Unity)、机器学习工具和视觉编程语言(vvvv),这些内容与传统意义上的"创意编程"存在相当大的距离。
缺乏中文资源。清单以英语为主,对中文开发者存在一定的语言门槛。尽管中文互联网有优秀的创意编程社区(如 Gitee 上的中文 Processing 教程),但这份清单基本未涉及。
awesome-creative-coding 的意义远超一份工具清单本身。它折射出创意编程从"小众实验"到"主流表达媒介"的身份转变。今天,创意编程已经深度渗透到以下领域:
随着 WebGPU、Compute Shader 等新一代浏览器图形技术的成熟,以及 AI 生成工具(如 Stable Diffusion、ControlNet)与创意编程工作流的深度融合,创意编程的边界正在以前所未有的速度扩展。awesome-creative-coding 作为这一生态的导航图,将持续为新一代创作者打开代码艺术的大门。
项目信息
- Stars:14,937
- 语言:HTML(文档为主)
- 维护者:terkelg(Terkel Gjervig,丹麦设计师)
- 许可协议:CC0(完全公有领域)
- 主要分支:main
- 相关主题:#generative-art #data-visualization #interaction-design #webgl #shaders #creative-coding