Brad Woods Digital Garden

Brad Woods Digital Garden 是一个以“数字花园”理念运营的创意编程知识库，作者 Brad Woods 在公共领域持续耕种未成熟、不断修订的笔记，目标是成为 Web 创意编码的蓝图。

内容特色：从种子到成熟，状态透明

每篇笔记标注生长状态：Seed（种植不足1年）、Sprout（超过1年且定期修订）、Mature（超过2年且定期修订）、Decaying（超过1年未维护）。这种机制让读者一眼判断内容的成熟度与可靠性。

• 状态标签：Seed / Sprout / Mature / Decaying 四种状态明确标注
• 典型笔记：Shaders 102 - sending data（TENDED）、Gradient shader（PLANTED）、Shaders 103 - smoke（PLANTED）
• 主题覆盖：Shader 编程、Three.js 动画、CSS 3D、SVG 滤镜、View Transition API、Intersection Observer 等

核心主题：创意编码的三大支柱

笔记围绕设计、工程与创造力三个维度展开，既有技术教程（如“如何用 Three.js 和 GSAP 在球体表面动画化网格”），也有理念探讨（如“软件中的 Juice 是什么”“如何让软件拥有灵魂”）。

• 技术教程：Scroll-driven draw animation（SVG clip-path）、3D in CSS（perspective 与 transform）、Shader 102/103 系列
• 设计理念：Juice（软件中的情感满足）、Game Feel 在非游戏软件中的应用、User-driven UI 与最近发展区理论
• 工程实践：XState 状态管理、Web Workers、Big O、Debounce & Throttle、Memoization

适合谁用：前端开发者与创意编程爱好者

内容深度适中，适合已掌握基础前端知识、希望深入创意编码（Creative Coding）的开发者。作者 Brad Woods 是 Canva 的前端工程师，笔记带有实战经验视角。

• 目标读者：Web 开发者、Three.js 学习者、Shader 入门者、UI/UX 设计师
• 学习路径：从“Shaders 101”到“Shaders 103”逐步深入，附带交互示例
• 额外资源：收录来自 The HTML Review 等网络创意项目，并附有“News”板块推荐 Web 开发新闻源

常见问题

Q1：Brad Woods Digital Garden 与普通博客有什么区别？

A1：数字花园强调“学习在公共”，笔记不追求完美，而是持续修订。每篇笔记有明确的状态标签（Seed/Sprout/Mature/Decaying），读者可看到内容的演化过程。

Q2：这个站点有哪些关于 Three.js 的教程？

A2：包含 Scroll-driven camera animation（随滚动移动相机）、Animate a mesh across a sphere's surface（使用 Three.js + GSAP）、Shaders 102/103（发送数据与烟雾效果）等。

Q3：如何判断一篇笔记是否过时？

A3：笔记顶部有状态标签：Decaying 表示超过1年未更新，Mature 表示超过2年且定期维护。作者会定期“耕种”旧笔记，更新内容。

更多同类工具与网站,可在学习资源分类继续挑选。

信息核实于 2026年7月,具体以官网为准。