JavaScript的p5.js库使用详解（上）
p5.js 是一个基于 JavaScript 的库，支持2D/3D图形、声音、视频、DOM 操作、WebGL 渲染，甚至可以通过扩展库连接硬件（如 Arduino）或处理数据。它的核心目标是 "让写代码像画画一样简单"。
关于p5.js库初学者使用快速入门，可见https://blog.csdn.net/cnds123/article/details/156687856 。
p5.js 的官网https://p5js.org/ 可以切换中文。
一 . p5.js 的使用设置
要在HTML文件中引入p5.js库。你可以下载p5.js文件并在本地引用，或者使用CDN。
方法一：使用CDN引入
在HTML文件中使用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
方法二：本地引入
你也可以从p5.js官网下载库文件
下载完整版或简化版，然后通过相对路径引入。
在HTML文件中使用：
<script src="./1.7.0/p5.js"></script>
使用p5.js 的HTML 文件的结构
一个基础的p5.js程序包含两个主要函数：setup()和draw()。
- setup(): 在程序开始时运行一次，用于初始化设置，如创建画布、设置背景色等。
- draw(): 在setup()之后不断重复运行，默认每秒60帧，用于绘制动画和交互。
下面给出使用 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.7.0/p5.js"></script>
</head>
<body>
<script>
// 1. setup函数：p5.js的初始化函数，只执行一次
function setup() {
// 创建画布：宽度400px，高度300px
createCanvas(400, 300);
background(220); // 设置背景色
}
// 2. draw函数：p5.js的主循环函数，每秒执行约60次
function draw() {
// 绘制代码
}
</script>
<body>
</html>
使用p5.js 结构也可以简写为：
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script>
function setup() {
createCanvas(800, 600);
}
function draw() {
// 绘制代码
}
</script>
特别提示，其中1.7.0部分是版本号，可改，常用的有：1.4.0、1.7.0、1.9.0 等。两者的区别：
✔ CDN 引入 → 调用"别人服务器上"的 p5.js 文件（远程文件）
零配置、零下载，最省事：不用去官网下载任何文件，不用管文件路径，直接复制这行代码到 HTML 里，就能用，对新手友好，但是，必须保证你的电脑能联网！
✔ 本地引入 → 调用"你自己电脑 / 项目文件夹里"的 p5.js 文件（本地文件）
从 p5.js 官网下载了p5.js文件，放在了自己项目文件夹中，HTML 文件通过相对路径，调用本地的这个库文件，加载后使用 p5.js 功能。 完全离线可用，无网络依赖，加载速度极致快，这是本地引入的最大优势！
2D 版本示例：彩色渐变的圆自动在圆布上逆时针自动旋转
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400); // 画布大小不变
}
// 可直接修改这3个参数，随心调整效果，超方便
let speed = 0.012; // 旋转速度（越大越快，越小越慢）
let radius = 140; // 旋转半径（越小越靠近中心）
let circleSize = 80; // 圆直径
function draw() {
background(240);
noStroke();
let centerX = 200, centerY = 200;
let angle = - frameCount * speed; //逆时针旋转， 去掉负号 → 顺时针旋转
let circleX = centerX + cos(angle) * radius;
let circleY = centerY + sin(angle) * radius;
fill(circleX, circleY, 180); // 微调渐变，颜色更鲜艳
circle(circleX, circleY, circleSize);
}
</script>运行效果：
3D版本示例：3D版本彩色渐变的球自动在画布上逆时针自动旋转
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400, WEBGL); // 核心：开启3D模式 WEBGL
smooth(); // 抗锯齿，让3D球体边缘更圆润细腻
}
// 可自由修改这3个参数，效果实时变化，不用改其他代码
let rotateSpeed = 0.012; // 球体公转速度 (越大越快，0.01最合适)
let moveRadius = 140; // 公转半径 (越小越靠近中心，140不会出界)
let ballSize = 40; // 3D球体半径【注意：3D球参数是半径！】
function draw() {
background(240); // 保留原版浅灰色背景
noStroke(); // 无边框，球体更干净
// ===== 核心：环境光 + 方向光 组合 → 制造强烈明暗对比，立体感拉满 =====
ambientLight(180); // 弱一点的环境光，打底用
directionalLight(255, 255, 255, 1, -1, -1); // 白色方向光（核心！）从右上方向左下方照射
directionalLight(200, 200, 255, -1, 1, 1); // 浅蓝色补光，让暗部不发黑，过渡更自然
let angle = - frameCount * rotateSpeed; //逆时针旋转， 去掉负号 → 顺时针旋转
let ballX = cos(angle) * moveRadius;
let ballY = sin(angle) * moveRadius;
// ===== 绘制3D彩色渐变球体 =====
push();
translate(ballX, ballY, 0); // 3D平移：球体公转的核心，Z轴给0在平面公转
fill(ballX+200, ballY+200, 180); // 修正3D坐标的颜色渐变，色彩更饱满好看
sphere(ballSize); // 画3D球体
pop();
// 核心3D功能：鼠标自由控制视角
// 鼠标左键拖拽 → 旋转视角看球体任意面
// 鼠标滚轮 → 缩放视角拉近/拉远
// 鼠标右键拖拽 → 平移视角
//orbitControl();
}
</script>运行效果：
初学者对这两个例子的代码具体细节，目前看不懂不要急，将后面讲到细节看完后，就理解啦。
二、 p5.js 的坐标系
默认状态下使用2D 模式：
createCanvas(400, 400, WEBGL);
此时，p5.js 的坐标系与原生 HTML5 Canvas 的坐标系在原点位置、轴的方向以及旋转方向上是完全一样的。
• X 轴： 向右增加（和数学一样）。
• Y 轴： 向下增加（和数学相反！）。
这意味着：Y 越大，物体越靠下。
验证代码如下：
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(240);fill(255,0,0);noStroke();
rect(0, 0, 30, 30); // 原点左上角：红色小方块
rect(100, 150, 50,50); // X=100(右) Y=150(下)：红色方块。X 越大越右，Y 越大越靠下。
}
</script>参见下图运行效果：
在 p5.js 支持3D 模式，开启 3D 模式：
createCanvas(400, 400, WEBGL);
3D 模式下，p5.js 的原点 (0,0,0) 在画布的最中心（而不是左上角），x轴右+左-，y轴下+上-，z轴前(出屏幕)+后- 。坐标系类型是左手 Y-Down【注意："手性"（Chirality）可以用来帮助确定三个轴之间的相对关系，大拇指（x）、食指（y）、中指（z），而不是确定轴在这个世界里的绝对朝向。关于手性的更多情况，可参见 https://blog.csdn.net/cnds123/article/details/156716324 一文的有关部分】。
3D 模式验证代码：
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script>
function setup() {
createCanvas(400, 400, WEBGL); // WEBGL启用3D 模式
}
function draw() {
background(240); ambientLight(220); stroke(0);
// 原点中心：黄色立方体
push(); translate(0,0,0); ambientMaterial(255,255,0); box(30); pop();
// X+右、Y+下、Z+前 → 红色立方体
push(); translate(80,80,80); ambientMaterial(255,0,0); box(30); pop();
// X-左、Y-上、Z-后 → 蓝色立方体
push(); translate(-80,-80,-80); ambientMaterial(0,0,255); box(30); pop();
}
</script>其中，translate(x,y,z)：参数对应"x轴右+左-，y轴下+上-，z轴前(出屏幕)+后-"，参见下图运行效果：
