处理-用鼠标移动混合填充颜色

Question

前几天我看了这个视频，正在尝试复制它的效果。

这很简单，但是我要坚持的是如何使绘制的形状更加模糊，并且像参考一样在它们之间具有平滑的渐变：

https://www.instagram.com/p/B_DjZCro2qm/

Gradient reference

有人知道如何混合圆形颜色以使其看起来更像渐变吗？

PImage img;
int value = 0;
int size = 50;

void setup() {
  size(640, 800);
  frameRate(60);
  img = loadImage("blue.jpg");
  img.resize(width, height);
  background(img);
}

void draw() {
  //get the color at the mouse position
  color c = img.get(mouseX, mouseY);

  //change the fill to that color
  fill(c);
  noStroke();

  //draw a circle with that color when mouse pressed
  if(mousePressed) circle(mouseX, mouseY, size);;
}

Answer 1

正如@laancelot指出的，我需要获得平均颜色！谢谢

color getAverageColor(PImage img) {
  img.loadPixels();
  int r = 0, g = 0, b = 0;
  for (int i=0; i<img.pixels.length; i++) {
    color c = img.pixels[i];
    r += c>>16&0xFF;
    g += c>>8&0xFF;
    b += c&0xFF;
  }
  r /= img.pixels.length;
  g /= img.pixels.length;
  b /= img.pixels.length;
 
  return color(r, g, b);
}