I am currently working on creating a kind of drawing tool with processing, in which black ellipses are drawn with the mouse pointer, which after some time fade away completely to white - i.e. are no longer visible. The whole thing could look like a kind of finger pressure sensor... I already had a first approach which can be found here. In the second approach (see code below) I used an ArrayList for the ellipses, in connection with PVector - to avoid that all ellipses fade away at the same time, I thought it was necessary to consider the single ellipse as an object, in which the fading away (with lerpColor) is contained. I still can't get it to work, that "the foremost" ellipse at the mouse pointer always stays black, and further back the ellipses fade away... So, that just every single ellipse fades away separately... What am I missing? Or have I perhaps twisted something in the code? Do I need objects for this?

float counter;

ArrayList<PVector> positionsList;

Brush myBrush;

void setup() {
  size(600, 600);
  positionsList = new ArrayList<PVector>();

}


void draw() {
  background(255);
    for (PVector p : positionsList) {
  color from = color(0);
  color to = color(255);
  color faded = lerpColor(from, to, counter);
  myBrush = new Brush(faded, p.x, p.y); 
  myBrush.display();
  
}

     positionsList.add(new PVector(mouseX, mouseY));
    }

class Brush {
  color tempC;
  float xpos;
  float ypos;
  color c;

  Brush(color tempC, float tempXpos, float tempYpos) {
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
  }
  void display() {
    noStroke();
    fill(c);
    ellipse(xpos, ypos, 50, 50);
    counter = counter   0.01;
  }
}

CodePudding user response：

There are a few problems in your code:

1. counter is global. So every brushstroke shares the same counter, meaning that:

1-1. all the ellipses will have the same color,

1-2. counter = counter 0.01 is being calculated on the same variable, making it fade away super quickly.

2. color and tempC are a bit ambiguous in Brush. The class variable tempC is declared but unused, while you take another tempC as an argument.

3. The value of c in Brush.display > fill(c) never changes. Once you take tempC as the argument, its value used never changes.

I fixed those problems below:

ArrayList<Brush> brushList;

void setup() {
    size(600, 600);
    brushList = new ArrayList<Brush>();
    
}


void draw() {
    background(255);
    
    float counter = 0;
    
    for (Brush brush : brushList) {
        brush.display();
    }
    
    brushList.add(new Brush(mouseX, mouseY));
}


class Brush {
    float xpos;
    float ypos;
    float counter;
    
    Brush(float tempXpos, float tempYpos) {
        xpos = tempXpos;
        ypos = tempYpos;
        counter = 0;
    }
    void display() {
        noStroke();
        fill(lerpColor(color(0), color(255), counter));
        ellipse(xpos, ypos, 50, 50);
        counter = counter   0.01;
    }
}