Identical Paths

Notes

The object will follow where you point.

In the Multiple Followers example, you may have noticed that the followers don't move very organicallyt when they cross paths or making tight turns. They behave sort of like a chain lying on the ground. This example addresses that by recording a path history for each Follower. Each follower will use the history to follow exactly the same path as its target.

Source

/* @pjs preload="player.png"; */

PImage player;

Follower[] followers;
int NUMBER_OF_FOLLOWERS = 10;

// Setup the example
void setup(){
  size(640, 480);
  
  imageMode(CENTER);
  
  // Load images
  player = loadImage("player.png");
  
  // Create 5 followers, each one following the one ahead of it
  // The first one will follow the mouse pointer
  followers = new Follower[NUMBER_OF_FOLLOWERS];
  Follower lastFollower = null;
  for(int i = 0; i < followers.length; i++){
    followers[i] = new Follower(player, width/2 + i * 32, height/2, lastFollower);
    lastFollower = followers[i];
  }
}

void draw(){
  background(#4488cc);
  
  for(Follower f : followers){
    f.display();
  }
}

class Follower{
  // Save the target that this Follower will follow
  Follower other;
  PImage img;
  float follower_x;
  float follower_y;
  float velocity_x;
  float velocity_y;
  
  // Define constants that affect motion
  float MAX_SPEED = 4;
  float MIN_DISTANCE = 48;
  
  // Each Follower will record its position history in
  // an list of point objects (objects with x,y members)
  // This will be used to make each Follower follow the
  // same track as its target
  int HISTORY_LENGTH = 5;
  ArrayList history;
  
  // Follower constructor
  Follower(PImage img, int x, int y, Follower other){
    this.img = img;
    follower_x = x;
    follower_y = y;
    this.other = other;
    history = new ArrayList();
  }
  
  void display(){
    // Get the target x and y position.
    //
    // This algorithm will follow targets that may or may not have a position
    // history.
    //
    // The targetMoving flag tells this object when its target is moving
    // so that it knows when to move and when to stop.
    PVector t = new PVector(mouseX, mouseY);
    boolean targetMoving = false;
    if(other != null){
      if(other.history.size() > 0){
        // This target has a history so go towards that
        t = other.history.get(0);
        if(other.velocity_x != 0 || other.velocity_y != 0){
          targetMoving = true;
        }
      }else{
          // This target doesn't have a history defined so just
          // follow its current x and y position
          t.x = other.follower_x;
          t.y = other.follower_y;
          
          // Calculate distance to target
          // If the position is far enough way then consider it "moving"
          // so that we can get this Follower to move.
          float distance = dist(follower_x, follower_y, t.x, t.y);
          if(distance > MIN_DISTANCE) targetMoving = true;
      }
    }else{
      float distance = dist(follower_x, follower_y, t.x, t.y);
      if(distance > MIN_DISTANCE) targetMoving = true;
    }
    
    if(targetMoving){
       // Add current position to the end of the history array
      history.add(new PVector(follower_x, follower_y));
      
      // If the length of the history array is over a certain size
        // then remove the oldest (first) element
      if(history.size() > HISTORY_LENGTH){
        history.remove(0);
      }
      
      // Calculate the angle to the target
      float rotation = atan2(t.y - follower_y, t.x - follower_x);
      
      // Calculate velocity vector based on rotation and this.MAX_SPEED
      velocity_x = cos(rotation) * MAX_SPEED;
      velocity_y = sin(rotation) * MAX_SPEED;
      
    }else{
      velocity_x = velocity_y = 0;
    }
    
    follower_x += velocity_x;
    follower_y += velocity_y;
    
    image(img, follower_x, follower_y);
  }
}