I am very new to Processing. I am trying to visualize tweets over a map and below is what I got so far. Each colored box on the map is a tweet.



I need to visualize the "movement" as well: a person can post a tweet, and then move to different location and post another one, and so on. I would like to show this as an animated trail. The closest I can find is this one. The problem is that the "trail" doesn't work once the map (png file) is added, even I used a buffer as the other posted suggested. Below is the code I used to load the image in draw().

1. PGraphics buffer;
2. PImage vastopolis;
3. int x=0, y=0;
   
4. 
   
5. void setup() {
6.       buffer = createGraphics(IMG_WIDTH, IMG_HEIGHT, P2D);
7.       vastopolis = loadImage(dataPath("Vastopolis_Map.png"));
8. }
9. 
   
10. public void draw() {
11.       // for the "trail" effect        
          fill(0, 0, 0, 10);
          rect(0, 0, IMG_WIDTH, IMG_HEIGHT);
12. 
    
13.       // draw the map
          buffer.beginDraw();     
          buffer.image(vastopolis, 0, 0, IMG_WIDTH, IMG_HEIGHT);
          buffer.endDraw();
          image(buffer, 0, 0);
14.      
    
15.       // draw the tweet rectangle
16.       rect(tweetX+x, tweetY+y, width, height);
17.      
    
18.       // create the "trail" effect
19.       x++;
20.       y++;
21. }
    

Is there any way to do this without have to draw the trail explicitly?