Repolode
提交项目
processing

processing/p5.js

p5.js 是一个免费开源的 JavaScript 库，用于在网页上进行创意编程、绘图与交互式图形创作。

在 GitHub 查看官网
Star
24,322
Fork
3,895
未关闭 Issue
530
最近提交
8小时前

这是什么？

p5.js 是一个用于创意编程的 JavaScript 库，让艺术家、设计师、教育工作者和初学者可以直接在浏览器中绘图、制作动画和构建交互式图形。它采用 setup() 和 draw() 的结构，几行代码就能快速上手，其设计理念基于 Processing 的核心原则。

库中提供了完整的绘图工具，支持音视觉、实验性和生成式作品的创作。网页本身也可以被视为一幅草图。项目提供了带可视化示例的参考文档、教程以及无需本地配置即可编码的 Web 编辑器，社区开发的扩展库还能增加更多功能。

p5.js 主要由志愿者在 Processing Foundation 的支持下维护，注重无障碍与包容性，并提供多种语言版本。

核心功能

  • 01采用简洁的 setup() 与 draw() 结构，便于快速编写草图。
  • 02提供完整的二维绘图工具，涵盖图形、文字和图像。
  • 03支持音视觉、交互式和生成式作品的创作。
  • 04提供丰富的参考文档、教程和可视化示例。
  • 05提供浏览器端 Web 编辑器，无需本地安装即可编码。
  • 06可通过社区开发的库进行功能扩展。

适用场景

  • 通过可视化反馈向学生讲授编程基础。
  • 为网页制作交互式艺术作品或生成式视觉效果。
  • 在浏览器中快速原型化交互设计与动画。
  • 结合 p5.sound 库创作随声音变化的可视化效果。

快速上手

  1. 1

    打开 p5.js 网页编辑器，无需安装即可开始编码

  2. 2

    按照 p5.js 官网的入门教程学习

使用前须知

  • 该项目主要由志愿者维护，问题的回复可能较慢。
  • 项目采用 LGPL-2.1 许可证，这是一种较弱的 copyleft 许可，使用前需要了解其条款。

收录于专题

开源教育与学习工具

标签

#creative-coding#graphics#javascript#education#generative-art#design#sound#art#html#learning

常见问题

p5.js 是什么？
p5.js 是一个免费开源的 JavaScript 库，用于在网页上进行创意编程、绘图与交互式图形创作。 p5.js 是一个用于创意编程的 JavaScript 库，让艺术家、设计师、教育工作者和初学者可以直接在浏览器中绘图、制作动画和构建交互式图形。它采用 setup() 和 draw() 的结构，几行代码就能快速上手，其设计理念基于 Processing 的核心原则。
p5.js 可以免费使用吗？用的什么许可证？
p5.js 以 LGPL-2.1 许可证开源。用于商业产品前，请先确认许可证条款。
p5.js 还在维护吗？
活跃维护中。p5.js 最近一次提交是在 2026年11月8日。
p5.js 适合用来做什么？
通过可视化反馈向学生讲授编程基础。 为网页制作交互式艺术作品或生成式视觉效果。 在浏览器中快速原型化交互设计与动画。 结合 p5.sound 库创作随声音变化的可视化效果。
p5.js 怎么安装和运行？
打开 p5.js 网页编辑器，无需安装即可开始编码 按照 p5.js 官网的入门教程学习
在哪里获取 p5.js？
源代码和安装说明在 GitHub 上：https://github.com/processing/p5.js

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目