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

vite：初学 p5.js demo

news 2025/3/10 21:06:28

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 脚本，模拟 42 个彩色小球在一个3D大球体内部弹跳。每个小球都应留下一条逐渐消失的轨迹。大球体应缓慢旋转，并显示透明的轮廓线。请确保实现适当的碰撞检测，使小球保持在球体内部。

cd p5-demo
copy .\node_modules\p5\lib\p5.min.js .
编写 3d_42_balls.html 如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D Bouncing Balls in Sphere</title><script src="p5.min.js"></script>
</head><body>
<script>let balls = [];let sphereRadius = 200;let rotationSpeed = 0.01;function setup() {createCanvas(800, 600, WEBGL);for (let i = 0; i < 42; i++) {balls.push(new Ball());}}function draw() {background(0);rotateX(frameCount * rotationSpeed);rotateY(frameCount * rotationSpeed);// 绘制大球体stroke(255, 100);noFill();sphere(sphereRadius);// 更新并绘制小球for (let ball of balls) {ball.update();ball.display();}}class Ball {constructor() {this.pos = p5.Vector.random3D().mult(random(0, sphereRadius));this.vel = p5.Vector.random3D().mult(random(1, 3));this.color = color(random(255), random(255), random(255));this.trail = [];this.trailLength = 20;}update() {this.pos.add(this.vel);// 碰撞检测let distanceToCenter = this.pos.mag();if (distanceToCenter > sphereRadius) {let normal = this.pos.copy().normalize();this.vel.reflect(normal);// 确保小球回到球体内this.pos = normal.mult(sphereRadius - 0.1); }// 更新轨迹this.trail.push(this.pos.copy());if (this.trail.length > this.trailLength) {this.trail.shift();}}display() {// 绘制轨迹for (let i = 0; i < this.trail.length; i++) {let alpha = map(i, 0, this.trail.length, 255, 0);stroke(this.color.levels[0], this.color.levels[1], this.color.levels[2], alpha);if (i > 0) {line(this.trail[i - 1].x, this.trail[i - 1].y, this.trail[i - 1].z, this.trail[i].x, this.trail[i].y, this.trail[i].z);}}// 绘制小球fill(this.color);noStroke();push();translate(this.pos.x, this.pos.y, this.pos.z);sphere(5);pop();}}
</script>
</body>
</html>

双击打开 3d_42_balls.html