← 实验项目

Processing 实验

使用 p5.js、p5.brush 与 WebGL 制作的生成式图形实验

动态电路板

这是一幅生成式电路板插画:导线、焊盘与色块逐步组合成完整电路,随后再次分解。整个画面使用 p5.js 与 p5.brush 通过代码生成。

互动式 3D 吉祥物

吉祥物会轻轻摇摆和眨眼,灯光则突出各个表面的立体感。用鼠标或手指拖动角色,即可在 3D 中旋转它。

#p5.js#p5.brush#webgl#creative-coding#generative-art#3d

实验介绍

本页汇集了两个创意编程实验。第一个实验让电路板从导线、焊盘和水彩般的色块中逐步形成;第二个实验把像素风吉祥物构建成可用鼠标或手指旋转的互动式 3D 对象。

制作方式

两个场景都使用 p5.js 构建。电路板视觉使用 p5.brush 添加自然笔触、纹理与半透明色层,各个电路元素按照设定的循环逐步出现并消失。吉祥物运行在 WebGL 模式中,由具有真实体积的几何模块组成,Pointer Events 则把鼠标或手指的移动转换为双轴旋转。

什么是 Processing、p5.js 和 WebGL

Processing 是面向创意编程的开发环境和编程语言:图像与动画通过代码生成,而不是在图形编辑器中逐笔绘制。p5.js 将这种方法带入浏览器,并提供基于 JavaScript 的绘图工具。WebGL 利用显卡高效渲染三维图形。在本实验中,它负责几何结构、纵深、灯光以及吉祥物的实时旋转。

这种方式很适合生成艺术:每个元素都可以被赋予动画、连接数据或响应用户操作,并且无需逐帧绘制就能生成同一场景的不同版本。

更多示例请见这里