javascript - p5.j​​s 无法映射 alpha channel

Question

我正在使用 p5.js图书馆。当 mousePressed 被调用时，我想创建一个黑色椭圆，两秒钟后我想直接在上面绘制另一个白色椭圆。我想为第二个白色椭圆上的 alpha channel 设置“动画”，以产生黑色椭圆正在淡出的错觉。

我似乎无法思考如何处理这个问题。我如何创建一个计时器来映射 alpha channel 并在 a = 255 时停止？

 var a;
 var x;
 var y;

function setup() {
    var canvas = createCanvas(windowWidth, windowHeight;

    ellipseMode(RADIUS);
    imageMode(CENTER);
    noStroke();
    background('white');
}

function mousePressed() {
    x = mouseX;
    y = mouseY;

    fill('black');
    ellipse(x, y, 45, 45);
    setTimeout(function() {
         //animate a 

      fill(255, 255, 255, a);
      ellipse(x, y, 45, 45);
    }, 2000)
} 

Answer 1

查看我对这个问题的回答:Capture photos from video after specific time in p5.js

基本上，您不想在 P5.js 代码中使用 setTimeout() 函数。相反，使用每秒调用 60 次的 draw() 函数。如果您需要检查经过了多少时间，请使用 frameCount 变量或 millis() 函数。有关所有这些的更多信息，请参阅 the reference .

下面是一个绘制颜色越来越深的示例程序:

var bgColor = 255;

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

function draw() { 
 background(bgColor);
 if(bgColor > 0){
   bgColor--;
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>