用 Codex 和开源画笔做一张有水彩质感的生成海报：四步练习

admin 设计创意 6小时前

33 0

想让生成图不那么像一张光滑的数字图？这次我们不用“水彩滤镜”盖住照片，而是让代码一步步画出透明色块、线条和细小的笔触。下方四张图来自本站实际运行的练习：同一组随机种子，从色块逐步增加细节；它不是摄影作品对比，也不是第三方作者原作的复刻。

这个方法适合海报草稿、社交媒体配图和视觉探索。画面需要后续人工排版与挑选；浏览器渲染和笔刷效果可能随设备不同而变化。示例用 p5.js 2.1.2 和 Alejandro Campos-Uribe 的 p5.brush 3.0.0，后者采用 MIT 许可证；请遵守各依赖及素材的许可要求。

一、先铺三块有纸感的颜色

本站运行的手绘感生成海报第1阶段 — 本站代码练习的浏览器截图：一、先铺三块有纸感的颜色

先固定画布、主色与随机种子。三块颜色的大小和位置比笔刷数量更能决定画面结构。

可复制的 Codex 提示词：

用 Codex 创建一个本地 HTML 页面，加载 p5.js 2.1.2 和 p5.brush 3.0.0。画布设为 1100×690，使用 WEBGL，背景为暖米白。用 brush.fill 依次画三个半透明圆形：赭黄、砖红、灰蓝绿，允许彼此交叠。固定 randomSeed(42) 与 noiseSeed(42)，不要调用图片生成服务。先运行页面检查是否有 JS 错误，告诉我入口文件和运行方式。

二、加入不完全整齐的手绘线条

本站运行的手绘感生成海报第2阶段 — 本站代码练习的浏览器截图：二、加入不完全整齐的手绘线条

线条应该服务于层次，不必均匀铺满；数量太多会让色块变成背景噪声。

可复制的 Codex 提示词：

在现有页面的三块色形之上，使用 p5.brush 的 HB 笔刷添加 20 条细线，长度和倾斜程度略有变化；使用深绿与暖棕两色。继续保留 randomSeed(42)，不要改变原有色块和画布尺寸。运行页面并说明修改了哪些参数；如无法运行，明确写出未验证。

三、叠加细小圆形笔触

本站运行的手绘感生成海报第3阶段 — 本站代码练习的浏览器截图：三、叠加细小圆形笔触

小圆产生节奏，但并不等于真实手绘笔迹；需要人工检查局部是否过密。

可复制的 Codex 提示词：

在已有练习中增加 38 个大小不一的细线圆，使用 2B 笔刷、深绿及红棕色。保留固定随机种子和原来的颜色与线条，避免引入外部素材。请测试页面是否正常绘制，并说明如何通过数量、半径与颜色控制疏密。

四、收边并检查最终画面

本站运行的手绘感生成海报第4阶段 — 本站代码练习的浏览器截图：四、收边并检查最终画面

这里增加边框形成完整画面。本站使用浏览器运行四个阶段并截图；不同设备上颜色与纹理仍可能有差异。

可复制的 Codex 提示词：

在现有画面加一个细边框，并保留周围留白。检查桌面页面是否完整显示画布、没有 JavaScript 错误；如需移动端浏览，让画布等比例缩放但不拉伸。说明如何调整尺寸、颜色、随机种子，以及保存图片时需要注意的授权和分辨率。不要声称未执行的检查已经通过。

开始前准备与常见问题

在 Codex 中打开自己的空工作目录。将 p5.js 官方下载与 p5.brush 官方 dist 文件放进目录，或使用可信托管地址，并在 HTML 中先加载 p5.js，再加载画笔库。p5.brush 的 p5 构建需要 p5.js 2.x 和 WEBGL。无法联网时请自己提供依赖，不要让 Codex 编造安装结果。

画布空白：先检查浏览器控制台、文件路径和脚本加载顺序，确认使用 WEBGL；每次画面不同：检查随机种子是否在绘制前设置；颜色过脏：减少重叠或降低色块数量，而不是反复加滤镜。本站示例是在桌面浏览器测试的，不等于所有浏览器与手机均已验证。