Search code examples
javaarraysoopprocessingblending

Why does this processing code creates diminishing trail?

I am learning java through Processing.

The code does the following.

1) Setup is called and the window of size 700,300 is initialized.

2) A number of spots are initialized using the for loop in setup and the random velocities are given.

3) The draw function is automatically called. It is a looping function. It is called again and again. It fills the space with a black rectangle each time and draws all the circle along with updating their positions.

4) Since the rect() command clears the screen each time the draw() is called, It must show only one particle and no trails. But it does.

I came across one of the tutorials and the code is as follows

Spot[] spots; // Declare array
void setup() {
  size(700, 100);
  int numSpots = 70; // Number of objects
  int dia = width/numSpots; // Calculate diameter
  spots = new Spot[numSpots]; // Create array
  for (int i = 0; i < spots.length; i++) {
    float x = dia/2 + i*dia;
    float rate = random(0.1, 2.0);
    // Create each object
    spots[i] = new Spot(x, 50, dia, rate);
  }
  noStroke();
}
void draw() {
  fill(0, 12);
  rect(0, 0, width, height);
  fill(255);
  for (int i=0; i < spots.length; i++) {
    spots[i].move(); // Move each object
    spots[i].display(); // Display each object
  }
}
class Spot {
  float x, y;         // X-coordinate, y-coordinate
  float diameter;     // Diameter of the circle
  float speed;        // Distance moved each frame
  int direction = 1;  // Direction of motion (1 is down, -1 is up)

  // Constructor
  Spot(float xpos, float ypos, float dia, float sp) {
    x = xpos;
    y = ypos;
    diameter = dia;
    speed = sp;
  }

  void move() {
    y += (speed * direction); 
    if ((y > (height - diameter/2)) || (y < diameter/2)) { 
      direction *= -1; 
    } 
  }

  void display() {
    ellipse(x, y, diameter, diameter);
  }
}

It produces this output:

enter image description here

I don't understand why it would create those trails and those trails would just disappear. Intutively, only a single point should be visible, owing to 

for (int i=0; i < spots.length; i++) {
spots[i].move(); // Move each object
spots[i].display(); // Display each object
}

Please point me to the line of code that makes that happen? I have no clue.

Reference: https://processing.org/tutorials/arrays/ @ Arrays: Casey Reas and Ben Fry

Solution

  • The sceen is never cleared, so the spots which have been drawn in the previous frames are still there when new spots are added to the scene in a new frame.

    The instructions

    fill(0, 12);
rect(0, 0, width, height);

    draw a transparent black rectangle on the entire view. So the spots of the previous frames seem to fade out by time. Since "older" spots have been covered by the transparent rectangle for may times, they become dark gray. "Younger" spots are just covered a few times and appear light gray. The spots which have been draw immediately are white, because of the white fill color (fill(255);)

    If you increase the alpha value of the blended rectangle, then the spots will "disappear" faster and their "tail" will be shorter.

    e.g.

    fill(0, 50);