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

vite：初学 p5.js demo 画圆圈

news 2025/5/16 6:07:34

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

查看全文

http://www.mrgr.cn/news/93577.html