p5.js 贡献者指南项目目录结构与从 Issue 到 Pull Request 的完整参与路径【免费下载链接】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 仓库contributor_docs/pt-br/README.md该项目贡献者文档的葡萄牙语版索引面向想要为 p5.js 贡献代码、文档或测试的开发者。文章将带你逐层拆解仓库目录结构、理解先 Issue 后 PR的协作流程并结合仓库内真实源码、测试与工具链说明内嵌文档JSDoc、单元测试、ES6 编码规范等配套交付物的写法。读完本文你将能独立完成一次从认领问题到提交合并的完整贡献闭环。一、先认识 p5.js 的贡献生态p5.js 是一个依赖大量志愿者协作的开源项目欢迎任何形式的参与——无论是修复一个文档错别字还是重构复杂的 3D 渲染功能。项目遵循 all-contributors 与 CONTRIBUTORS.md 正是这一机制的落地通过all-contributors机器人在 issue 或 PR 评论中发出类似all-contributors please add 你的GitHub用户名 for 贡献类型的指令即可将贡献者加入名单。进入正题之前建议先阅读 contributor_docs/README.md英文版总览与 AI_USAGE_POLICY.mdAI 使用政策前者给出了社区与无障碍access方向的优先级说明后者则是 p5.js 2.x 时代新增的协作约束新贡献者应通读全文。二、项目目录结构详解contributor_docs/pt-br/README.md的核心内容之一就是帮助新贡献者快速定位该改哪里。下面结合当前仓库的实际布局逐项说明注意原文档写作时的部分目录名与当前仓库存在差异下文以仓库现状为准并标注差异。目录作用当前仓库实际情况src/库的全部源码按主题拆分为独立模块是修改 p5.js 时的主要工作区存在见 src/lib/面向用户的最终版本 p5.js压缩与非压缩两种形态是源码模块编译打包后的产物存在见 lib/含 lib/addons/p5.sound.js 等附加库contributor_docs/面向 p5.js 开发者的各类 Markdown 文档解释工程实践与设计原则存在即本指南所在的目录docs/并不存放文档正文而是存放用于生成在线参考手册的代码与数据存在见 docs/含 docs/converted.json、docs/parameterData.jsontests/单元测试确保库在改动后依旧正常工作当前仓库实际目录名为test/单数见 test/tasks/与构建、部署、发布新版本相关的自动化脚本当前仓库未保留该目录构建逻辑已迁移到 rolldown.config.js 与 package.json 的scripts中patches/偶尔存放 Git 补丁绝大多数情况下可忽略当前仓库快照中不存在该目录需要特别说明两点差异其一原文档称源码由 Grunt 编译为单一文件而当前仓库版本 2.3.1已切换到现代工具链——构建命令为npm run build底层使用 rolldown见 package.json 中build: rolldown -c产物仍输出到lib/目录其二测试运行器已从 Mocha 迁移到 Vitesttest: vitest这一点在第三节会展开。2.1src/按主题拆分的模块化源码从 src/ 的目录结构可以清晰看到 p5.js 的模块划分这些模块名同时也是贡献者文档中 Area 标签、单元测试目录的命名依据accessibility/无障碍输出describe、textOutput 等color/颜色创建、读取与色彩空间转换core/核心运行时如 src/core/main.js、src/core/rendering.js、src/core/p5.Renderer2D.jsdata/、dom/、events/、image/、io/、math/、shape/、type/、utilities/数据、DOM、事件、图像、输入输出、数学、图形、排版与工具函数webgl/、webgpu/3D 渲染相关渲染器、着色器、几何体strands/新一代的代码转换/内联编译子系统strands transpiler 相关实现friendly_errors/友好报错系统FES的实现。如果你已经知道要改动哪个功能最直接的入口是 p5.js 在线参考手册中每个功能页底部的源码链接在仓库内则可以直接进入对应模块目录定位实现文件。三、如何贡献从 Issue 到 Pull Request 的标准流程p5.js 对贡献流程有明确要求所有已知 bug 与计划中的新功能都通过 GitHub issue 追踪。原文档以及英文版 contributor_guidelines.md给出了如下完整链路提交 Issue → 讨论 → 获得批准可开始实现→ 修改代码 → 提交 PR → 讨论 → 批准并合并3.1 用 Issue 标签体系组织工作issue 使用标签进行分类例如标记适合初学者的标签。完整的标签体系记录在 contributor_docs/archive/issue_labels.md 中每个 issue 至少应带有两个标签一个表示状态一个表示影响区域。状态类标签标签用途Announcementp5.js 负责人/维护者的公告Bug缺陷报告Dependencies依赖相关问题Discussion已知问题所在但解决方案需要社区输入Enhancement对现有代码库的改进Feature Request对代码库的新增功能Help Wanted不确定如何修复向贡献者寻求帮助Known Issue已知问题Good First Issue推荐给首次贡献者的问题More Info Needed需要更多信息以说明问题Please Help Label不确定应添加哪个标签区域类标签与src/目录结构一一对应包括 Area:Accessibility、Area:Color、Area:Core、Area:Data、Area:DOM、Area:Events、Area:Image、Area:IO、Area:Math、Area:Typography、Area:Utilities、Area:WebGL此外还有与维护者分工相关的 Build Process、Unit Testing、Internalization、Friendly Errors、Documentation 等标签。3.2 认领 Issue 的礼仪如果想着手解决某个现存 issue请先在 issue 下评论说明你计划处理它让其他贡献者知晓该问题已有人认领并便于互相帮助。同时注意以下协作约定见 contributor_guidelines.md不要插队若某 issue 已有人声明要提交或已被分配抢先提交的 PR 会被关闭建议一次只认领一个 issue、一次只提交一个 PR减少重复劳动、提升志愿者审阅效率若发现已分配 issue 长时间无进展可礼貌评论询问进展并主动提供帮助。3.3 提交 Pull Requestresolves 与 addresses完成 issue 对应的工作后向 p5.js 的 main 分支提交 PR。PR 描述中必须包含resolves #XXXX来关联你修复的 issue如果该 PR 解决了问题但没有完全关闭例如后续还有独立 PR 继续处理则改为写addresses #XXXX。二者的语义区别如下resolves #1234PR 合并后该 issue 自动关闭addresses #1234PR 合并后 issue 保持开启等待后续变更。更完整的 PR 填写规范标题、Changes 描述、截图、PR Checklist、rebase 解决冲突可以参考 contributor_guidelines.md 的 Pull requests 章节。原文特别提醒不要在没有对应 issue、或 issue 尚未被批准实现的情况下直接提交 PR——因为建议的修复可能不被接受、需要完全不同的方案或真正的问题根本在别处。未被批准的 PR 会被关闭直到 issue 获得批准。3.4 发现新问题先提交 Issue 而非直接修如果你发现了 bug 或想添加新功能正确做法是先提交 issueBug 报告、功能增强、新功能请求、讨论四类模板见 contributor_guidelines.md。请勿在没有先建立 issue 的情况下直接提交包含修复或新功能的 PR这类 PR 大概率无法被接受。收到 issue 反馈并推进解决后再走上述流程提交修复。对于 bug 报告应提供尽可能详细的复现信息p5.js 版本号、浏览器及版本、操作系统、复现步骤、期望行为与实际行为想顺手修复的话也可以在描述中注明并给出修复思路。四、代码之外贡献的配套交付物原文档强调除了代码本身一次完整贡献往往还需要提供以下配套内容。4.1 内嵌文档JSDoc 参考注释以内嵌代码注释的形式编写参考文档解释代码行为服务于开发者与用户。多数注释需符合 JSDoc该文件即原文档所链接的内嵌文档指南在当前仓库中的对应物原文档指向的inline_documentation.md已不存在。参考注释的典型形态如下以circle函数为例/** * Draws a circle. * * A much longer description normally goes here * * method circle * param {Number} x x-coordinate of centre. * param {Number} y y-coordinate of centre. * param {Number} diameter Diameter of circle. * * example * function setup() { * createCanvas(100, 100); * //Draw circle at (50, 0) with diameter 70. * circle(50, 0, 70); * } */这类注释块以/**开头、*/结尾紧跟实际函数定义仓库源码 src/shape/2d_primitives.js 等文件中遍布此类注释。生成参考文档的命令见 package.jsonnpm run docs先经 documentation 工具解析源码注释再由 utils/convert.mjs 转换输出。4.2 单元测试单元测试是大型代码库保持低缺陷率的关键手段它们是一小段独立于库的代码用于校验组件行为是否正确并防止改动引入回归。每当你实现新函数、为既有函数添加新功能、或改变函数行为时都应同步实现相关单元测试。p5.js 的单元测试位于 test/unit/其子目录与 src/ 子目录一一对应accessibility、color、core、data、dom、events、image、io、math、type、utilities、webgl、webgpu、visual 等每个公开函数都应有对应的测试。详细的测试编写指南见 contributor_docs/unit_testing.md其要点如下测试框架p5.js 2.x 使用 Vitest 作为运行器提供 Mocha 兼容的suite、test、setup、teardown全局函数断言层使用 Vitest 内置打包的 Chai可这样引入import { assert, expect } from vitest;编写套路先理解被测单元的期望行为例如p5.prototype.keyIsPressed有键按下为true无键按下为false再为每种行为写一个test。每个suite对应一个被测单元结构如下suite(p5.prototype.keyIsPressed, function () { test(keyIsPressed is a boolean, function () { //write test here }); test(keyIsPressed is true on key press, function () { //write test here }); test(keyIsPressed is false when no keys are pressed, function () { //write test here }); });实例模式访问测试文件顶部通常通过setup创建一个实例模式 sketch 并赋值给myp5后续即可用myp5.xxx访问任意 p5.js 变量与函数let myp5; setup(function (done) { new p5(function (p) { p.setup function () { myp5 p; done(); }; }); });断言示例assert.isBoolean(myp5.keyIsPressed)即用 Chai 的assert.isBoolean()校验值的类型。新增测试文件测试文件与源码文件路径对应如 src/color/p5.Color.js 的测试在 test/unit/color/p5.Color.js新增源码模块后可复制既有测试文件改名保留 setup/teardown删除旧测试代码同时在 test/unit/spec.js 的spec对象中注册新模块确保测试加载所需模块。约定每个函数/变量一个suite每个test自包含、不依赖其他模块测试代码尽量精简、一次只测一件事优先使用 Chaiassert而非expect。可用suite.skip(...)跳过、suite.only(...)只运行特定套件。运行测试npm test对应 package.json 中的vitestVitest 会启动浏览器窗口渲染并执行全部单元与可视化测试npm run build则只构建不测试。p5.js 2.x 的可视化测试test/unit/visual/cases下的用例使用像素比对 聚类识别算法MIN_CLUSTER_SIZE 4、MAX_TOTAL_DIFF_PIXELS 40超过 80% 邻域像素 ≤2 的聚类判为线条偏移以容忍不同操作系统与浏览器间的抗锯齿、字体渲染差异详见 contributor_docs/unit_testing.md。4.3 示例Examplesp5.js 网站内置了大量示例贡献者也可以提交新示例。仓库中的可运行示例散落在 test/manual-test-examples/按功能分类的本地手动测试页与 preview/基于 Vite 的预览工程运行npm run dev即可本地体验中示例的编写与提交要求可参考官方贡献文档中关于示例的部分。五、ES6 编码规范原文档专门用一节介绍了 ES6ECMAScript 2015采纳情况。p5.js 已迁移到 ES6 以降低代码库复杂度、提升可读性详细说明见 contributor_docs/archive/es6-adoption.md。它鼓励贡献者在提交与 PR 中遵循 ES6 标准前提是所用特性满足降低语法歧义、提升可读性与清晰度、不混淆不过度抽象、利于新手养成正确习惯、便于贡献与开发、不以牺牲性能为代价。核心编码指引来自 es6-adoption.md 的 Coding Guidelines 章节用 ES6import/export取代require/module.exports特例构建系统限制下src/app.js 仍使用module.exports p5;一律优先使用const仅在需要重新赋值时才改用let原型方法使用函数声明而非箭头函数正确p5.prototype.myMethod function() { }错误p5.prototype.myMethod () { }需要.bind(this)的原型方法应转换为箭头函数正确p5.prototype.myMethod () { }错误p5.prototype.myMethod function() {...}.bind(this);常量保持旧式引用格式如constants.TWO_PI。文档还特别强调了性能优先于完全的 ES6 合规当年许多 ES6 特性伴随性能开销尤其在被转译为 ES5 后可能产生额外代价因此当语法改动不能带来与社区目标一致的明显改善时应优先保证性能历史上forEach的取舍即为一例讨论。构建时 p5.js 面向 browserslist 的last 2 versions与not dead规则并通过转译保证对旧浏览器与移动设备的兼容性当前仓库的构建产物形态lib/p5.min.js、lib/p5.webgpu.js等 ESM/UMD 多形态可在 package.json 的files字段中确认。六、文档之外的其他贡献方式除了写代码p5.js 社区随时需要以下帮助原文档Outras Ideias一节文档编写、教程制作、工作坊授课、教育材料开发、品牌与设计等。如果你有未被上述途径覆盖的贡献想法可以通过邮件联系项目组。此外仓库内的 contributor_docs/ 还提供了丰富的进阶资料例如无障碍contributor_docs/web_accessibility.md、友好报错系统contributor_docs/friendly_error_system.md、WebGL 贡献指南contributor_docs/webgl_contribution_guide.md、发布流程contributor_docs/release_process.md等可按需查阅。七、贡献流程速查清单最后把原文档与仓库资料整合成一份可对照执行的清单通读 contributor_docs/README.md 与 contributor_docs/contributor_guidelines.md熟悉社区规范在 GitHub Issues 中查找Good First Issue标签或与你能力匹配的 issue评论认领按需补齐配套交付物JSDoc 参考注释contributing_to_the_p5js_reference.md、单元测试unit_testing.md与示例本地执行npm ci安装依赖、npm test运行测试、npm run build构建产物确保无回归对应 package.json从 main 分支创建描述性分支名git checkout -b branch_name小步高频提交git commit -m 描述性信息推送分支并创建 PR在描述中写入resolves #XXXX或addresses #XXXX填写模板各项关注审阅意见必要时 rebase 解决冲突等待 steward/维护者批准合并。整个过程没有硬性时间限制社区把贡献视为一次学习机会——遇到困难随时在 issue 中求助steward 与维护者会尽力引导你完成第一次合并。【免费下载链接】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 贡献者指南：项目目录结构与从 Issue 到 Pull Request 的完整参与路径
p5.js 贡献者指南项目目录结构与从 Issue 到 Pull Request 的完整参与路径【免费下载链接】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 仓库contributor_docs/pt-br/README.md该项目贡献者文档的葡萄牙语版索引面向想要为 p5.js 贡献代码、文档或测试的开发者。文章将带你逐层拆解仓库目录结构、理解先 Issue 后 PR的协作流程并结合仓库内真实源码、测试与工具链说明内嵌文档JSDoc、单元测试、ES6 编码规范等配套交付物的写法。读完本文你将能独立完成一次从认领问题到提交合并的完整贡献闭环。一、先认识 p5.js 的贡献生态p5.js 是一个依赖大量志愿者协作的开源项目欢迎任何形式的参与——无论是修复一个文档错别字还是重构复杂的 3D 渲染功能。项目遵循 all-contributors 与 CONTRIBUTORS.md 正是这一机制的落地通过all-contributors机器人在 issue 或 PR 评论中发出类似all-contributors please add 你的GitHub用户名 for 贡献类型的指令即可将贡献者加入名单。进入正题之前建议先阅读 contributor_docs/README.md英文版总览与 AI_USAGE_POLICY.mdAI 使用政策前者给出了社区与无障碍access方向的优先级说明后者则是 p5.js 2.x 时代新增的协作约束新贡献者应通读全文。二、项目目录结构详解contributor_docs/pt-br/README.md的核心内容之一就是帮助新贡献者快速定位该改哪里。下面结合当前仓库的实际布局逐项说明注意原文档写作时的部分目录名与当前仓库存在差异下文以仓库现状为准并标注差异。目录作用当前仓库实际情况src/库的全部源码按主题拆分为独立模块是修改 p5.js 时的主要工作区存在见 src/lib/面向用户的最终版本 p5.js压缩与非压缩两种形态是源码模块编译打包后的产物存在见 lib/含 lib/addons/p5.sound.js 等附加库contributor_docs/面向 p5.js 开发者的各类 Markdown 文档解释工程实践与设计原则存在即本指南所在的目录docs/并不存放文档正文而是存放用于生成在线参考手册的代码与数据存在见 docs/含 docs/converted.json、docs/parameterData.jsontests/单元测试确保库在改动后依旧正常工作当前仓库实际目录名为test/单数见 test/tasks/与构建、部署、发布新版本相关的自动化脚本当前仓库未保留该目录构建逻辑已迁移到 rolldown.config.js 与 package.json 的scripts中patches/偶尔存放 Git 补丁绝大多数情况下可忽略当前仓库快照中不存在该目录需要特别说明两点差异其一原文档称源码由 Grunt 编译为单一文件而当前仓库版本 2.3.1已切换到现代工具链——构建命令为npm run build底层使用 rolldown见 package.json 中build: rolldown -c产物仍输出到lib/目录其二测试运行器已从 Mocha 迁移到 Vitesttest: vitest这一点在第三节会展开。2.1src/按主题拆分的模块化源码从 src/ 的目录结构可以清晰看到 p5.js 的模块划分这些模块名同时也是贡献者文档中 Area 标签、单元测试目录的命名依据accessibility/无障碍输出describe、textOutput 等color/颜色创建、读取与色彩空间转换core/核心运行时如 src/core/main.js、src/core/rendering.js、src/core/p5.Renderer2D.jsdata/、dom/、events/、image/、io/、math/、shape/、type/、utilities/数据、DOM、事件、图像、输入输出、数学、图形、排版与工具函数webgl/、webgpu/3D 渲染相关渲染器、着色器、几何体strands/新一代的代码转换/内联编译子系统strands transpiler 相关实现friendly_errors/友好报错系统FES的实现。如果你已经知道要改动哪个功能最直接的入口是 p5.js 在线参考手册中每个功能页底部的源码链接在仓库内则可以直接进入对应模块目录定位实现文件。三、如何贡献从 Issue 到 Pull Request 的标准流程p5.js 对贡献流程有明确要求所有已知 bug 与计划中的新功能都通过 GitHub issue 追踪。原文档以及英文版 contributor_guidelines.md给出了如下完整链路提交 Issue → 讨论 → 获得批准可开始实现→ 修改代码 → 提交 PR → 讨论 → 批准并合并3.1 用 Issue 标签体系组织工作issue 使用标签进行分类例如标记适合初学者的标签。完整的标签体系记录在 contributor_docs/archive/issue_labels.md 中每个 issue 至少应带有两个标签一个表示状态一个表示影响区域。状态类标签标签用途Announcementp5.js 负责人/维护者的公告Bug缺陷报告Dependencies依赖相关问题Discussion已知问题所在但解决方案需要社区输入Enhancement对现有代码库的改进Feature Request对代码库的新增功能Help Wanted不确定如何修复向贡献者寻求帮助Known Issue已知问题Good First Issue推荐给首次贡献者的问题More Info Needed需要更多信息以说明问题Please Help Label不确定应添加哪个标签区域类标签与src/目录结构一一对应包括 Area:Accessibility、Area:Color、Area:Core、Area:Data、Area:DOM、Area:Events、Area:Image、Area:IO、Area:Math、Area:Typography、Area:Utilities、Area:WebGL此外还有与维护者分工相关的 Build Process、Unit Testing、Internalization、Friendly Errors、Documentation 等标签。3.2 认领 Issue 的礼仪如果想着手解决某个现存 issue请先在 issue 下评论说明你计划处理它让其他贡献者知晓该问题已有人认领并便于互相帮助。同时注意以下协作约定见 contributor_guidelines.md不要插队若某 issue 已有人声明要提交或已被分配抢先提交的 PR 会被关闭建议一次只认领一个 issue、一次只提交一个 PR减少重复劳动、提升志愿者审阅效率若发现已分配 issue 长时间无进展可礼貌评论询问进展并主动提供帮助。3.3 提交 Pull Requestresolves 与 addresses完成 issue 对应的工作后向 p5.js 的 main 分支提交 PR。PR 描述中必须包含resolves #XXXX来关联你修复的 issue如果该 PR 解决了问题但没有完全关闭例如后续还有独立 PR 继续处理则改为写addresses #XXXX。二者的语义区别如下resolves #1234PR 合并后该 issue 自动关闭addresses #1234PR 合并后 issue 保持开启等待后续变更。更完整的 PR 填写规范标题、Changes 描述、截图、PR Checklist、rebase 解决冲突可以参考 contributor_guidelines.md 的 Pull requests 章节。原文特别提醒不要在没有对应 issue、或 issue 尚未被批准实现的情况下直接提交 PR——因为建议的修复可能不被接受、需要完全不同的方案或真正的问题根本在别处。未被批准的 PR 会被关闭直到 issue 获得批准。3.4 发现新问题先提交 Issue 而非直接修如果你发现了 bug 或想添加新功能正确做法是先提交 issueBug 报告、功能增强、新功能请求、讨论四类模板见 contributor_guidelines.md。请勿在没有先建立 issue 的情况下直接提交包含修复或新功能的 PR这类 PR 大概率无法被接受。收到 issue 反馈并推进解决后再走上述流程提交修复。对于 bug 报告应提供尽可能详细的复现信息p5.js 版本号、浏览器及版本、操作系统、复现步骤、期望行为与实际行为想顺手修复的话也可以在描述中注明并给出修复思路。四、代码之外贡献的配套交付物原文档强调除了代码本身一次完整贡献往往还需要提供以下配套内容。4.1 内嵌文档JSDoc 参考注释以内嵌代码注释的形式编写参考文档解释代码行为服务于开发者与用户。多数注释需符合 JSDoc该文件即原文档所链接的内嵌文档指南在当前仓库中的对应物原文档指向的inline_documentation.md已不存在。参考注释的典型形态如下以circle函数为例/** * Draws a circle. * * A much longer description normally goes here * * method circle * param {Number} x x-coordinate of centre. * param {Number} y y-coordinate of centre. * param {Number} diameter Diameter of circle. * * example * function setup() { * createCanvas(100, 100); * //Draw circle at (50, 0) with diameter 70. * circle(50, 0, 70); * } */这类注释块以/**开头、*/结尾紧跟实际函数定义仓库源码 src/shape/2d_primitives.js 等文件中遍布此类注释。生成参考文档的命令见 package.jsonnpm run docs先经 documentation 工具解析源码注释再由 utils/convert.mjs 转换输出。4.2 单元测试单元测试是大型代码库保持低缺陷率的关键手段它们是一小段独立于库的代码用于校验组件行为是否正确并防止改动引入回归。每当你实现新函数、为既有函数添加新功能、或改变函数行为时都应同步实现相关单元测试。p5.js 的单元测试位于 test/unit/其子目录与 src/ 子目录一一对应accessibility、color、core、data、dom、events、image、io、math、type、utilities、webgl、webgpu、visual 等每个公开函数都应有对应的测试。详细的测试编写指南见 contributor_docs/unit_testing.md其要点如下测试框架p5.js 2.x 使用 Vitest 作为运行器提供 Mocha 兼容的suite、test、setup、teardown全局函数断言层使用 Vitest 内置打包的 Chai可这样引入import { assert, expect } from vitest;编写套路先理解被测单元的期望行为例如p5.prototype.keyIsPressed有键按下为true无键按下为false再为每种行为写一个test。每个suite对应一个被测单元结构如下suite(p5.prototype.keyIsPressed, function () { test(keyIsPressed is a boolean, function () { //write test here }); test(keyIsPressed is true on key press, function () { //write test here }); test(keyIsPressed is false when no keys are pressed, function () { //write test here }); });实例模式访问测试文件顶部通常通过setup创建一个实例模式 sketch 并赋值给myp5后续即可用myp5.xxx访问任意 p5.js 变量与函数let myp5; setup(function (done) { new p5(function (p) { p.setup function () { myp5 p; done(); }; }); });断言示例assert.isBoolean(myp5.keyIsPressed)即用 Chai 的assert.isBoolean()校验值的类型。新增测试文件测试文件与源码文件路径对应如 src/color/p5.Color.js 的测试在 test/unit/color/p5.Color.js新增源码模块后可复制既有测试文件改名保留 setup/teardown删除旧测试代码同时在 test/unit/spec.js 的spec对象中注册新模块确保测试加载所需模块。约定每个函数/变量一个suite每个test自包含、不依赖其他模块测试代码尽量精简、一次只测一件事优先使用 Chaiassert而非expect。可用suite.skip(...)跳过、suite.only(...)只运行特定套件。运行测试npm test对应 package.json 中的vitestVitest 会启动浏览器窗口渲染并执行全部单元与可视化测试npm run build则只构建不测试。p5.js 2.x 的可视化测试test/unit/visual/cases下的用例使用像素比对 聚类识别算法MIN_CLUSTER_SIZE 4、MAX_TOTAL_DIFF_PIXELS 40超过 80% 邻域像素 ≤2 的聚类判为线条偏移以容忍不同操作系统与浏览器间的抗锯齿、字体渲染差异详见 contributor_docs/unit_testing.md。4.3 示例Examplesp5.js 网站内置了大量示例贡献者也可以提交新示例。仓库中的可运行示例散落在 test/manual-test-examples/按功能分类的本地手动测试页与 preview/基于 Vite 的预览工程运行npm run dev即可本地体验中示例的编写与提交要求可参考官方贡献文档中关于示例的部分。五、ES6 编码规范原文档专门用一节介绍了 ES6ECMAScript 2015采纳情况。p5.js 已迁移到 ES6 以降低代码库复杂度、提升可读性详细说明见 contributor_docs/archive/es6-adoption.md。它鼓励贡献者在提交与 PR 中遵循 ES6 标准前提是所用特性满足降低语法歧义、提升可读性与清晰度、不混淆不过度抽象、利于新手养成正确习惯、便于贡献与开发、不以牺牲性能为代价。核心编码指引来自 es6-adoption.md 的 Coding Guidelines 章节用 ES6import/export取代require/module.exports特例构建系统限制下src/app.js 仍使用module.exports p5;一律优先使用const仅在需要重新赋值时才改用let原型方法使用函数声明而非箭头函数正确p5.prototype.myMethod function() { }错误p5.prototype.myMethod () { }需要.bind(this)的原型方法应转换为箭头函数正确p5.prototype.myMethod () { }错误p5.prototype.myMethod function() {...}.bind(this);常量保持旧式引用格式如constants.TWO_PI。文档还特别强调了性能优先于完全的 ES6 合规当年许多 ES6 特性伴随性能开销尤其在被转译为 ES5 后可能产生额外代价因此当语法改动不能带来与社区目标一致的明显改善时应优先保证性能历史上forEach的取舍即为一例讨论。构建时 p5.js 面向 browserslist 的last 2 versions与not dead规则并通过转译保证对旧浏览器与移动设备的兼容性当前仓库的构建产物形态lib/p5.min.js、lib/p5.webgpu.js等 ESM/UMD 多形态可在 package.json 的files字段中确认。六、文档之外的其他贡献方式除了写代码p5.js 社区随时需要以下帮助原文档Outras Ideias一节文档编写、教程制作、工作坊授课、教育材料开发、品牌与设计等。如果你有未被上述途径覆盖的贡献想法可以通过邮件联系项目组。此外仓库内的 contributor_docs/ 还提供了丰富的进阶资料例如无障碍contributor_docs/web_accessibility.md、友好报错系统contributor_docs/friendly_error_system.md、WebGL 贡献指南contributor_docs/webgl_contribution_guide.md、发布流程contributor_docs/release_process.md等可按需查阅。七、贡献流程速查清单最后把原文档与仓库资料整合成一份可对照执行的清单通读 contributor_docs/README.md 与 contributor_docs/contributor_guidelines.md熟悉社区规范在 GitHub Issues 中查找Good First Issue标签或与你能力匹配的 issue评论认领按需补齐配套交付物JSDoc 参考注释contributing_to_the_p5js_reference.md、单元测试unit_testing.md与示例本地执行npm ci安装依赖、npm test运行测试、npm run build构建产物确保无回归对应 package.json从 main 分支创建描述性分支名git checkout -b branch_name小步高频提交git commit -m 描述性信息推送分支并创建 PR在描述中写入resolves #XXXX或addresses #XXXX填写模板各项关注审阅意见必要时 rebase 解决冲突等待 steward/维护者批准合并。整个过程没有硬性时间限制社区把贡献视为一次学习机会——遇到困难随时在 issue 中求助steward 与维护者会尽力引导你完成第一次合并。【免费下载链接】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），仅供参考