I need to animate an icon to move from point A to B, then from B to C, but I can't seem to figure out how to do that.  I mean I can do it with basic shapes this way:

Code:

int count1,count2;

void setup(){
  size(500,500); 
  frameRate(5);
  background(0);
}

void draw(){
  count1++;
  if(count1 < 50){
    background(0);
    ellipse(0+count1, 0+count1, 10,10);
    //count1++;
  }
  println(count1);
  if(count1 >= 50 && count1 < 100){
   background(0);
   ellipse(50-count2, 50+count2, 10,10);
   count2++; 
  }
}
 

But the problem with that is that it's technically a new ellipse when it makes that turn when count1 >= 50.  What I need is the ellipse (or an icon in my case) to remain the same one.  I was hoping I could get this to work in conjunction to what PhiLho showed me here where the icons move consecutively one after the other.  Any help is very much appreciated.

Not sure this is how I'd handle this normally - it doesn't seem very fluid [edit: just noticed the framerate!  If you want to slow down motion reducing the framerate is not necessarily the way to go] - but anyway...  Why not use variables for the x,y coordinates of your ellipse (or image) and adjust those in the conditions (or better still define your icon as a class with x and y coordinates and adjust these).  Then you only draw the 'same' ellipse.

[Though to be pedantic in real terms you never draw the 'same' shape/image each frame: background clears the sketch completely and a new shape/image is drawn in its place...  It just happens quickly enough that it looks like the same one.]

Code:

int count1;
int x,y;

void setup(){
  size(500,500); 
  frameRate(5);
  background(0);
  x = 0;
  y=0;
}

void draw(){
  background(0);    
  count1++;
  
  if(count1 < 50){
    x++;
    y++;
  }
  if(count1 >= 50 && count1 < 100){
    x--;
    y++;
  }
  
  ellipse(x, y, 10,10);
} 

I see someone has suggested bezierPoint - might be worth giving a go - though if you're just interested in motion in a straight line you might want to look into 'easing' techniques: that should produce a more fluid motion.

Hey blindfish, thanks for those suggestions, but I'm having a hard time incorporating that into the code I have now since I've been doing it kind of differently.  I don't need the easing (although it does make it look nice).  For my code, the parts with the if statements that look like this "if(pos[id] <195)" is how far the icons end up traveling.  Anywho, maybe you can give me a few pointers on what I have so far?

Also, I was trying the bezierPoints and stuff and that looks like it would be a lot more complicated to implement in what I currently have?  But maybe I'm wrong?

Code:

/*************************************
 * DRAW
 *************************************/
void draw(){
  background(mapLayer1);

  strokeWeight(3);
  stroke(0,0,255, 70);
  line(638,183,231,221);
  line(231,221,143,370);
  
  if(count1 == 120){
    count1 = 0;
  }
  if(count2 == 310){
    count2 = 0; 
  }
  if(count3 == 450){
    count3 = 0; 
  }

  if(millis() - begin > 1000) {
    pos[runnerNb++] = startPos;
    if(runnerNb == locs.length){
      runnerNb = 0;
    }
    begin = millis(); 
  }

  for(int i = 0; i < runnerNb; i++){

    DrawIcon(i);
    pos[i] += step;
  }

}
///////////////////////////////////////////////////////  DRAWICON
void DrawIcon(int id){
  String test2 = tests3Letters[id];
  
  if(locs[id].equals("nca")){
    if(pos[id] <195){
      if(test2.equals("clus")){
        image(file1, 545-(pos[id]*2.1), 168+(pos[id]));
      }
      else if(test2.equals("grid")){
        image(file2, 545-(pos[id]*2.1), 168+(pos[id]));
      }
    }
  }
  if(locs[id].equals("tac")){
    if(pos[id] < 383){
      if(test2.equals("clus")){
        image(file1, 558-(pos[id]*1.1), 425-(pos[id]/6));
      }
      else if(test2.equals("grid")){
        image(file2, 558-(pos[id]*1.1), 425-(pos[id]/6));
      }
      else if(test2.equals("data")){
        image(file3, 558-(pos[id]*1.1), 425-(pos[id]/6));
      }
    }
  }
  if(locs[id].equals("ncs")){
    if(pos[id] < 527){
      if(test2.equals("clus")){
        image(file1, 715-(pos[id]*1.1), 182+(pos[id]/2.9));
      }
      if(test2.equals("grid")){
        image(file2, 715-(pos[id]*1.1), 182+(pos[id]/2.9));
      }
      if(test2.equals("data")){
        image(file3, 715-(pos[id]*1.1), 182+(pos[id]/2.9));
      }
    }
  }
  if(locs[id].equals("ind")){
    if(pos[id] < 550){
      if(test2.equals("clus")){
        image(file1, 730-(pos[id]*1.1), 200+(pos[id]/3.5));
      }
      if(test2.equals("grid")){
        image(file2, 740-(pos[id]*1.1), 210+(pos[id]/3.5));
      }
    }
  }
  if(locs[id].equals("anl") || locs[id].equals("rep")){
    if(pos[id] < 450){
      if(test2.equals("clus")){
        image(file1, 720-(pos[id]*1.1), 164+(pos[id]/9));
      }
      if(test2.equals("grid")){
        image(file2, 720-(pos[id]*1.1), 164+(pos[id]/9));
      }
      if(test2.equals("data")){
        image(file3, 720-(pos[id]*1.1), 164+(pos[id]/9));
      }
      if(test2.equals("netw")){
        image(file3, 720-(pos[id]*1.1), 164+(pos[id]/9));
      }
    }
  }
}