How to make an object follow a pathway created by preset lines?

SanchezLeslie

I am making pacman and i used an image(its the pacman maze) as background and i made a pathway out of lines, is there a way to make the pacman object follow the path of lines?

//Here is the code in my void setup and draw tab
    Pacman pac;
    PImage img;
    PImage startscreen;
    float x = 250.0;
    float y = 250.0;
    int direction = 1;
    int direction2 = 0;
    int radius = 15;



    void setup()
    {
      background(0);
      size(723, 800);
      pac = new Pacman(100, 200);
    }

    void draw()
    {
      // startscreen = loadImage("startscreen2.jpg");
      img = loadImage("psb2.jpg");
      stroke(0);
      image(img, 0, 0);
      pac.display();
      render();
      stroke(255);
      strokeWeight(3.0);
      line(40, 40, 40, 225);//pathway
      line(40, 225, 165, 225);//pathway
      line(40, 40, 325, 40);//pathway
      line(165, 40, 165, 685);
      line(165, 685, 40, 685);
      line(40, 685, 40, 755);
      line(40, 755, 690, 755);
      line(690, 755, 690, 685);
      line(690, 685, 560, 685);
      line(560, 685, 560, 40);
      line(400, 40, 690, 40);
      line(400, 40, 400, 145);
      line(690, 40, 690, 145);
      line(690, 145, 40, 145);
      line(325, 40, 325, 145);
      line(245, 145, 245, 225);
      line(245, 225, 320, 225);
      line(320, 225, 320, 300);
      line(250, 300, 480, 300);
      line(250, 300, 250, 375);
      line(480, 300, 480, 375);
      line(480, 375, 800, 375);
      line(250, 375, 0, 375);
      line(250, 375, 250, 525);
      line(40, 525, 320, 525);
      line(40, 525, 40, 610);
      line(320, 525, 320, 610);
      line(320, 610, 165, 610);
      line(40, 610, 90, 610);
      line(90, 610, 90, 685);
      line(320, 610, 560, 610);
      line(475, 610, 475, 685);
      line(475, 685, 405, 685);
      line(405, 685, 405, 755);
      line(320, 755, 320, 680);
      line(320, 680, 250, 680);
      line(250, 680, 250, 610);
      line(400, 610, 400, 525);
      line(400, 525, 680, 525);
      line(680, 525, 680, 610);
      line(680, 610, 630, 610);
      line(630, 610, 630, 685);
      line(480, 375, 480, 525);
      line(480, 455, 250, 455);
      line(400, 300, 400, 225);
      line(400, 225, 480, 225);
      line(480, 225, 480, 145);
      line(690, 145, 690, 220);
      line(690, 220, 560, 220);
    }




    void keyPressed() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
      if (key == CODED) {
        if (keyCode == LEFT) {
          x = x - 10;
          direction = -1;
          direction2 = 0;
        } else if (keyCode == RIGHT) {  
          x = x + 10;
          direction = 1;
          direction2 = 0;
        } else if (keyCode == UP) {
          y = y - 10;
          direction = 0;
          direction2 = -1;
        } else if (keyCode == DOWN) { 
          y = y + 10;
          direction = 0;
          direction2 = 1;
        }
      }
    }


    void render() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
      for ( int i=-1; i < 2; i++) {
        for ( int j=-1; j < 2; j++) {
          pushMatrix();
          translate(x + (i * width), y + (j*height));
          if ( direction == -1) { 
            rotate(PI);
          }
          if ( direction2 == 1) { 
            rotate(HALF_PI);
          }
          if ( direction2 == -1) { 
            rotate( PI + HALF_PI );
          }
          arc(0, 0, radius, radius, map((millis() % 500), 0, 500, 0, 0.52), map((millis() % 500), 0, 500, TWO_PI, 5.76) );
          popMatrix();
          // mouth movement //
        }
      }
    }


//***here is my pacman class
    public class Pacman  
    {
      float x;
      float y;
      int radius = 15;
      int direction = 1;
      int direction2 = 0;

      public Pacman(float xn, float xy)
      {
        x = xn;
        y = xy;
      }

      public void display()
      {
        //yellow circle
        ellipseMode(RADIUS);//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
        smooth();
        noStroke();
        fill(255, 255, 0);
      }
    }

public interface Game
{
  public void move();
}

public class Enemies implements Game 
{
  public void move()
  {
  }

}

public abstract class Item 
{

}

Any help would be great thanks!!

kfrajer

Can you show an example of the image? What are those lines you are calling in lines 30 to 78?

So the idea is that you input an image on your code and somehow you define the lines where pacman can move?

Kf

SanchezLeslie

Sure here's a screenshot and lines 30-78 are the pathway !

SanchezLeslie

yes i use the white lines as a pathway for pacman, I have looked at line intersection, my teacher said to have if pacman touches white keep moving if not pacman cant move, or use a 2D array but im just overall confused on how to do it? I was thinking of having a 2D array that stores every point where lines intersect but i don't know how and im not sure how i could do my teachers idea

jeremydouglass

@SanchezLeslie -- if you are trying to actually read pixels for navigation then:

1. draw your lines onto a PGraphics object -- not onto the screen https://processing.org/reference/PGraphics.html
2. optionally, you may use image(myPGraphics,0,0) to display the lines in draw(); on the screen as well, e.g. for debugging
3. while navigating, check the pixel left, right, up, or down on the PGraphics object. If it is white, move, if not, stop.
4. note that game speed can be contolled by frameRate, however to control the speed of the avatar somewhat independent of the frameRate, consider making all your lines lengths divisible by 8. This allows you to move your avatar at speeds 1, 2, 4, or 8 pixels, by checking pixels that are that distance to the left, right, top, or bottom for a valid motion.

prince_polka

yes i use the white lines as a pathway for pacman, I have looked at line intersection, my teacher said to have if pacman touches white keep moving if not pacman cant move, or use a 2D array but im just overall confused on how to do it? I was thinking of having a 2D array that stores every point where lines intersect but i don't know how and im not sure how i could do my teachers idea

you have 65 intersections and 95 pathways
you could use arrays storing the coordinates of the intersections, what pathway connects to which intersection and make everything fit together
but I think looking at the pixels would be an easier route

SanchezLeslie

@jeremydouglass Thank you so much for your answer!! I have a question about checking the pixels, what would i put when the pixel is not white?

jeremydouglass

@SanchezLeslie --

You can use myPGraphics.get() or myPGraphics.pixels[].

• https://processing.org/reference/get_.html
• https://processing.org/reference/pixels.html
• https://processing.org/reference/PImage_get_.html
• https://processing.org/reference/PImage_pixels.html

So something like this:

color white = color(255,255,255)

color c = get(nextX,nextY);
if(c==white) {
  move(nextX,nextY);
}

SanchezLeslie

@jeremydouglass - so i didnt have a "move" method for pacman so i moved the render and keypressed to the pacman class cause no other object uses that but the check pixels still doesnt work and pacman will keep moving even when I am not pressing the arrow keys. I did the PImages things and as of right now i have the pathway showing so i can see if pacman is actually following the pathway.

public class Pacman  
{
  float x;
  float y;
  int radius = 15;
  int direction = 1;
  int direction2 = 0;

  public Pacman(float xn, float xy)
  {
    x = xn;
    y = xy;
  }

void keyPressed() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
  if (key == CODED) {
    if (keyCode == LEFT) {
      x = x - 5;
      direction = -1;
      direction2 = 0;
    } else if (keyCode == RIGHT) {  
      x = x + 5;
      direction = 1;
      direction2 = 0;
    } else if (keyCode == UP) {
      y = y - 5;
      direction = 0;
      direction2 = -1;
    } else if (keyCode == DOWN) { 
      y = y + 5;
      direction = 0;
      direction2 = 1;
    }
  }
}


  public void render() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
  for ( int i=-1; i < 2; i++) {
    for ( int j=-1; j < 2; j++) {
      pushMatrix();
      translate(x + (i * width), y + (j*height));
      if ( direction == -1) { 
        rotate(PI);
      }
      if ( direction2 == 1) { 
        rotate(HALF_PI);
      }
      if ( direction2 == -1) { 
        rotate( PI + HALF_PI );
      }
      arc(0, 0, radius*2, radius*2, map((millis() % 500), 0, 500, 0, 0.52), map((millis() % 500), 0, 500, TWO_PI, 5.76) );
      popMatrix();
      fill(255, 255, 0);
      // mouth movement //
    }
  }
}

Pacman pac;
PImage img;
PImage startscreen;
float x = 250.0;
float y = 250.0;
int direction = 1;
int direction2 = 0;
int radius = 15;
PGraphics pg;
boolean path = false;

void setup()
{
  background(0);
  size(723, 800);
  pac = new Pacman(100, 200);
  pg = createGraphics(723, 800);
  img = loadImage("psb2.jpg");
}

void draw()
{
  stroke(0);
  image(img, 0, 0);

  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.line(40, 40, 40, 225);//pathway
  pg.line(40, 225, 165, 225);//pathway
  pg.line(40, 40, 325, 40);//pathway
  pg.line(165, 40, 165, 685);
  pg.line(165, 685, 40, 685);
  pg.line(40, 685, 40, 755);
  pg.line(40, 755, 690, 755);
  pg.line(690, 755, 690, 685);
  pg.line(690, 685, 560, 685);
  pg.line(560, 685, 560, 40);
  pg.line(400, 40, 690, 40);
  pg.line(400, 40, 400, 145);
  pg.line(690, 40, 690, 145);
  pg.line(690, 145, 40, 145);
  pg.line(325, 40, 325, 145);
  pg.line(245, 145, 245, 225);
  pg.line(245, 225, 320, 225);
  pg.line(320, 225, 320, 300);
  pg.line(250, 300, 480, 300);
  pg.line(250, 300, 250, 375);
  pg.line(480, 300, 480, 375);
  pg.line(480, 375, 800, 375);
  pg.line(250, 375, 0, 375);
  pg.line(250, 375, 250, 525);
  pg.line(40, 525, 320, 525);
  pg.line(40, 525, 40, 610);
  pg.line(320, 525, 320, 610);
  pg.line(320, 610, 165, 610);
  pg.line(40, 610, 90, 610);
  pg.line(90, 610, 90, 685);
  pg.line(320, 610, 560, 610);
  pg.line(475, 610, 475, 685);
  pg.line(475, 685, 405, 685);
  pg.line(405, 685, 405, 755);
  pg.line(320, 755, 320, 680);
  pg.line(320, 680, 250, 680);
  pg.line(250, 680, 250, 610);
  pg.line(400, 610, 400, 525);
  pg.line(400, 525, 680, 525);
  pg.line(680, 525, 680, 610);
  pg.line(680, 610, 630, 610);
  pg.line(630, 610, 630, 685);
  pg.line(480, 375, 480, 525);
  pg.line(480, 455, 250, 455);
  pg.line(400, 300, 400, 225);
  pg.line(400, 225, 480, 225);
  pg.line(480, 225, 480, 145);
  pg.line(690, 145, 690, 220);
  pg.line(690, 220, 560, 220);
  pg.endDraw();
  image(pg, 0, 0);
pac.keyPressed();
pac.render();
 checkPixels();

}

public void checkPixels()
{
  color white = color(255,255,255);
color c = get(0,0);
if(c==white) {
  pac.keyPressed();
  pac.render();
}
}

jeremydouglass

Your checkPixels is:

1. Using get(), not pg.get() -- so it is checking the screen, not the path buffer
2. Hard coded to check 0,0 -- it should be checking a pixel based on pacman x,y and then offset according to direction.
3. ...and remember, using translate on the screen doesn't mean you also used pg.translate on the buffer frame of reference

SanchezLeslie

@jeremydouglass I am so sorry to keep bugging but thank you for all of your help, I am one of the worst programmers in my class and I figured pacman wouldn't be too bad to make for my final project (spoke too soon ). I have one more question, if translate cant be used with Pgraphics then how can i stop the pacman from keep going?

jeremydouglass

Translate can be used with PGraphics -- pg.translate().

I'm just saying that you using currently translate() changes the screen coordinates, so you can draw pacman at 0,0.

translate(x + (i * width), y + (j*height));

However, it doesn't change the coordinates in pg! So if you use pg.get(0,0), that will get the pixel in the upper left hand corner of the buffer -- not the pixel where pacman currently is. You either need to use:

pg.translate(x,y);
color c = pg.get(0,0);

or:

color c = pg.get(x,y).

SanchezLeslie

  public void checkPixelsPacman()
          {
            color white = color(255, 255, 255);
            color black = color(0,0,0);
            color c = pg.get(x,y);
            if (c==white) {
              pac.keyPressed();
              pac.render();
            }
            else if(c == black)
           {
            pac.render();

           } 
          }

ohh okay so now it can't move because if i called the the keyPressed() then it wont follow the pathway. What can i do to get it back to a white pixel?

jeremydouglass

What can i do to get it back to a white pixel?

1. Start on a white pixel
2. Check if a pixel is white before you move there
3. Or else stop moving.
4. Now you are always already on a white pixel
5. So you never have to "get it back to" a white pixel

Lord_of_the_Galaxy

Will this method work with slanting lines? I'm not sure of it will, since anti-aliasing may reduce the color of the pixels slightly.

jeremydouglass

@Lord_of_the_Galaxy -- you are right, at a certain point (such as working with diagonal lines, or at certain resolutions) you might need to use one or more of these approaches:

1. set pixel values individually rather than using line
2. set a threshold rather than checking for 255
3. just use a simpler 2d bit grid of 1s/0s, rather than a PImage / PGraphics

SanchezLeslie

@jeremydouglass and @Lord_of_the_Galaxy thanks again! i got it to work mostly :) and now I am doing the the dots but when my pacman goes out of the game is gets stuck why is that happening?

public class Pacman extends item
{
  int x;
  int y;
  int radius = 15;
  int direction = 1;
  int direction2 = 0;

  public Pacman(int xn, int yn)
  {
    x = xn;
    y = yn;
  }

  void keyPressed() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
    color white = color(255, 255, 255);
    color black = color(0, 0, 0);
    color c = pg.get(x+1, y);
    color d = pg.get(x, y+1);
    color e = pg.get(x-1, y);
    color f = pg.get(x, y-1);

    if (key == CODED)
    {
      if (e == white)
      {
        if (keyCode == LEFT) 
        {
          x = x - 2;
          direction = -1;
          direction2 = 0;
        }
      } 
      if ( c == white)
      {
        if (keyCode == RIGHT) 
        {  
          x = x + 2;
          direction = 1;
          direction2 = 0;
        }
      } 
       if ( f == white)
      {
         if (keyCode == UP) 
        {
          y = y - 2;
          direction = 0;
          direction2 = -1;
        }
      } 
      if ( d == white)
      {
         if (keyCode == DOWN) 
        { 
          y = y + 2;
          direction = 0;
          direction2 = 1;
        }
      }
    }
    render();
  }


  public void render() {//https://forum.processing.org/two/discussion/1573/spoof-of-pacman-game-for-project
    for ( int i=-1; i < 2; i++) {
      for ( int j=-1; j < 2; j++) {
        pushMatrix();
        translate(x +(i*width), y + (j*height) );
        if ( direction == -1) { 
          rotate(PI);
        }
        if ( direction2 == 1) { 
          rotate(HALF_PI);
        }
        if ( direction2 == -1) { 
          rotate( PI + HALF_PI );
        }

        arc(0, 0, radius*2, radius*2, map((millis() % 500), 0, 500, 0, 0.52), map((millis() % 500), 0, 500, TWO_PI, 5.76) );
        popMatrix();
        fill(255, 255, 0);
        // mouth movement //
      }
    }
  }




  void pacEatsDots()
  {
  }
}

public class Dots  {
  float x, y;
  boolean isVisible;
  Dots(float ix, float iy) {
    x = ix;
    y = iy;
    isVisible = true;
  }
  void display() {
    fill(255,0, 0);
    stroke(255, 255, 0);
    strokeWeight(1);
    ellipse(x,y,10,10);


  }
  void disappear() {
    isVisible = false;
  } 

  //public void setup(
}
ArrayList<Dots> dots = new ArrayList();
 Pacman pac;
PImage img;
PImage startscreen;
PGraphics pg;
boolean path = false;
Dots dot;
void setup()
{
  background(0);
  size(723, 800);
  int y=40;
  int x = 40;
  dot = new Dots(40,430);
  pac = new Pacman(320, 250);
  pg = createGraphics(723, 800);
  img = loadImage("psb2.jpg");
  for(int i =0;i<29;i++)//long line left side
  {
    dots.add(new Dots(165,y)); 
    y+=23;
  }
  for(int j = 0;j<3;j++)
  {
    dots.add(new Dots(40,y-20));
    y+=23;
  }
  for(int i = 0;i<4;i++)
  {
    dots.add(new Dots(x+28,y-90));
    x+=24;
  }
  //for(int i = 0; i<

}



void draw()
{
 stroke(0);
  image(img, 0, 0);
  // dot.display();
  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.strokeWeight(23.0);
  pg.line(40, 40, 40, 225);//pathway
  pg.line(40, 225, 165, 225);//pathway
  pg.line(40, 40, 325, 40);//pathway
  pg.line(165, 40, 165, 685);
  pg.line(165, 685, 40, 685);
  pg.line(40, 685, 40, 755);
  pg.line(40, 755, 690, 755);
  pg.line(690, 755, 690, 685);
  pg.line(690, 685, 560, 685);
  pg.line(560, 685, 560, 40);
  pg.line(400, 40, 690, 40);
  pg.line(400, 40, 400, 145);
  pg.line(690, 40, 690, 145);
  pg.line(690, 145, 40, 145);
  pg.line(325, 40, 325, 145);
  pg.line(245, 145, 245, 225);
  pg.line(245, 225, 320, 225);
  pg.line(320, 225, 320, 300);
  pg.line(250, 300, 480, 300);
  pg.line(250, 300, 250, 375);
  pg.line(480, 300, 480, 375);
  pg.line(480, 375, 800, 375);
  pg.line(250, 375, 0, 375);
  pg.line(250, 375, 250, 525);
  pg.line(40, 525, 320, 525);
  pg.line(40, 525, 40, 610);
  pg.line(320, 525, 320, 610);
  pg.line(320, 610, 165, 610);
  pg.line(40, 610, 90, 610);
  pg.line(90, 610, 90, 685);
  pg.line(320, 610, 560, 610);
  pg.line(475, 610, 475, 685);
  pg.line(475, 685, 405, 685);
  pg.line(405, 685, 405, 755);
  pg.line(320, 755, 320, 680);
  pg.line(320, 680, 250, 680);
  pg.line(250, 680, 250, 610);
  pg.line(400, 610, 400, 525);
  pg.line(400, 525, 680, 525);
  pg.line(680, 525, 680, 610);
  pg.line(680, 610, 630, 610);
  pg.line(630, 610, 630, 685);
  pg.line(480, 375, 480, 525);
  pg.line(480, 455, 250, 455);
  pg.line(400, 300, 400, 225);
  pg.line(400, 225, 480, 225);
  pg.line(480, 225, 480, 145);
  pg.line(690, 145, 690, 220);
  pg.line(690, 220, 560, 220);
  pg.endDraw();
 //image(pg, 0, 0);
 for(int i =0;i<dots.size();i++)
  {
    dots.get(i).display();
  }
for(int j =0;j<dots.size();j++)
  {
    dots.get(j).display();
  }
  for(int i =0;i<dots.size();i++)
  {
    dots.get(i).display();
  }

pac.keyPressed();

}