JavaScript的p5.js库使用介绍-开发者社区

JavaScript的p5.js库使用介绍

简要说明

p5.js 是一个基于 JavaScript 的库，它的核心目标是 “让写代码像画画一样简单”。p5.js 是 Processing 的 JavaScript 版本，继承了 Processing 的易用性和哲学，但可以在浏览器中直接运行。

p5.js支持2D/3D图形、声音、视频、DOM 操作、WebGL 渲染，甚至可以通过扩展库连接硬件（如 Arduino）或处理数据。

https://p5js.org/

p5.js 的官网有非常完善的中文文档，参见下图：

官方示例：

https://p5js.org/examples/

下面简要介绍如何使用。

它两个最重要的函数（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交互例子：紧盯鼠标的眼睛，无论你的鼠标移到哪里，这两个眼球都会转过去盯着看；如果你点击鼠标，它会吓得“眨眼”。

效果图：

源码如下：

<!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螺旋，你可以移动鼠标来改变观看的角度和旋转速度。

效果图：

源码如下：

<!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写法：

<!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写法：

<!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>