1.什么是p5.js

最近接触到一门叫Interaction的数字媒体艺术课程，教p5.js

讲师是开发者之一.挺刺激的。

P5.js是为艺术家和设计师开发的Javascript库，可以看作是Processing的Web版。如果你有处理经验，p5.js会很快上手。

至于p5.js的使用，这个问题很难回答，因为我自己也是初学者。

目前我觉得p5.js是一个很好的激发创造力的工具，你可以把p5.js的内容嵌入到网页中，让你的网站更加耀眼。

第二，使用p5.js

P5.js在以下地址有一个在线代码编辑器：

http://alpha.editor.p5js.org/

在左边输入代码，点击“运行”按钮，在右边看到代码运行效果。

你可以注册一个p5.js账号，每次你的代码都可以保存在官网上，修改、测试或者显示都非常方便。

下图使用椭圆()函数绘制了一个圆：

第三，从p5.js开始

当您创建一个新的p5.js项目时，将生成以下代码：

函数setup() {//setup函数用于初始化，该函数在每次程序开始运行时执行一次。createCanvas(400，400)；//生成一个400x400 canvas}函数draw() {//draw函数，每秒运行60次，不断在canvas (220)上绘制图形背景；//绘制背景，颜色为RGB(220，220，220)} p5.js程序总是从setup()开始执行，执行一次setup()后，进入draw()函数的连续循环调用。

可以发现语法和JavaScript没有太大区别，但是有很多特殊的函数可以调用。

第四，画基本图形

在p5.js中，绘制图形很容易，有很多相关的功能：

函数setup() { createCanvas(400，400)；}函数draw(){ background(220)；椭圆(100，100，100，100)；//绘制椭圆(x，y，宽度，高度)三角形(150，150，150，200，200，200)；//绘制三角形(x1，y1，x2，y2，x3，y3)四边形(180，100，200，150，270，150，250，100)；//绘制四边形(x1，y1，x2，y2，x3，y3，x4，y4)矩形(30，20，50，50)；//绘制矩形(x，y，宽，高)线(0，0，100，100)；//绘制线段(x1，y1，x2，y2)起点到终点的圆弧(200，50，50，50，0，HALF _ PI)；//绘制圆弧(x，y，宽度，高度，起始角，终止角)}效果如下图所示：

当然，线条颜色和填充颜色可以替换，线条粗细也可以修改：

函数setup() { createCanvas(400，400)；}函数draw(){ background(220)；中风(255，128，128)；斯特洛克威特(5)；填充(255，200，0)；椭圆(100，100，100，100)；三角形(150，150，150，200，200，200)；noStroke()；填充(100，255，0)；四(180，100，200，150，270，150，250，100)；rect(30，20，50，50)；笔画(0)；行(0，0，100，100)；弧(200，50，50，50，0，HALF _ PI)；}效果如下图所示：

动词（verb的缩写）参考参考

P5.js提供了很多用于创作的函数，很多函数都有各种重载函数，这里不做解释。

P5.js官网提供了Reference，详细讲解了各个功能。您可以通过查找这些函数的用法来进一步学习p5.js。网址如下：

https://p5js.org/reference/

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。