First off, sorry if I posted this is in the wrong place.

So here's the basicsof my project I'm working on:

I'm parsing in a .log file with three type of info (time, location, test) and so I'm trying to create a map with little icons flying to and from each location.

So far I can make one file go from one place to another and loop.  But when I try to do two icons moving, it starts at the same time so they overlap.  So my problem is that I want to give each icon its own timing so that they'd start a few milliseconds apart and thus won't overlap.  I can't seem to do that without changing the entire frameSpeed of the project though.

Here's my messy code that I've chugged out until I hit my roadblock; it may or may not help.

Code:

PImage mapLayer1, mapLayer2, mapLayer3, file1, file2;
String lines[];
String items[];
String time, loc, test;
boolean start = true;
boolean mapIn = false;
int frame, count1;
String test1, test2, test3;

void setup(){
  size(1000,527); 
  lines = loadStrings("live.log");
  smooth();
  frameRate(10 );
  file1 = loadImage("file.png");
  file2 = loadImage("file2.png");


  for(int i = 0; i < lines.length; i++){
    String data = join(lines, " ");      //CONCAT THE 27 STRING ELEMENTS INTO ONE STRING
    items = split(data, " ");   //SPLIT THE STRING INTO ONE ARRAY
  }

  if(start == true){
    mapLayer1 = loadImage("scc1.png");
    background(mapLayer1);
    start = false;  
  }
}

void draw(){
  frame++;
  background(mapLayer1);

  if(count1 == 120){
    count1 = 0;
  }

  for(int z=2; z <= 83; z+=3){
    test = items[z];

    if(count1 <= 120){
      if(test.equals("cluster")){
        //ellipse(385-(count1*2.05), 255+(count1), 10,10); 
        frameRate(10); 
        image(file1, 382-(count1*2.1), 248+(count1));
        count1++;
      }
      else if(test.equals("grid")){
        image(file2, 382-(count1*2.1), 248+(count1));
        count1++;
      }
    }
  }
}
 

I hope that makes sense.  I would very much appreciate any and all help you can provide me with.  Thanks in advance.

Deleted!  It gave me a few errors when I tried to submit the first time, and I didn't know if it went through.

So essentially what I'm trying to do is get one icons constantly going from one point to the other.  It will look something like a pulse; one icons leaves and then midway through its path from A to B, another icon leaves from A, then midway through that path, another one leaves, etc.

Ideally the rate of these icons leaving point A will depend on the data in the file, but for now I'm just trying to make something work.

I totally forgot I asked this.  Thank you for that!  That was exactly the type of thing I was looking for.

If your source isn't too big, you should post it (or a simplified version, so we can run it), so we can see what goes wrong.

First remark: you increment i twice in posx/posy... If you fix that and add noFill() before the bezier() call, it is already greatly improved.
Code:

  if(millis() - start > 100){
    posx[i] = px;
    posy[i] = py;
    if(++i == stuff.length-1) i=0;
    start = millis();
  }
 

But well, it can be better.
I add:
float[] counts = new float[stuff.length];
at the start.
And I rewrite draw():
Code:

void draw(){
  background(255);
  stroke(0);
  noFill();
  bezier(350, 10, 80, 5, 80, 75, 10, 350);
  
  if(millis() - start > 1000) {
    // Another one starting at the initial point
    posx[i] = 350;
    posy[i] = 10;
    counts[i] = 0;
    if (i < stuff.length - 1) i++;
    start = millis();
  }
  for(int k = 0; k < i; k++) {
    DrawIcon(k);

    counts[k] += 0.01;
    if (counts[k] >= 1) counts[k] = 0;
    px = bezierPoint(350, 80, 80, 10, counts[k]);
    py = bezierPoint(10, 5, 75, 350, counts[k]);
    posx[k] = px;
    posy[k] = py;
  }
}