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.

array Fade
object trail with array
// 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
object trail with fill
// 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);
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: