p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件如文字、输入框、视屏、摄像头及音频。由于p5.js官网是外网，让很多人望而却步（需要搭梯子），因此我们就把p5.js的功能就和我们平台（乐述云享）做了深度结合，让更多人能够体验到简单编程的快乐。除此之外呢在官网上你还要搭建环境建一些这样那样的库，超级麻烦，当然对于精通JavaScript的大佬另说，而对于从事艺术、设计等工作的工友来说上手是有点难度的。因此呢在我们平台上就省去了这样那样的麻烦，直接就能上手p5.js。话不多说直接上教程，30s入门p5.js。首先，请先创建一篇新的轻文档，并且使用代码块（Shift + Ctrl + K）快速插入一个p5js组件。

这便是你的第一个绘图作品，来容我给你做一下解释：

凡是以function作为关键词开头，并在名称后面有一对小括号的都叫做函数：setup称为启动函数，仅运行一次，而draw被称为绘图函数，以60帧/秒的速度循环执行。createCanvas(w, h) 是用于创建画布的函数，其中 w 为宽度，h 为高度，你可以调整一下刚才的案例，重新再执行一次看看有什么变化。background(r, g, b) 是用于设置画布背景色的函数，如果rgb三个参数的值不变，可以只写一个数字。使用第一个图形工具：椭圆

在刚才的绘图函数中，新增一个椭圆函数。

编程起步中最困难的事情之一是需要非常准确地使用语法。 浏览器并不总能聪明地知道你的意思，并且可能对标点的位置非常挑剔。 通过一些练习，你会逐渐习惯。如果你需要查看编写的代码是否有错误，可以通过开发者工具的控制台区域查看。

尝试进阶一下：鼠标按下事件一些p5.js艺术作品欣赏：

关注我带你入门p5.js