vite：初学 p5.js demo 画圆圈

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  如下

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  如下

 双击打开 random_circle.html 

在这个代码里，每次满足时间间隔条件要绘制圆圈时，会使用 `random(255)` 函数分别生成 0 到 255 之间的随机数作为 RGB 颜色通道的值，然后用 `fill(r, g, b, 127)` 来设置填充颜色，其中 `127` 是设置的透明度。 

---

交互式光晕效果

• 描述: 创建一个光晕效果，用户可以通过鼠标控制光晕的位置和大小，光晕会随着鼠标移动而动态变化。

• 编写 p5_ellipse.html  如下

•  双击打开 p5_ellipse.html 
   

  ---

  交互式粒子系统

• 描述: 创建一个粒子系统，用户可以通过鼠标或触摸屏与粒子互动。粒子可以跟随鼠标移动，或在鼠标附近产生排斥或吸引效果。

• 编写  p5_particles.html  如下

• 双击打开 p5_particles.html