盐城seo网站优化软件十大广告设计公司简介
p5.js 是一个 JavaScript 的函数库，它在制作之初就和 Processing 有同样的目标。 就是让艺术家，设计师，教育工作者和编程初学者能够很容易，很轻松地学习和使用程序设计。实际上就是对 canvas 等代码的封装，简化了在 Web 中绘图的代码。
为了方便，我将使用 vite 搭建一个原生 js 项目。
1.创建项目
npm create vite@latest p5-demo
选：Vanilla
选：JavaScript
2.初始化项目
cd p5-demo
cnpm install
3.安装 p5.js
cnpm install p5 --save
cd p5-demo
4.编写 p5_circle.js 如下
import p5 from 'p5'let count = 0;
let isDrawing = true; // 新增变量，用于控制是否继续绘制const sketch = (s) => {s.setup = function() {s.createCanvas(400, 400); // 创建画布，传入画布尺寸s.background(120); // 设置画布背景色}s.draw = function() {if (isDrawing) {let x = Math.sin(count) *100 + 200;let y = Math.cos(count) *100 + 200;s.circle(x, y, 50); // 创建圆形count += 0.1;}}s.mousePressed = function() {if (isDrawing) {isDrawing = false; // 鼠标点击时，停止绘制} else {isDrawing = true;}}
}new p5(sketch);5.编辑 index.html 如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Test circle</title></head><body><div id="app"></div><script type="module" src="p5_circle.js"></script></body>
</html>
6.运行 cmd
npm run dev
VITE v6.2.0 ready in 424 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h + enter to show help
o访问 http://localhost:5173
参考：p5.js 使用npm安装p5.js后如何使用？
向 豆包 提问：编写 p5.js 脚本，捕捉鼠标移动轨迹，每隔0.1秒不断画圆圈。填入圆圈内的颜色是随机数。
cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .
编写 random_circle.html 如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Mouse Trajectory Circles</title><script src="p5.min.js"></script>
</head><body><script>let lastTime = 0;const interval = 100; // 0.1 秒 = 100 毫秒function setup() {createCanvas(windowWidth, windowHeight);background(255);}function draw() {const currentTime = millis();if (currentTime - lastTime > interval) {const r = random(255);const g = random(255);const b = random(255);fill(r, g, b, 127);noStroke();circle(mouseX, mouseY, 30);lastTime = currentTime;}}</script>
</body>
</html>
双击打开 random_circle.html