vite：初学 p5.js demo 画圆圈

原创

已于 2025-03-09 09:40:03 修改 · 958 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

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

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