模糊边缘不断恢复100％不透明度（处理中）

Question

我正在尝试通过以下代码在处理中创建带有模糊边缘的圆形笔刷。圆形是逐像素绘制的，因为在实际版本中，我尝试使用从PGraphic pg中获取的像素进行绘制。

PFont font;
PGraphics pg;
int X;
int Y;
int rad = 20;

void setup (){
    size(800, 800, P2D);
    background(0);
    noStroke();

    pg = createGraphics(800, 800, JAVA2D);
    pg.beginDraw();
    pg.fill(255);
    pg.noStroke();
    pg.textFont(font);
    pg.textSize(400);
    pg.pushMatrix();
    pg.translate(width/2, height/2-140);
    pg.textAlign(CENTER, CENTER);
    pg.text("b", 0 , 0);
    pg.popMatrix();
    pg.endDraw();
}

void draw () {
    image(pg,0,0);
}

void mousePressed(){
    X = mouseX;
    Y = mouseY;
}

void mouseDragged(){

    for (int x=0; x<rad; x++) {
        for (int y=0; y<rad; y++) {
        float distance = sqrt(pow(x,2)+pow(y,2));
        float alpha = 255-map(distance,0,rad,0,255);

            if (sqrt(pow(x,2)+pow(y,2)) < rad){
                pg.beginDraw();
                pg.set(mouseX+x,mouseY+y,color(255,255,255, alpha));
                pg.set(mouseX-x,mouseY+y,color(255,255,255, alpha));
                pg.set(mouseX+x,mouseY-y,color(255,255,255, alpha));
                pg.set(mouseX-x,mouseY-y,color(255,255,255, alpha));
                pg.endDraw();
            }
        }
    }
}

Answer 1

添加“ background（0）;”在“ image（pg，0,0）;”之前在您的绘制方法中，这种方式每次都会重置背景，如果不这样做，该程序将继续在彼此的顶部绘制每帧图像，这将使低不透明度像素每帧缓慢获得不透明度，直到达到100 ％

void draw () {
  background(0);
  image(pg,0,0);
}

编辑：测试完代码后，我注意到创建这些圆的方式存在问题，使其运行起来非常慢（每一帧都经过double for循环绘制一个圆），并且还出现了奇怪的黑边问题，因此这是我所做的：

[首先，我使用变量pg并在启动时在其上画了一个圆，然后我声明了另一个PGraphics'pg_all'，在其中每次调用mousedrag方法时都画了一个pg，我在多个背景上对其进行了测试，看起来工作正常，这是最终代码，如果您不了解零件或想要以其他方式进行操作，请告诉我：

PFont font;
PGraphics pg;
PGraphics pg_all;
int X;
int Y;
int rad = 20;

void setup (){
  size(800, 800, P2D);
  background(0);
  noStroke();

  pg_all = createGraphics(800, 800, JAVA2D);
  pg_all.beginDraw();
  pg_all.endDraw();

  pg = createGraphics(800, 800, JAVA2D);
  pg.beginDraw();
  for (int x=0; x<rad; x++) {
    for (int y=0; y<rad; y++) {
      float distance = sqrt(pow(x,2)+pow(y,2));
      float alpha = 255-map(distance,0,rad,0,255);

      if (sqrt(pow(x,2)+pow(y,2)) < rad){
        pg.beginDraw();
        pg.set(20+x,20+y,color(255,255,255, alpha));
        pg.set(20-x,20+y,color(255,255,255, alpha));
        pg.set(20+x,20-y,color(255,255,255, alpha));
        pg.set(20-x,20-y,color(255,255,255, alpha));
        pg.endDraw();
      }
    }
  }
  pg.endDraw();
}

void draw () {   
  background(0);
  image(pg_all,0,0); 
}

void mouseDragged(){
  X = mouseX;
  Y = mouseY;

  pg_all.beginDraw();
  pg_all.image(pg,X-rad,Y-rad);
  pg_all.endDraw();
}

Answer 2

[创建一个将单个点绘制到PGraphics对象的函数：

void DrawPen(PGraphics pg, int cptX, int cptY, int r) {
    pg.beginDraw();
    for (int x=0; x<r; x++) {
        for (int y=0; y<r; y++) {
          float distance = sqrt(pow(x,2)+pow(y,2));
          float alpha = 255-map(distance, 0, r,0,255);
          if (sqrt(pow(x,2)+pow(y,2)) < rad){
              pg.set(cptX+x,cptY+y,color(255,255,255, alpha));
              pg.set(cptX-x,cptY+y,color(255,255,255, alpha));
              pg.set(cptX+x,cptY-y,color(255,255,255, alpha));
              pg.set(cptX-x,cptY-y,color(255,255,255, alpha));
          }
        }
    }
    pg.endDraw();
}

[在PGraphics中的单独的setup对象上画点

PGraphics pg;
PGraphics pg_pen;
int rad = 20;

void setup (){
    size(800, 800, P2D);
    background(0);
    noStroke();

    pg = createGraphics(800, 800, JAVA2D);
    pg.beginDraw();
    // [...]
    pg.endDraw();

    pg_pen = createGraphics(2*rad, 2*rad, JAVA2D);
    pg_pen.beginDraw();
    DrawPen(pg_pen, rad, rad, rad);
    pg_pen.endDraw();
}

拖动鼠标时，将pg_dot混合到公共PGraphics对象（pg）：

void mouseDragged(){
    pg.beginDraw();
    pg.image(pg_pen, mouseX-rad, mouseY-rad);
    pg.endDraw();
}

为了寻求完整性，draw功能：

void draw () {
    background(0); 
    image(pg,0,0);
}