p5.js 聚光灯() 方法

p5.js 的聚光灯() 方法是一个在画布中创建可调节的聚光灯效果的函数。通过此函数，我们可以在画布中产生高亮、突出显示某个元素的效果。下面将一步步介绍聚光灯() 方法的使用。

函数签名

聚光灯() 方法的函数签名为： spotlight(x, y, focusRadius, softness)

其中：

• x 和 y 表示聚光灯的中心的坐标。
• focusRadius 表示聚光的半径。在半径外的对象将被淡化。
• softness 表示定义聚光灯渐变的参考指数。较低的数字将产生更锐利的边缘，高数字将产生更柔和的边缘。

示例

下面是一个简单的示例，该示例在画布中心创建了一个半径为 200 的聚光灯，聚光灯的柔和度为 10：

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

function draw() {
  background(220);
  
  // 在画布中心创建一个聚光灯
  spotlight(width/2, height/2, 200, 10);
  
  // 在画布上画出一个圆形
  ellipse(width/2, height/2, 50, 50);
}

运行以上代码，会产生如下效果：

实现原理

聚光灯() 方法的实现原理其实很简单。首先，该方法采用了 PShader（一个用于加载着色器的对象）和 loadShader() 函数来定义动态模糊着色器。之后将画布的像素着色为灰色，之后将中心为 (x, y)，半径为 focusRadius 的圆形剪开。然后使用 noStroke() 禁用描边，然后使用 texture() 和动态模糊着色器将聚光设置到一个正方形区域中，该正方形区域的边长为半径大小两倍的大小，并使该正方形区域距画布的左上角等距。最后再用 quad() 方法和纹理贴图来实现聚光的效果。

参考文献

• p5.js spotlight() function
• p5.js Shader（着色器）教程