p5.js | 鼠标移动X

简介

p5.js 是基于 Processing 框架的一个 JavaScript 库, 可以用于创建视觉艺术、交互式图形、动画和游戏等。它提供了一些常用的绘图函数和事件处理函数，帮助开发者简便地构建 Web 应用程序。

本教程将带领大家学习如何使用 p5.js 库中的 mouseX 和 pmouseX 变量来获取鼠标的移动信息，并将其应用在绘图中。

mouseX 和 pmouseX 变量

mouseX 和 pmouseX 变量分别代表当前鼠标的 X 坐标和上一次事件的 X 坐标。这两个变量在 p5.js 库中均自带，无需特别定义。

新建 p5.js 项目

1. 打开 p5.js 官方网站，下载最新版本的 p5.js 库及其编辑器 Processing。

   

2. 打开 Processing 编辑器，新建一个空白项目。

   

3. 在 new.js 中编写程序：

   function setup() {
     createCanvas(windowWidth, windowHeight);  // 创建画布，与窗口尺寸相同
   }
   
   function draw() {
     background(200);  // 设置背景色
     noStroke();  // 不绘制轮廓线
     fill(0, mouseX, 255);  // 颜色为蓝色（B = 255），红色（R = mouseX），绿色为 0，颜色变化与 mouseX 变化有关
   
     ellipse(mouseX, windowHeight / 2, 50);  // 绘制圆，横坐标为 mouseX，纵坐标为窗口的中央位置
   }
   

实现鼠标移动影响绘图

1. 更改 fill() 中的参数，控制圆的颜色变化，使其与 mouseX 的值有关。

2. 鼠标移动时触发 mouseMoved() 方法，在其中更新画布并重新绘制圆。

   function setup() {
     createCanvas(windowWidth, windowHeight);  // 创建画布，与窗口尺寸相同
   }
   
   function draw() {
     background(200);  // 设置背景色
     noStroke();  // 不绘制轮廓线
     fill(0, mouseX, 255);  // 颜色为蓝色（B = 255），红色（R = mouseX），绿色为 0，颜色变化与 mouseX 变化有关
   
     ellipse(mouseX, windowHeight / 2, 50);  // 绘制圆，横坐标为 mouseX，纵坐标为窗口的中央位置
   }
   
   function mouseMoved() {
     redraw();  // 更新画布并重新绘制圆
   }
   

结论

通过本教程的介绍，我们学习了如何使用 p5.js 库中的 mouseX 和 pmouseX 变量来获取鼠标的移动信息，并将其应用在绘图中。对于绘图工程师、UI 工程师和前端工程师等，p5.js 的知识和技能值得深入学习和探讨。