Making a fading trail in processing

Question

I have a circle that is moving across the screen, what i need is to be able to make that circle leave a line behind it that fades after a second or so. I'm using Processing.

Answer 1

Can't speak for its efficiency but I imagine one way to do it would be to keep the old positions in an ArrayList? You can then draw lines between each point, as long as you push the current position each frame and remove the least recent. Hope it helps!

PVector circlePosition;
ArrayList<PVector> circleTrail;
int trailSize = 10;

void setup() {
  size(500, 500);
  circlePosition = new PVector(width*0.5, width*0.5);
  circleTrail = new ArrayList<PVector>();
}

void draw() {
  background(255);
  int trailLength;

  circlePosition = new PVector(mouseX, mouseY);
  circleTrail.add(circlePosition);

  trailLength = circleTrail.size() - 2;
  println(trailLength);

  for (int i = 0; i < trailLength; i++) {
    PVector currentTrail = circleTrail.get(i);
    PVector previousTrail = circleTrail.get(i + 1);

    stroke(0, 255*i/trailLength);
    line(
      currentTrail.x, currentTrail.y,
      previousTrail.x, previousTrail.y
    );
  }

  ellipse(circlePosition.x, circlePosition.y, 10, 10);

  if (trailLength >= trailSize) {
    circleTrail.remove(0);
  }

}

Answer 2

I also can't speak to the efficiency of my method, but the way I've done it is by drawing a rectangle over your entire sketch each time with an also set to a low value (like 25 or so). This results in the objects from previous draw() cycles looking 'faded'. For example:

int i = 0;

void setup(){
  size(500,500);
  smooth();
  noStroke();
  background(255);
}

void draw(){
  fill(255,25);
  rect(0,0,width,height);
  fill(0);
  ellipse(width/2 + i,height/2 + i,50,50);
  delay(100);
  i+=10;
}