JavaScript的p5.js库使用介绍
简要说明
p5.js 是一个基于 JavaScript 的库，它的核心目标是 "让写代码像画画一样简单"。p5.js 是 Processing 的 JavaScript 版本，继承了 Processing 的易用性和哲学，但可以在浏览器中直接运行。
p5.js支持2D/3D图形、声音、视频、DOM 操作、WebGL 渲染，甚至可以通过扩展库连接硬件（如 Arduino）或处理数据。
p5.js 的官网有非常完善的中文文档，参见下图：
官方示例：
下面简要介绍如何使用。
它两个最重要的函数（Function），通过 setup() 和 draw() 函数就能快速创建动画和交互。
丰富的功能。
setup()这个函数用于准备工作。
draw()这个函数会无限循环运行（默认每秒 60 次），就像动画片的每一帧。
【p5.js 的坐标系
在默认状态下（2D 模式），p5.js 的坐标系与原生 HTML5 Canvas 的坐标系在原点位置、轴的方向以及旋转方向上是完全一样的。
• X 轴： 向右增加（和数学一样）。
• Y 轴： 向下增加（和数学相反！）。
这意味着：Y 越大，物体越靠下。
在 p5.js 支持3D 模式，若开启了 3D 模式：
createCanvas(400, 400, WEBGL);
3D 模式下，p5.js 的原点 (0,0,0) 在画布的最中心（而不是左上角），x轴右+左-，y轴下+上-，z轴后+前- 。】
最简单的本地开发环境创建一个html文件，下面先给出单文件实验的主体结构------这种单文件方案比较方便，新建一个文本文件，命名例如为：测试.html，用浏览器运行之即可。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
// 在这里写你的p5.js代码
</script>
</body>
</html>
示例
下面给出2个示例：一个 2D、一个3D 的例子，为便于学习尽量有趣而简短。
一个2D 交互例子：紧盯鼠标的眼睛，无论你的鼠标移到哪里，这两个眼球都会转过去盯着看；如果你点击鼠标，它会吓得"眨眼"。
效果图：
源码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>紧盯鼠标的眼睛</title>
<!-- 引入p5.js官方库（必须，否则代码无法运行） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<p>紧盯鼠标的眼睛，无论你的鼠标移到哪里，这两个眼球都会转过去盯着看；</p>
<p>如果你点击鼠标，它会吓得"眨眼"。</p>
<script>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(255, 200, 200); // 粉色背景
// 画两只眼睛
drawEye(120, 200);
drawEye(280, 200);
}
function drawEye(x, y) {
push(); // 1. 保存当前坐标系状态
translate(x, y); // 2. 把原点移到眼睛中心
// 交互：如果鼠标按下，就闭眼（画一条线）
if (mouseIsPressed) {
stroke(0);
strokeWeight(10);
line(-50, 0, 50, 0);
} else {
// 正常睁眼
noStroke();
// 画眼白
fill(255);
ellipse(0, 0, 120, 120);
// 核心数学：计算鼠标相对于眼睛中心的角度
// atan2(y, x) 是计算角度的神器
let angle = atan2(mouseY - y, mouseX - x);
// 旋转画布，让"正前方"对准鼠标
rotate(angle);
// 画瞳孔 (因为旋转了，所以只要往 X 轴正方向画，就一定是指向鼠标的)
fill(0);
ellipse(30, 0, 40, 40); // 30是瞳孔偏离中心的距离
// 画个高光，更有神
fill(255);
ellipse(40, -10, 10, 10);
}
pop(); // 3. 恢复坐标系，准备画下一只眼睛
}
</script>
<body>
</html>3D **螺旋的例子：**这是一个由方块组成的3D螺旋，你可以移动鼠标来改变观看的角度和旋转速度。
效果图：
源码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D螺旋</title>
<!-- 引入p5.js官方库（必须，否则代码无法运行） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<p>这是一个由方块组成的3D螺旋，你可以移动鼠标来改变观看的角度和旋转速度。</p>
<script>
function setup() {
// 1. 开启 3D (WebGL) 模式
createCanvas(400, 400, WEBGL);
}
function draw() {
// 3D 模式下背景最好是深色
background(30);
// 2. 交互：让整个场景随鼠标旋转
// map 把鼠标坐标映射到旋转角度
rotateY(map(mouseX, 0, width, 0, TWO_PI));
rotateX(map(mouseY, 0, height, 0, TWO_PI));
// 3. 材质：使用法线材质 (自动赋予漂亮的彩虹色)
normalMaterial();
// 或者试试发光材质：
// ambientLight(50); directionalLight(255,0,0, 0, 0, -1);
// 4. 循环生成螺旋方块
for (let i = 0; i < 20; i++) {
push();
// 每一层方块的动态旋转
// frameCount 让它动起来，i 让每一层有时间差 (波浪效果)
rotateY(frameCount * 0.02 + i * 0.2);
// 或是把它们稍微推开一点，形成螺旋半径
translate(80, 0, 0);
// 绘制方块
box(30);
pop();
// 每一层向下移动一点
translate(0, 10, 0);
// ※ 注意：因为这里 translate 在 push/pop 外面，
// 所以它会累积影响下一次循环，形成长链。
}
}
</script>
<body>
</html>**附、**p5.js和原生 HTML5 Canvas代码写法对比
任务：画一个红色的圆
原生 HTML5 写法：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 画圆</title>
</head>
<body>
<!-- Canvas画布：设置width/height属性 -->
<canvas id="circleCanvas" width="400" height="300"></canvas>
<script>
// 1. 获取Canvas元素
const canvas = document.getElementById('circleCanvas');
// 2. 获取2D绘图上下文（所有绘制操作的核心对象）
const ctx = canvas.getContext('2d');
// 3. 开始绘制路径（画圆前必须先开启新路径）
ctx.beginPath();
/*
4. 核心：arc()方法绘制圆形路径
参数说明（必记）：
arc(x, y, radius, startAngle, endAngle, anticlockwise)
- x: 圆心的水平坐标（画布左侧为0）
- y: 圆心的垂直坐标（画布顶部为0）
- radius: 圆的半径（像素）
- startAngle: 起始角度（弧度），0 = 右侧水平方向
- endAngle: 结束角度（弧度），2*Math.PI = 完整一圈（360度）
- anticlockwise: 是否逆时针绘制（可选，默认false顺时针）
*/
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 要自己算弧度
ctx.fillStyle = "red"; // 填充颜色
ctx.fill(); // 执行填充绘制
</script>
</body>
</html>p5.js 写法：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>p5.js 画圆</title>
<!-- 引入p5.js官方库（必须，否则代码无法运行） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<script>
// 1. setup函数：p5.js的初始化函数，只执行一次
function setup() {
// 创建画布：宽度400px，高度300px
createCanvas(400, 300);
}
// 2. draw函数：p5.js的主循环函数，每秒执行约60次
function draw() {
fill('red'); // 设置图形的填充颜色为红色
/* circle绘制圆形
说明：
circle(圆心的水平坐标（x 轴）,圆心的垂直坐标（y 轴）,圆的直径);
*/
circle(100, 75, 50); // 绘制圆形
}
</script>
<body>
</html>