 圆角支持与几何体多材质系统（GSoC 2022）)
p5.js WebGL 渲染管线改进实录rect() 圆角支持与几何体多材质系统GSoC 2022【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js导读本文以 p5.js 仓库中的 GSoC 2022 结项报告shubham_sharma_gsoc_2022.md为核心深度剖析该年度针对 WebGL 渲染管线的两项关键改造一是让rect()在 WebGL 模式下真正支持圆角参数二是重构填充色fill与材质Material的关系使环境光、自发光、高光等材质属性能够同时作用于同一几何体并各自独立参与光照计算。读完本文你将理解这两项能力的设计动机、底层源码实现与调用链并能直接在 p5.js WebGL 草图中复现使用。一、项目背景两个长期存在的 WebGL 缺口在 GSoC 2022 之前p5.js 的 WebGL 模式存在两个被社区反复诟病的行为差异rect()的圆角参数形同虚设rect()接受八个参数后四个参数分别定义左上top-left、右上top-right、右下lower-right、左下lower-left四个角的圆角半径。但在 WebGL 模式下即便传入这些参数圆角也不会生效对应 issue #5001。更糟的是p5.js 当时对此既不报错也不提示对初学者极具迷惑性。材质属性相互覆盖环境光材质ambientMaterial()、自发光材质emissiveMaterial()、高光材质specularMaterial()在旧实现中会覆盖fill()的颜色导致无法在同一个几何体上叠加多种材质属性。该项目的目标因此被明确为两条主线修正 WebGL 模式下部分几何体的不当行为以及重构 WebGL 渲染管线使多个材质能够同时应用到几何体上。二、修正 rect() 在 WebGL 模式下的圆角行为2.1 问题本质与解决思路rect(x, y, w, h, tl, tr, br, bl)的第五至第八个参数依次为左上、右上、右下、左下的圆角半径。旧实现中这些参数在 WebGL 分支里被完全忽略。修复方案借鉴了 Processing 的处理方式——当需要圆角时改用立即模式immediate mode绘制即通过vertex()与贝塞尔曲线顶点手工构建矩形轮廓而不是走常规的几何体缓存路径。2.2 源码实现双路径分支在 src/webgl/3d_primitives.js 的Renderer3D.prototype.rect中实现通过判断第五个参数是否传入来决定走哪条路径Renderer3D.prototype.rect function (args) { const x args[0]; const y args[1]; const width args[2]; const height args[3]; if (typeof args[4] undefined) { // 未提供圆角参数走保留模式retained mode // 使用缓存的矩形几何体 模型矩阵平移缩放性能更高 const gid rect|${detailX}|${detailY}; // ... this.model(this.geometryBufferCache.getGeometryByID(gid)); } else { // 提供了圆角参数走立即模式immediate mode逐角构建圆角轮廓 let tl args[4]; let tr typeof args[5] undefined ? tl : args[5]; let br typeof args[6] undefined ? tr : args[6]; let bl typeof args[7] undefined ? br : args[7]; // ... this.beginShape(); // 逐角使用 bezierVertex 绘制圆弧 } };从源码结构可以提取出几个关键设计细节参数缺省传播规则当只传第五个参数tl时其余三个角自动继承tl只传tl、tr时br继承tr、bl继承br——这与 2D 模式下rect()的圆角语义保持一致方便用户只传一个半径画出四角等圆的圆角矩形。圆角半径钳制圆角半径不会超过矩形短边的一半源码中通过const maxRounding Math.min((c - a) / 2, (d - b) / 2);对上界进行钳制避免负半径或半径过大导致几何形状畸形。贝塞尔曲线逼近圆弧实现采用三次贝塞尔曲线近似圆角代码中常量const rr 0.5523; // kappa: 4*(sqrt(2)-1)/3即三次贝塞尔逼近四分之一圆的标准控制点系数kappa 值并通过this.bezierOrder(3)与bezierVertex()逐角绘制src/webgl/3d_primitives.js。需要说明的是最终合入的实现选用的是三次贝塞尔bezierVertex而非二次贝塞尔quadraticVertex这是结项报告初稿与最终代码的一处差异以当前仓库源码为准。纹理坐标同步立即模式路径中每个顶点都附带归一化的 UV 坐标addUVs辅助函数因此圆角矩形在打上纹理后 UV 依然正确src/webgl/3d_primitives.js。2.3 效果对比修复前后的差异可以用下面这段最小可复现代码直观体验来自结项报告原文function setup() { // 创建 WebGL 画布 createCanvas(720, 400, WEBGL); background(200); // 设置颜色 fill(204, 101, 192, 127); stroke(127, 63, 120); // 一个圆角矩形tl40, tr1, br5, bl1 rect(-100, -100, 200, 80, 40, 1, 5, 1); }修复前圆角参数被忽略矩形四角为直角且无任何报错提示修复后四个角分别按(40, 1, 5, 1)的半径呈现圆角矩形轮廓由贝塞尔曲线平滑过渡。2.4 回归测试与遗留问题该功能在仓库的视觉测试中有对应用例见 test/unit/visual/cases/shapes.jsvisualTest(Drawing rounded rectangles, function (p5, screenshot) { setup(p5); p5.rect(5, 5, 40, 20, 5); // 单圆角参数四角均为 5 p5.rect(5, 30, 40, 15, 2, 4, 6, 8); // 四个角分别指定 screenshot(); });结项报告同时指出了已知遗留问题当strokeWeight较大时圆角矩形轮廓会出现伪影artifact较小strokeWeight下则显示正常。报告认为该问题根因在描边渲染器stroke renderer本身需要后续对描边管线做更深入的研究这也是提交者留给社区的一项后续工作。三、重构渲染管线几何体多材质支持3.1 设计动机让材质回归分离贡献模型现实世界中不同物体对光的响应各不相同钢铁比陶罐更闪亮木质容器的光照响应又与钢铁完全不同有些物体吸收光线、散射极少产生小而锐利的高光点另一些则散射广泛、高光区域更大。为还原这种物理直觉项目决定放弃材质颜色覆盖 fill 颜色的旧模式转而采用 Processing 的做法——让环境光ambient、自发光emissive、高光specular作为相互独立的颜色属性各自对表面光照做出贡献。3.2 新增 uniform 与着色器逻辑实现引入三个新的着色器 uniform分别承载三路材质颜色src/webgl/shaders/phong.fraguniform bool uHasSetAmbient; uniform vec3 uAmbientColor; uniform vec4 uSpecularMatColor; uniform vec4 uAmbientMatColor; uniform vec4 uEmissiveMatColor;在片元着色器中这三路材质参与光照计算的方式如下src/webgl/shaders/phong.frag环境光材质若启用了环境光纹理uAmbientSampler取纹理色 × uAmbientMatColor.rgb否则在用户显式调用过ambientMaterial()uHasSetAmbient时取uAmbientMatColor.rgb未调用时回退到顶点颜色inputs.color.rgb——这一回退保证了旧草图的向后兼容。高光材质有高光贴图时取纹理色 × uSpecularMatColor.rgb否则直接使用uSpecularMatColor.rgb。自发光材质直接使用uEmissiveMatColor.rgb参与输出。3.3 渲染器侧uniform 的装配与金属度混合在渲染器 src/core/p5.Renderer3D.js 的_setFillUniforms方法中这些 uniform 被逐一装配_setFillUniforms(fillShader) { this.mixedSpecularColor [...this.states.curSpecularColor]; // ... if (this.states._useMetalness 0) { this.mixedSpecularColor this.mixedSpecularColor.map( (mixedSpecularColor, index) this.states.curFillColor[index] * this.states._useMetalness mixedSpecularColor * (1 - this.states._useMetalness) ); } // ... fillShader.setUniform(uHasSetAmbient, this.states._hasSetAmbient); fillShader.setUniform(uAmbientMatColor, this.states.curAmbientColor); fillShader.setUniform(uSpecularMatColor, this.mixedSpecularColor); fillShader.setUniform(uEmissiveMatColor, this.states.curEmissiveColor); fillShader.setUniform(uSpecular, this.states._useSpecularMaterial); fillShader.setUniform(uEmissive, this.states._useEmissiveMaterial); fillShader.setUniform(uShininess, this.states._useShininess); fillShader.setUniform(uMetallic, this.states._useMetalness); }几个值得注意的实现事实默认值渲染器初始化时环境光材质默认[1, 1, 1, 1]白色自发光材质默认[0, 0, 0, 0]黑色高光颜色随specularMaterial()调用变化src/core/p5.Renderer3D.js。金属度混合当metalness_useMetalness大于 0 时mixedSpecularColor会在填充色与高光色之间按金属度线性插值fill × metalness specular × (1 - metalness)这是从源码结构推断出的 PBR 化处理用于模拟金属材质高光颜色随固有色变化的物理特性。用户侧 API 不变ambientMaterial()、specularMaterial()、emissiveMaterial()三个公开方法位于 src/webgl/material.js均通过this._assert3d()断言 WebGL 模式其作用是把用户传入的颜色写入states.curAmbientColor/curSpecularColor/curEmissiveColor供_setFillUniforms读取。3.4 效果验证结项报告中给出了对照草图的复现方式同一场景下渲染两个球体两者都调用ambientMaterial(255, 0, 0)红色环境光材质区别在于高光材质不同——左侧球体specularMaterial(0, 0, 0)黑色无高光右侧球体specularMaterial(255, 255, 255)白色强高光function setup() { createCanvas(600, 600, WEBGL); smooth(8); noStroke(); } function draw() { background(0); ambientLight(128, 128, 128); directionalLight(128, 128, 128, cos(frameCount * 0.1), 1, -1); push(); translate(-width * 0.25, 0, 0); ambientMaterial(255, 0, 0); specularMaterial(0, 0, 0); sphere(width * 0.2); pop(); push(); translate(width * 0.25, 0, 0); ambientMaterial(255, 0, 0); specularMaterial(255, 255, 255); sphere(width * 0.2); pop(); }修复前后调用的材质颜色会整体覆盖先前的 fill/材质设置两个球体无法同时呈现红色环境光 差异化高光修复后两个球体都保留红色环境光底色的同时右侧球体额外呈现出明显的高光左侧则保持哑光观感——环境光、自发光、高光三种材质属性真正实现了同体共存、分路贡献。仓库单元测试也验证了该行为见 test/unit/webgl/p5.Geometry.js分别以specularMaterial(255, 0, 0)与specularMaterial(0, 0, 255)渲染对比几何体检验不同高光色在光照下的表现差异。3.5 生态同步WebGPU 后端的对应实现这套多材质模型并未停留在 WebGL 侧。仓库的 WebGPU 渲染后端p5.RendererWebGPU见 src/webgpu/index.js同样在 src/webgpu/shaders/material.js 中实现了对应的高光/环境光/自发光材质 uniform 与着色逻辑保证了 p5.js 在新渲染后端上材质行为的一致性——这一点可以从源码结构推断得出说明该材质模型已成为 p5.js 渲染体系中的通用约定。四、项目产出清单本次 GSoC 2022 项目共合并两个主要 Pull Request产出说明PR #5789为 WebGL 模式下的rect()增加圆角属性支持对应 issue #5001PR #5774实现几何体的多材质支持ambient / specular / emissive 独立贡献光照五、总结本次项目围绕 p5.js WebGL 渲染管线完成了两项具有长期价值的改进一方面补齐了rect()圆角在 WebGL 模式下有参数无效果的功能缺口并通过保留模式/立即模式双路径兼顾了性能与正确性另一方面把材质系统从颜色覆盖升级为属性分离为 p5.js 的 WebGL 光照体系建立了更接近真实世界的光照响应模型。这两项工作共同降低了初学者在 WebGL 模式下的困惑也为后续材质贴图map_Ks / map_Ka 等纹理映射见 src/webgl/shaders/phong.frag与金属度等更进阶的渲染特性铺平了道路。若读者希望深入理解或参与后续改进例如报告提及的高 strokeWeight 描边伪影问题可直接从 src/webgl/3d_primitives.js 与 src/core/p5.Renderer3D.js 入手阅读实现。【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 p5.js WebGL 渲染管线改进实录：rect() 圆角支持与几何体多材质系统（GSoC 2022）
p5.js WebGL 渲染管线改进实录rect() 圆角支持与几何体多材质系统GSoC 2022【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js导读本文以 p5.js 仓库中的 GSoC 2022 结项报告shubham_sharma_gsoc_2022.md为核心深度剖析该年度针对 WebGL 渲染管线的两项关键改造一是让rect()在 WebGL 模式下真正支持圆角参数二是重构填充色fill与材质Material的关系使环境光、自发光、高光等材质属性能够同时作用于同一几何体并各自独立参与光照计算。读完本文你将理解这两项能力的设计动机、底层源码实现与调用链并能直接在 p5.js WebGL 草图中复现使用。一、项目背景两个长期存在的 WebGL 缺口在 GSoC 2022 之前p5.js 的 WebGL 模式存在两个被社区反复诟病的行为差异rect()的圆角参数形同虚设rect()接受八个参数后四个参数分别定义左上top-left、右上top-right、右下lower-right、左下lower-left四个角的圆角半径。但在 WebGL 模式下即便传入这些参数圆角也不会生效对应 issue #5001。更糟的是p5.js 当时对此既不报错也不提示对初学者极具迷惑性。材质属性相互覆盖环境光材质ambientMaterial()、自发光材质emissiveMaterial()、高光材质specularMaterial()在旧实现中会覆盖fill()的颜色导致无法在同一个几何体上叠加多种材质属性。该项目的目标因此被明确为两条主线修正 WebGL 模式下部分几何体的不当行为以及重构 WebGL 渲染管线使多个材质能够同时应用到几何体上。二、修正 rect() 在 WebGL 模式下的圆角行为2.1 问题本质与解决思路rect(x, y, w, h, tl, tr, br, bl)的第五至第八个参数依次为左上、右上、右下、左下的圆角半径。旧实现中这些参数在 WebGL 分支里被完全忽略。修复方案借鉴了 Processing 的处理方式——当需要圆角时改用立即模式immediate mode绘制即通过vertex()与贝塞尔曲线顶点手工构建矩形轮廓而不是走常规的几何体缓存路径。2.2 源码实现双路径分支在 src/webgl/3d_primitives.js 的Renderer3D.prototype.rect中实现通过判断第五个参数是否传入来决定走哪条路径Renderer3D.prototype.rect function (args) { const x args[0]; const y args[1]; const width args[2]; const height args[3]; if (typeof args[4] undefined) { // 未提供圆角参数走保留模式retained mode // 使用缓存的矩形几何体 模型矩阵平移缩放性能更高 const gid rect|${detailX}|${detailY}; // ... this.model(this.geometryBufferCache.getGeometryByID(gid)); } else { // 提供了圆角参数走立即模式immediate mode逐角构建圆角轮廓 let tl args[4]; let tr typeof args[5] undefined ? tl : args[5]; let br typeof args[6] undefined ? tr : args[6]; let bl typeof args[7] undefined ? br : args[7]; // ... this.beginShape(); // 逐角使用 bezierVertex 绘制圆弧 } };从源码结构可以提取出几个关键设计细节参数缺省传播规则当只传第五个参数tl时其余三个角自动继承tl只传tl、tr时br继承tr、bl继承br——这与 2D 模式下rect()的圆角语义保持一致方便用户只传一个半径画出四角等圆的圆角矩形。圆角半径钳制圆角半径不会超过矩形短边的一半源码中通过const maxRounding Math.min((c - a) / 2, (d - b) / 2);对上界进行钳制避免负半径或半径过大导致几何形状畸形。贝塞尔曲线逼近圆弧实现采用三次贝塞尔曲线近似圆角代码中常量const rr 0.5523; // kappa: 4*(sqrt(2)-1)/3即三次贝塞尔逼近四分之一圆的标准控制点系数kappa 值并通过this.bezierOrder(3)与bezierVertex()逐角绘制src/webgl/3d_primitives.js。需要说明的是最终合入的实现选用的是三次贝塞尔bezierVertex而非二次贝塞尔quadraticVertex这是结项报告初稿与最终代码的一处差异以当前仓库源码为准。纹理坐标同步立即模式路径中每个顶点都附带归一化的 UV 坐标addUVs辅助函数因此圆角矩形在打上纹理后 UV 依然正确src/webgl/3d_primitives.js。2.3 效果对比修复前后的差异可以用下面这段最小可复现代码直观体验来自结项报告原文function setup() { // 创建 WebGL 画布 createCanvas(720, 400, WEBGL); background(200); // 设置颜色 fill(204, 101, 192, 127); stroke(127, 63, 120); // 一个圆角矩形tl40, tr1, br5, bl1 rect(-100, -100, 200, 80, 40, 1, 5, 1); }修复前圆角参数被忽略矩形四角为直角且无任何报错提示修复后四个角分别按(40, 1, 5, 1)的半径呈现圆角矩形轮廓由贝塞尔曲线平滑过渡。2.4 回归测试与遗留问题该功能在仓库的视觉测试中有对应用例见 test/unit/visual/cases/shapes.jsvisualTest(Drawing rounded rectangles, function (p5, screenshot) { setup(p5); p5.rect(5, 5, 40, 20, 5); // 单圆角参数四角均为 5 p5.rect(5, 30, 40, 15, 2, 4, 6, 8); // 四个角分别指定 screenshot(); });结项报告同时指出了已知遗留问题当strokeWeight较大时圆角矩形轮廓会出现伪影artifact较小strokeWeight下则显示正常。报告认为该问题根因在描边渲染器stroke renderer本身需要后续对描边管线做更深入的研究这也是提交者留给社区的一项后续工作。三、重构渲染管线几何体多材质支持3.1 设计动机让材质回归分离贡献模型现实世界中不同物体对光的响应各不相同钢铁比陶罐更闪亮木质容器的光照响应又与钢铁完全不同有些物体吸收光线、散射极少产生小而锐利的高光点另一些则散射广泛、高光区域更大。为还原这种物理直觉项目决定放弃材质颜色覆盖 fill 颜色的旧模式转而采用 Processing 的做法——让环境光ambient、自发光emissive、高光specular作为相互独立的颜色属性各自对表面光照做出贡献。3.2 新增 uniform 与着色器逻辑实现引入三个新的着色器 uniform分别承载三路材质颜色src/webgl/shaders/phong.fraguniform bool uHasSetAmbient; uniform vec3 uAmbientColor; uniform vec4 uSpecularMatColor; uniform vec4 uAmbientMatColor; uniform vec4 uEmissiveMatColor;在片元着色器中这三路材质参与光照计算的方式如下src/webgl/shaders/phong.frag环境光材质若启用了环境光纹理uAmbientSampler取纹理色 × uAmbientMatColor.rgb否则在用户显式调用过ambientMaterial()uHasSetAmbient时取uAmbientMatColor.rgb未调用时回退到顶点颜色inputs.color.rgb——这一回退保证了旧草图的向后兼容。高光材质有高光贴图时取纹理色 × uSpecularMatColor.rgb否则直接使用uSpecularMatColor.rgb。自发光材质直接使用uEmissiveMatColor.rgb参与输出。3.3 渲染器侧uniform 的装配与金属度混合在渲染器 src/core/p5.Renderer3D.js 的_setFillUniforms方法中这些 uniform 被逐一装配_setFillUniforms(fillShader) { this.mixedSpecularColor [...this.states.curSpecularColor]; // ... if (this.states._useMetalness 0) { this.mixedSpecularColor this.mixedSpecularColor.map( (mixedSpecularColor, index) this.states.curFillColor[index] * this.states._useMetalness mixedSpecularColor * (1 - this.states._useMetalness) ); } // ... fillShader.setUniform(uHasSetAmbient, this.states._hasSetAmbient); fillShader.setUniform(uAmbientMatColor, this.states.curAmbientColor); fillShader.setUniform(uSpecularMatColor, this.mixedSpecularColor); fillShader.setUniform(uEmissiveMatColor, this.states.curEmissiveColor); fillShader.setUniform(uSpecular, this.states._useSpecularMaterial); fillShader.setUniform(uEmissive, this.states._useEmissiveMaterial); fillShader.setUniform(uShininess, this.states._useShininess); fillShader.setUniform(uMetallic, this.states._useMetalness); }几个值得注意的实现事实默认值渲染器初始化时环境光材质默认[1, 1, 1, 1]白色自发光材质默认[0, 0, 0, 0]黑色高光颜色随specularMaterial()调用变化src/core/p5.Renderer3D.js。金属度混合当metalness_useMetalness大于 0 时mixedSpecularColor会在填充色与高光色之间按金属度线性插值fill × metalness specular × (1 - metalness)这是从源码结构推断出的 PBR 化处理用于模拟金属材质高光颜色随固有色变化的物理特性。用户侧 API 不变ambientMaterial()、specularMaterial()、emissiveMaterial()三个公开方法位于 src/webgl/material.js均通过this._assert3d()断言 WebGL 模式其作用是把用户传入的颜色写入states.curAmbientColor/curSpecularColor/curEmissiveColor供_setFillUniforms读取。3.4 效果验证结项报告中给出了对照草图的复现方式同一场景下渲染两个球体两者都调用ambientMaterial(255, 0, 0)红色环境光材质区别在于高光材质不同——左侧球体specularMaterial(0, 0, 0)黑色无高光右侧球体specularMaterial(255, 255, 255)白色强高光function setup() { createCanvas(600, 600, WEBGL); smooth(8); noStroke(); } function draw() { background(0); ambientLight(128, 128, 128); directionalLight(128, 128, 128, cos(frameCount * 0.1), 1, -1); push(); translate(-width * 0.25, 0, 0); ambientMaterial(255, 0, 0); specularMaterial(0, 0, 0); sphere(width * 0.2); pop(); push(); translate(width * 0.25, 0, 0); ambientMaterial(255, 0, 0); specularMaterial(255, 255, 255); sphere(width * 0.2); pop(); }修复前后调用的材质颜色会整体覆盖先前的 fill/材质设置两个球体无法同时呈现红色环境光 差异化高光修复后两个球体都保留红色环境光底色的同时右侧球体额外呈现出明显的高光左侧则保持哑光观感——环境光、自发光、高光三种材质属性真正实现了同体共存、分路贡献。仓库单元测试也验证了该行为见 test/unit/webgl/p5.Geometry.js分别以specularMaterial(255, 0, 0)与specularMaterial(0, 0, 255)渲染对比几何体检验不同高光色在光照下的表现差异。3.5 生态同步WebGPU 后端的对应实现这套多材质模型并未停留在 WebGL 侧。仓库的 WebGPU 渲染后端p5.RendererWebGPU见 src/webgpu/index.js同样在 src/webgpu/shaders/material.js 中实现了对应的高光/环境光/自发光材质 uniform 与着色逻辑保证了 p5.js 在新渲染后端上材质行为的一致性——这一点可以从源码结构推断得出说明该材质模型已成为 p5.js 渲染体系中的通用约定。四、项目产出清单本次 GSoC 2022 项目共合并两个主要 Pull Request产出说明PR #5789为 WebGL 模式下的rect()增加圆角属性支持对应 issue #5001PR #5774实现几何体的多材质支持ambient / specular / emissive 独立贡献光照五、总结本次项目围绕 p5.js WebGL 渲染管线完成了两项具有长期价值的改进一方面补齐了rect()圆角在 WebGL 模式下有参数无效果的功能缺口并通过保留模式/立即模式双路径兼顾了性能与正确性另一方面把材质系统从颜色覆盖升级为属性分离为 p5.js 的 WebGL 光照体系建立了更接近真实世界的光照响应模型。这两项工作共同降低了初学者在 WebGL 模式下的困惑也为后续材质贴图map_Ks / map_Ka 等纹理映射见 src/webgl/shaders/phong.frag与金属度等更进阶的渲染特性铺平了道路。若读者希望深入理解或参与后续改进例如报告提及的高 strokeWeight 描边伪影问题可直接从 src/webgl/3d_primitives.js 与 src/core/p5.Renderer3D.js 入手阅读实现。【免费下载链接】p5.jsp5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. Looking for p5.js 2.0? http://beta.p5js.org项目地址: https://gitcode.com/GitHub_Trending/p5/p5.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考