vite：初学 p5.js demo 画圆圈

原创已于 2025-03-09 09:40:03 修改 · 994 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

javascript

于 2025-03-07 23:15:40 首次发布

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

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

交互式光晕效果

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>p5 ellipse Example</title>
   <script src="p5.min.js"></script>
</head>
<body>
<script>
  function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
  }
  
  function draw() {
    background(0);
    let glowSize = map(mouseX, 0, width, 50, 200);
    let glowColor = color(255, 255, 255, 100);
  
    for (let i = 0; i < 5; i++) {
      fill(glowColor);
      ellipse(mouseX, mouseY, glowSize - i*20, glowSize - i*20);
    }
  }
</script>
</body>
</html>

双击打开 p5_ellipse.html

交互式粒子系统

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>p5 particles Example</title>
   <script src="p5.min.js"></script>
</head>
<body>
<script>
  let particles = [];
  
  function setup() {
    createCanvas(windowWidth, windowHeight);
    for (let i = 0; i < 100; i++) {
      particles.push(new Particle());
    }
  }
  
  function draw() {
    background(0);
    for (let particle of particles) {
      particle.update();
      particle.show();
      particle.edges();
      particle.interact(mouseX, mouseY);
    }
  }
  
  class Particle {
    constructor() {
      this.pos = createVector(random(width), random(height));
      this.vel = createVector(random(-1, 1), random(-1, 1));
      this.acc = createVector(0, 0);
      this.size = random(5, 10);
    }
  
    update() {
      this.vel.add(this.acc);
      this.pos.add(this.vel);
      this.acc.mult(0);
    }
  
    show() {
      noStroke();
      fill(255);
      ellipse(this.pos.x, this.pos.y, this.size);
    }
  
    edges() {
      if (this.pos.x > width) this.pos.x = 0;
      if (this.pos.x < 0) this.pos.x = width;
      if (this.pos.y > height) this.pos.y = 0;
      if (this.pos.y < 0) this.pos.y = height;
    }
  
    interact(x, y) {
      let mouse = createVector(x, y);
      let dir = p5.Vector.sub(mouse, this.pos);
      let distance = dir.mag();
      if (distance < 100) {
        dir.setMag(-1);
        this.acc.add(dir);
      }
    }
  }
</script>
</body>
</html>

双击打开 p5_particles.html

标签

#javascript #p5.js #vite #circle #ellipse