p5.js入门教程

数组是将类型相同的元素聚集在一起的一种数据类型，通过位置索引来查找相应的元素。第一个元素的索引标号为0，第二个元素是1，依此类推。 p5js 开源社区 - 乐述云享 (aleshu.com)

p5js是一门弱数据类型语言，因此不需要再声明变量的时候就立马确定其数据类型究竟是整数还是浮点数（小数）。 p5js 开源社区 - 乐述云享 (aleshu.com)

变量是有作用于范围的，我们可以以{}作为辨识方法，在{}内部定义的变量叫做局部变量，在{}外部定义的变量叫全局变量。 不同{}内的同名局部变量，其值是互不影响的。 但在{}内，却可以直接使用全局变量，

true和false是两个布尔类型的常量，其不能用在赋值语句的左边，通常会被用于控制语句的条件判断。 p5js 开源社区 - 乐述云享 (aleshu.com)

变量是用于存储数值的容器，主打一个可以修改数值。 p5js 开源社区 - 乐述云享 (aleshu.com)

WebGL是一种基于OpenGL的3D绘图标准，它可以让你在浏览器中使用JavaScript API来呈现交互式3D和2D图形。在本示例中，我们将探索如何使用WebGL来创建3D形状。 p5js 开源

bezier()函数是一个用于在屏幕上绘制三次贝塞尔曲线的函数。 这些曲线是由一系列锚点和控制点所定义的。前两个参数定义第一个锚点而最后两个参数定义另一个锚点，这也是曲线的第一和最后一个点。中间的参数

本示例将继续使用beginShape()函数来绘制复杂图形：星星。 添加图片注释，不超过 140 字（可选） p5js 开源社区 - 乐述云享 (aleshu.com)

beginShape()函数能够绘制出更复杂的形状，需要注意的是，当定义完成形状后，需要调用endShape()函数结束绘制。 vertex()函数是beginShape()中专门用于指定顶点的函数。

基础图形中的圆弧函数arc()在适当的应用下，可以帮助大家画出常见的饼状图，一起来看看把。 添加图片注释，不超过 140 字（可选）

三角形：triangle(x1, y1, x2, y2, x3, y3) 点1坐标：(x1, y1)，点2坐标：(x2, y2)，点3坐标：(x3, y3) 矩形：rect(x, y, w, h, t

点：point(p1, p2); 其中p1, p2分别表示点的坐标； 线：line(x1, y1, x2, y2); 其中x1, y1表示起始点的坐标、x2, y2表示结束点的坐标； p5js 开源社

此函数可以帮助你创建并返回一个新的p5.Renderer对象。 p5js 开源社区 - 乐述云享 (aleshu.com)

递归是一种函数的使用方法，其是指在函数内部存在调用自身的情况。 但是需要注意的是，该调用一定得有一个终止条件，否则会成为死循环。 添加图片注释，不超过 140 字（可选） p5js 开源社区 - 乐述

function是定义函数的关键词，以下示例我们定义了一个drawTarget函数，只需要在draw函数中调用该函数，就可以实现相应图形的绘制。 可以减少重复代码的编写，提高编程效率与程序运行效率。

redraw()函数可以使draw()函数执行一次。// 程序开始时，setup() 函数中的语句执行一次。 function setup() { createCanvas(720, 400);

noLoop()函数会使draw()函数只执行一次。let y = 100; // 程序开始时，setup() 函数中的语句执行一次。 function setup() { // 创建 720 *

setup函数为启动函数，只执行一次。 draw函数为绘图函数，会一直循环执行指导程序停止，速度：60帧/秒。 p5js 开源社区 - 乐述云享 (aleshu.com)

宽度：width 高度：height 这两个参数可以自动获取画布大小。 可以注意到，height与width并没有在程序中被定义过，但是其可以自动获取到画布大小。

绘制在画布上的所有形状都需要指定一个坐标位置，单位：像素，数值：相对于原点的距离。 原点[0, 0]在乐述云享中并不是窗口左上角，而是文本显示位置的左上角。 接下来让我们看一个案例：