q5.js: 一个轻量级的p5.js替代品

最新推荐文章于 2025-04-12 21:44:12 发布

胡寒侃Joe

最新推荐文章于 2025-04-12 21:44:12 发布

阅读量857

点赞数 17

本文链接：https://blog.csdn.net/gitblog_00184/article/details/146995384

版权

q5.js: 一个轻量级的p5.js替代品

q5xjs A small and fast alternative (experimental) implementation of p5.js 项目地址: https://gitcode.com/gh_mirrors/q5/q5xjs

1. 项目介绍

q5.js是一个轻量级、快速的客户端JavaScript平台，用于在网页上进行创意表达。它是p5.js的一个实验性替代实现，与p5.js大部分代码兼容，意味着你可以简单地将现有草图的库链接替换为q5.js，期望它以最小的修改运行。q5.js从p5.js继承了大部分优点，但更强调以下几个方面：

轻量级：33KB压缩后的体积（相比之下，p5.min.js 1.1.9为800+KB）。更小的库具有更小的碳足迹！
快速：通过作为Canvas/Web API的更薄封装，跳过参数验证，并在可能的地方使用更快的算法来实现。

目前，q5.js支持几乎所有的p5.js 2D绘图API，大部分数学功能和其他实用工具。它还不支持3D；3D支持可能会作为一个扩展出现，以保持主库的轻量级。它排除了DOM和声音功能，尽管它大部分与p5.sound.js和p5.dom.js兼容。

2. 项目快速启动

要在项目中使用q5.js，你可以通过以下方式之一引入它：

将以下行添加到你的HTML文件中：

<script src="q5.min.js"></script>

或者通过CDN引入：

<script src="https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js"></script>

在你的JavaScript代码中，你可以创建一个新的Q5实例：

new Q5("global");

然后，编写你的setup和draw函数：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(200);
  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }
}

3. 应用案例和最佳实践

以下是一个使用q5.js的简单示例：

new Q5("global");

function setup() {
  createCanvas(100, 100);
}

function draw() {
  background(237, 34, 93);
  fill(0);
  if (mouseIsPressed) {
    ellipse(50, 50, 50, 50);
  } else {
    rect(25, 25, 50, 50);
  }
}

在这个例子中，我们创建了一个100x100像素的画布，并根据鼠标是否按下绘制一个矩形或圆形。