如何对文本应用强度发光效果（p5js）？

Question

我在 p5js 中有以下示例。我想修改

drawingContext

使其具有发光效果。这是一个工作示例

let thisColor;

function setup() {
  let canvas = createCanvas(700, 200);
  canvas.parent('canvas-container');

  // Get Form Information
  textAlign(CENTER, CENTER);
  fill(color(255,255,255));
  textStyle(BOLD);
  textSize(60);
  
  thisColor = color(255, 249, 124);
}

function draw(){
  background(0);
  stroke(thisColor);
  neonText("Happy Birthday", thisColor, 200);
  neonText("Happy Birthday", thisColor, 100);
  neonText("Happy Birthday", thisColor, 50);
  neonText("Happy Birthday", thisColor, 25);
  neonText("Happy Birthday", thisColor, 10);
}

function neonText(thisText, color, blurLevel){
  drawingContext.shadowBlur = blurLevel;
  drawingContext.shadowColor = color;
  text("Happy Birthday", width/2, height/2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
    #canvas-container {
        display: flex;
        justify-content: center;
    }
</style>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>

问题是我必须多次执行发光函数，即应用

drawingContext.shadowBlur

和

drawingContext.shadowColor

以及一遍又一遍地执行

text()

才能产生这种发光效果。

除了上述问题之外，我还想控制发光效果的强度，这意味着模糊值越大，强度越低。所以换句话来说，距离文字越近的光线应该“更亮”！ 这是我想要实现的目标的现实生活图像：

Answer 1

您可以使用

setInterval

制作动画并在两种状态之间交替：

let thisColor;

function setup() {
  let canvas = createCanvas(700, 200);
  canvas.parent('canvas-container');

  // Get Form Information
  textAlign(CENTER, CENTER);
  fill(color(255,255,255));
  textStyle(BOLD);
  textSize(60);
  
  thisColor = color(255, 249, 124);
}

function draw(){
  background(0);
  stroke(thisColor);
  neonText("Happy Birthday", thisColor, 200);
  neonText("Happy Birthday", thisColor, 100);
  neonText("Happy Birthday", thisColor, 50);
  neonText("Happy Birthday", thisColor, 25);
  neonText("Happy Birthday", thisColor, 10);
}

function neonText(thisText, color, blurLevel){
  drawingContext.shadowBlur = blurLevel;
  drawingContext.shadowColor = color;
  text("Happy Birthday", width/2, height/2);
}

setInterval(function() {
    thisColor = (thisColor === "black") ? color(255, 249, 124) : "black";
    draw();
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
    #canvas-container {
        display: flex;
        justify-content: center;
    }
</style>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>