📌  相关文章
📜  p5.js |鼠标移动Y(1)

📅  最后修改于: 2023-12-03 15:03:27.400000             🧑  作者: Mango

p5.js | 鼠标移动Y

简介

本文介绍如何使用 p5.js 通过鼠标移动来控制 Y 坐标。

效果预览

先看一下最终实现的效果：

效果预览

实现步骤
步骤一：创建画布

首先我们需要在 HTML 中创建一个画布，代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>p5.js Move Y</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.dom.min.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

这里我们引入了 p5.js 的核心库、DOM 拓展库和一个名为 sketch.js 的 JavaScript 文件，用于编写我们的代码。

步骤二：定义变量

在 sketch.js 中，我们首先需要定义一些变量，代码如下：

let ypos = 0; // Y 坐标
let yspeed = 0; // Y 轴速度
let yaccel = 0.05; // Y 轴加速度
let diameter = 50; // 圆的直径

其中，ypos 表示当前圆的 Y 坐标，yspeed 表示当前圆在 Y 轴上的速度，yaccel 表示当前圆在 Y 轴上的加速度，diameter 表示圆的直径。

步骤三：绘制图形

接下来，我们需要在 setup() 函数中创建画布并进行初始化：

function setup() {
  createCanvas(400, 400);
  noStroke();
  fill(255, 0, 0); // 红色
}

这里我们创建了一个大小为 400x400 的画布，并使用红色填充颜色。接着，我们需要在 draw() 函数中绘制圆形：

function draw() {
  background(255); // 背景色为白色
  ellipse(200, ypos, diameter, diameter); // 绘制圆形
}

这里我们使用 background() 函数设置背景为白色，并使用 ellipse() 函数绘制圆形。其中，第一个参数表示圆形的 X 坐标，这里我们将圆形置于画布正中央；第二个参数使用了 ypos，表示圆形的 Y 坐标。

步骤四：重力模拟

为了让圆形有运动效果，我们需要在 draw() 函数中模拟重力的作用。模拟重力的方法是：每帧都增加一个固定的加速度 yaccel，并将这个加速度累加到速度 yspeed 上，最后再累加到 Y 坐标 ypos 上。代码如下：

  yspeed += yaccel; // 累加速度到速度上
  ypos += yspeed; // 累加速度到 Y 坐标上

现在，我们可以在浏览器中查看效果了。打开浏览器控制台，可以看到圆形按重力轨迹不断下落。但这不是我们想要的，我们需要鼠标移动来控制圆形的运动轨迹。

步骤五：鼠标事件

在 p5.js 中，有 mouseMoved()、mouseDragged() 和 mousePressed() 等鼠标事件函数，可以用于监听鼠标的相关事件。

我们需要使用 mouseMoved() 函数来监听鼠标移动事件。每当鼠标移动时，只需要将圆形的 Y 坐标更新为当前鼠标的 Y 坐标即可。代码如下：

function mouseMoved() {
  ypos = mouseY; // 将圆形的 Y 坐标设置为当前鼠标的 Y 坐标
}

到这里，我们的效果就已经实现了。打开浏览器，移动一下鼠标，你会发现圆形跟随鼠标的 Y 坐标移动。完整的代码如下：

let ypos = 0; // Y 坐标
let yspeed = 0; // Y 轴速度
let yaccel = 0.05; // Y 轴加速度
let diameter = 50; // 圆的直径

function setup() {
  createCanvas(400, 400);
  noStroke();
  fill(255, 0, 0); // 红色
}

function draw() {
  background(255); // 背景色为白色
  ellipse(200, ypos, diameter, diameter); // 绘制圆形

  yspeed += yaccel; // 累加速度到速度上
  ypos += yspeed; // 累加速度到 Y 坐标上
}

function mouseMoved() {
  ypos = mouseY; // 将圆形的 Y 坐标设置为当前鼠标的 Y 坐标
}
总结

本文介绍了如何使用 p5.js 来实现鼠标移动控制 Y 坐标的效果。通过本文的学习，你应该能更好地理解鼠标事件和 p5.js 中的绘图函数。