关于实现一个炫酷的鼠标移动特效在 p5.js中实现的方法分享

2023-09-10 06:06:30

大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。最近开始玩起了 p5.js，发现这是一个很有意思的库。今天我们就一起来用它来实现一个炫酷的鼠标移动特效。

1. 原理介绍

这个特效的原理很简单，就是不断地创建一个新的圆形，并将它的位置和颜色设置为与鼠标的当前位置和颜色一致。当鼠标移动时，这些圆形就会在屏幕上留下一个五彩缤纷的轨迹，看起来就像一条拖尾的彗星。

2. 代码实现

2.1 创建画布

首先，我们需要创建一个 p5.js 画布。这可以通过在 HTML 文件中添加一个 <canvas> 标签来实现。然后，我们在 JavaScript 代码中使用 createCanvas() 函数来创建画布。

function setup() {
  createCanvas(windowWidth, windowHeight);
}

2.2 创建圆形

接下来，我们需要创建一个圆形。这可以通过使用 ellipse() 函数来实现。ellipse() 函数接受四个参数：圆形的 x 坐标、圆形的 y 坐标、圆形的宽度和圆形的高度。

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

2.3 设置颜色

我们还需要设置圆形の色。这可以通过使用 fill() 函数来实现。fill() 函数接受一个颜色参数，可以是任何有效的 CSS 颜色值。

function draw() {
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, 20, 20);
}

2.4 将圆形添加到数组中

为了在屏幕上留下一个轨迹，我们需要将每个圆形都添加到一个数组中。这可以通过使用 push() 函数来实现。push() 函数将一个元素添加到数组的末尾。

function draw() {
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, 20, 20);
  circles.push({
    x: mouseX,
    y: mouseY,
    color: color(random(255), random(255), random(255))
  });
}

2.5 绘制圆形

最后，我们需要在屏幕上绘制这些圆形。这可以通过使用 forEach() 函数来实现。forEach() 函数遍历数组中的每个元素，并执行一个回调函数。

function draw() {
  fill(random(255), random(255), random(255));
  ellipse(mouseX, mouseY, 20, 20);
  circles.push({
    x: mouseX,
    y: mouseY,
    color: color(random(255), random(255), random(255))
  });

  circles.forEach(function(circle) {
    fill(circle.color);
    ellipse(circle.x, circle.y, 20, 20);
  });
}