在Processing中创建一个动画径向渐变，类似于Solar Weather App

Question

我正在尝试在Processing中创建径向渐变，并为渐变设置动画以使其具有缓慢的呼吸效果。渐变需要在两个颜色集之间振荡 - 这是在iOS天气应用程序Solar中看到的效果。

我发现same question要求xCode，但我想得到一些关于Processing的指针。

这是一张更好地解释我的问题的图片：

我偶然发现了'径向渐变'example code，但我不太确定如何继续设置渐变动画，并在中心创建孔以形成圆环形状。

任何示例代码，指针，建议将不胜感激！谢谢！

Answer 1

一种解决方案是访问java.awt.Graphics2D（也称为Java 2D）并使用RadialGradientPaint。

用于绘制径向渐变的处理example code对于您尝试实现的效果并且可能难以实现的效果来说效率不够。

以下是帮助您入门的简单示例，上下移动鼠标以在startColors和endColors之间进行插值。请务必参阅java文档以获取更多帮助RadialGradient。

import java.awt.Graphics2D;
import java.awt.RadialGradientPaint;
import java.awt.Color;
import java.awt.geom.*;

Graphics2D g2;
Rectangle2D.Double rectangle;

Point2D center;
Point2D focus;
float radius;
float[] dist = { 0.0f, 0.4f, 1.0f };

Color[] gradColors = new Color[dist.length];

Color[] endColors = {
    new Color(254, 189, 75), // yellow
    new Color(255, 98, 43), // red
    new Color(87, 25, 198) // violet
};

Color[] startColors = {
    new Color(232, 185, 71),
    new Color(180, 98, 56),
    new Color(87, 36, 68)
};

void setup() {
  size(300, 600); // make sure NOT to use P2D
  g2 = ((PGraphicsJava2D)g).g2;

  rectangle = new Rectangle2D.Double(0, 0, width, height);
  radius = height;
  center = new Point2D.Float(width/2.0f, height);
  focus = new Point2D.Float(width/2.0f, height);
  updateColors(0);
}

void draw() {
  RadialGradientPaint gradient =
         new RadialGradientPaint(center,
                                 radius, 
                                 focus,
                                 dist, 
                                 gradColors,
                                 RadialGradientPaint.CycleMethod.NO_CYCLE);
  g2.setPaint(gradient);
  g2.fill(rectangle);
}

void mouseMoved() {
  updateColors((float) mouseY / height);
}

void updateColors(double blend) {
  for(int i = 0; i < gradColors.length; i++) {
    gradColors[i] = lerpColor(startColors[i], endColors[i], blend);
  }
}

Color lerpColor(Color color1, Color color2, double blend) {
  double inverseBlend = 1.0 - blend;
  int redPart = (int) (color1.getRed() * blend + color2.getRed() * inverseBlend);
  int greenPart = (int) (color1.getGreen() * blend + color2.getGreen() * inverseBlend);
  int bluePart = (int) (color1.getBlue() * blend + color2.getBlue() * inverseBlend);
  return new Color(redPart, greenPart, bluePart);
}