当前位置：首页 > news >正文

vite：初学 p5.js demo 画圆圈

news 来源：原创 2025/6/9 4:32:49

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