p5.js | 鼠标 | 鼠标按钮

简介

p5.js是一个基于JavaScript的开源创意编程库，可以轻松创建图形、动画和交互式界面。它为创意编码和计算机艺术能力较弱的人提供了一个易于使用的平台。本文将探讨在p5.js中如何使用鼠标和鼠标按钮。

鼠标

在p5.js中，可以通过以下代码获取鼠标的位置。

function draw() {
  var mouseX = mouseX;
  var mouseY = mouseY;
}

这将在draw()函数中创建一个名为mouseX的变量。同样，该函数还为名为mouseY的变量分配了鼠标的y坐标。

我们可以使用这些变量来控制我们的图形或动画：

function draw() {
  background(255);
  ellipse(mouseX, mouseY, 50, 50);
}

以上代码将绘制一个随着鼠标移动而移动的圆。

鼠标按钮

p5.js支持三种不同的鼠标按钮：左、中和右。以下是如何使用它们：

鼠标按住

function mousePressed() {
  if (mouseButton === LEFT) {
    // Left button pressed
  } else if (mouseButton === RIGHT) {
    // Right button pressed
  } else if (mouseButton === CENTER) {
    // Center button pressed
  }
}

鼠标释放

function mouseReleased() {
  if (mouseButton === LEFT) {
    // Left button released
  } else if (mouseButton === RIGHT) {
    // Right button released
  } else if (mouseButton === CENTER) {
    // Center button released
  }
}

鼠标双击

function doubleClicked() {
  if (mouseButton === LEFT) {
    // Left button double-clicked
  } else if (mouseButton === RIGHT) {
    // Right button double-clicked
  } else if (mouseButton === CENTER) {
    // Center button double-clicked
  }
}

总结

通过这篇介绍，我们了解了如何使用p5.js库中的鼠标和鼠标按钮来创建交互式图形和动画。我们可以使用这些技术来为我们的项目添加更多功能和用户体验。