如何在 Processing 中创建 'pulse' 效果？

Question

我正在尝试可视化在我绘制到屏幕上的图表上出现的点。

理想情况下，先画一个小椭圆，然后"ring"从椭圆的中心向外移动，并在移动时逐渐消失。初始椭圆将保留在最初绘制的位置。

我可以编写一个简单的淡化椭圆，但无法弄清楚如何为移动的环设置动画。任何人都可以分享一些关于如何开始这个的想法吗？

Answer 1

基本上，您需要将动画的状态存储在一组变量中。使用这些变量绘制每一帧，并随时间改变这些变量以改变绘制的内容。

所以第一步是弄清楚你需要存储什么状态。这将告诉您需要跟踪哪些变量。作为一个非常简单的示例，您可以存储直径和不透明度：

float diameter = 10;
float opacity = 255;

第二步是使用这些变量绘制每一帧。一次只关心一帧，在这种情况下我们可能只是清除旧帧然后画一个圆圈：

 background(0);
 noFill();
 stroke(255, 255, 255, opacity);
 ellipse(width/2, height/2, diameter, diameter);

最后，最后一步是随时间改变这些变量。我们可以通过修改它们的值来使圆变大并且颜色变得不那么不透明来做到这一点：

 diameter++;
 opacity--;

把它们放在一起，看起来像这样：

float diameter = 10;
float opacity = 255;

void setup(){
  size(500, 500);
}

void draw(){
 diameter++;
 opacity--;

 background(0);
 noFill();
 stroke(255, 255, 255, opacity);
 ellipse(width/2, height/2, diameter, diameter);
}

请注意这只是一个示例，您将不得不将这些步骤与您自己的状态和您自己的变量一起应用，以实现您想要的效果去.

Stack Overflow 确实不是为一般 "how do I do this" 类型的问题设计的。尝试提出更具体的 "I tried X, expected Y, but got Z instead" 类型的问题。换句话说，尝试一些东西，如果遇到困难，post 一个 MCVE。祝你好运。

如何在 Processing 中创建 'pulse' 效果？

How can one create a 'pulse' effect in Processing?

processing

animation