Simple object trails in Processing

Two simple methods for a fading trail effect. The first uses an array and draws every object every frame, gradually decreasing each object’s fill opacity. The advantage of this is you can specify how many objects in the trail, and have different length trails for different objects, and no other things on screen are disturbed. The disadvantage is you can see through each object so the overlaps don’t look great.

The second method is much simpler, it just draws a low-opacity rectangle over the entire window every frame, and those layers build over the objects, the longer they’ve been on screen the fainter they get. The advantage is simplicity and only one rect and one object drawn per frame, so the code runs quicker. The disadvantage is everything else you do on screen will fade at the same rate.

// object trail with array
int numShapes = 30;
int currentShape = 0;                   // counter
float[] shapeX = new float[numShapes];  // x coordinates
float[] shapeY = new float[numShapes];  // y coordinates
float[] shapeA = new float[numShapes];  // alpha values
int shapeSize = 50;



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

void draw() {
  background(0);

  shapeX[currentShape] = mouseX;
  shapeY[currentShape] = mouseY;
  shapeA[currentShape] = 255;

  for (int i=0; i<numshapes ; i++) {
    fill(255, shapeA[i]);
    ellipse(shapeX[i], shapeY[i], shapeSize, shapeSize);
    shapeA[i] -= 255/numShapes;
  }

  // increment counter
  currentShape++;
  currentShape %= numShapes;  // rollover counter to 0 when up to numShapes
}

// object trail with fill
int shapeSize = 50;

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

void draw() {
  noStroke();
  fill( 0, 20);  // fill with black, low opacity; builds up over old ellipses
  rect(0, 0, width, height);

  fill(255,255);
  ellipse(mouseX,mouseY, shapeSize,shapeSize);
}