Interacting Objects (P3)

Processing Coding Questions
1

Hi everyone.

I am trying to build up a little game: a labyrinth in which two images move (both make the same move with the same input keyCode). I did make the labyrinth, uploaded the images and created the “joypad”. Now, what I need to do, is:

  1. Say “when the image gets to the border of the window do not process the input keyCode you’ve got”
  2. Say “when the image touch a wall of the labyrinth (line) don’t process the input keyCode you’ve got”

I am kinda struggling here. I know I need to create (for the second topic) a boolean cicle which says basically “when image and line overlap, don’t move”, but I don’t really know how…

here’s the code (kinda long):
*notes are in Italian, but really not about the code, more about where I put the stuff

Labirinto l;

PImage lab; // labirinto
PImage a; // ciliegio
PImage c; // coppia
PImage v; // varja

void setup() {
  size(500, 500);
  
  l = new Labirinto();
  
  //lab = loadImage("lab_10_1.gif");
  a = loadImage("th.jpeg");
  c = loadImage("Chair-PNG-Picture.png");
  v = loadImage("Volcano-Free-PNG-Image.png");
  
} // end setup

void draw() {
  // background(lab);
  background(0);
  
  stroke(255);
  strokeWeight(2);
  l.display();
  
  image(a, 0, 0, 50, 50); // ciliegio
  image(c, imgCx, imgCy, 50, 50); // coppia
  image(v, imgVx, imgVy, 50, 50); // varja
  
} // end draw

//------------------------------------------------------------------------------------------

float imgCx = 450; // coppia posizione iniziale asse X
float imgCy = 450; // coppia posizione iniziale asse Y
float imgVx = 300; // varja posizione iniziale asse X
float imgVy = 450; // varja posizione iniziale asse Y

void keyPressed() {
  if (key == CODED) {
  
    if (keyCode == UP) {
      imgCx = imgCx;
      imgCy = imgCy -50;
      
      imgVx = imgVx;
      imgVy = imgVy -50;
    } // end if UP
    
    else if (keyCode == DOWN) {
      imgCx = imgCx;
      imgCy = imgCy +50;
      
      imgVx = imgVx;
      imgVy = imgVy +50;
    } // end else if DOWN
    
    else if (keyCode == RIGHT) {
      imgCx = imgCx +50;
      imgCy = imgCy;
      
      imgVx = imgVx +50;
      imgVy = imgVy;
    } // end else if RIGHT
    
    else if (keyCode == LEFT) {
      imgCx = imgCx -50;
      imgCy = imgCy;
      
      imgVx = imgVx -50;
      imgVy = imgVy;
    } // end else if LEFT
    
  } // end if CODED 
} // end keyPressed

// ----------------------------------------------------------------------------------------

class Labirinto {

  void display() {
    
    // verticali (dx-sx)
    line(100, 500, 100, 450); // primo livello
    line(250, 500, 250, 400); // primo + secondo livello
    line(350, 500, 350, 450); // primo livello
    line(150, 450, 150, 400); // secondo livello
    line(300, 450, 300, 350); // secondo + terzo livello
    line(400, 450, 400, 350); // secondo + terzo livello
    line(450, 450, 450, 400); // secondo livello
    line(50, 400, 50, 350); // terzo livello
    line(200, 400, 200, 250); // terzo + quarto + quinto livello
    line(100, 350, 100, 250); // quarto + quinto livello
    line(350, 350, 350, 300 ); // quarto livello
    line(150, 300, 150, 200); // quinto livello
    line(250, 300, 250, 200); // quinto livello
    line(300, 300, 300, 250); // quinto livello
    line(50, 250, 50, 200); // sesto livello
    line(350, 250, 350, 200); // sesto livello
    line(450, 250, 450, 200); // sesto livello
    line(100, 200, 100, 150); // settimo livello
    line(200, 200, 200, 100); // settimo + ottavo livello
    line(300, 150, 300, 100); // ottavo livello
    line(400, 150, 400, 0); // ottavo + nono + decimo livello
    line(50, 100, 50, 50); // nono livello
    line(250, 100, 250, 50); // nono livello
    line(450, 100, 450, 50); // nono livello
    
    // orizzontali (u-d)
    line(0, 150, 100, 150); // prima + seconda colonna
    line(0, 350, 50, 350); // prima
    line(50, 50, 350, 50); // prima + seconda + terza + quarta + quinta + sesta colonna
    line(50, 100, 150, 100); // seconda + terza colonna
    line(50, 250, 100, 250); // seconda colonna
    line(50, 300, 100, 300); // seconda colonna
    line(50, 400, 150, 400); // seconda + terza colonna
    line(50, 450, 100, 450); // seconda colonna
    line(100, 200, 200, 200); // terza + quarta colonna
    line(100, 350, 200, 350); // terza + quarta colonna
    line(150, 150, 250, 150); // quarta + quinta colonna
    line(150, 450, 200, 450); // quarta colonna
    line(200, 300, 250, 300); // quinta colonna
    line(200, 400, 250, 400); // quinta colonna
    line(250, 100, 400, 100); // sesta + settima + ottava colonna
    line(250, 200, 300, 200); // sesta colonna
    line(250, 350, 350, 350); // sesta + settima colonna
    line(300, 150, 350, 150); // settima colonna
    line(300, 250, 400, 250); // settima + ottava colonna
    line(300, 450, 350, 450); // settima colonna
    line(350, 200, 500, 200); // ottava + nona + decima colonna
    line(350, 400, 400, 400); // ottava colonna
    line(400, 150, 450, 150); // nona colonna
    line(400, 300, 500, 300); // nona + decima colonna
    line(400, 350, 500, 350); // nona + decima colonna
    line(400, 450, 450, 450); // nona colonna
    line(450, 100, 500, 100); // decima colonna
  
  } // end display
}
1 Like
2

It depends where you are taking the starting x and y positions from for the image. Providing that the image is square you can calculate, the starting y and its distance to the edge of the screen and the starting x and its distance to the edge of the screen, when the distance is >= 0 the image has reached the edge. This will trigger an even through a boolean or a toggle, which controls whether or not the program will accept inputs.

3

or just for the border check, not check, just limit:

int w = 50;

void keyPressed() {
  if      (keyCode == UP)     imgCy -= w;
  else if (key == 'w')        imgVy -= w;
  else if (keyCode == DOWN)   imgCy += w;
  else if (key == 's')        imgVy += w;
  else if (keyCode == RIGHT)  imgCx += w;
  else if (key == 'd')        imgVx += w;
  else if (keyCode == LEFT)   imgCx -= w;
  else if (key == 'a')        imgVx -= w;
  //limit
  imgCx = constrain(imgCx, 0, width-w);
  imgCy = constrain(imgCy, 0, height-w);
  imgVx = constrain(imgVx, 0, width-w);
  imgVy = constrain(imgVy, 0, height-w);
} // end keyPressed

but with the lines is the real COLLISION JOB
lucky you have the easy grid thinking.

but before we go on,
you need to repair / format your code
please use the

</> button from edit menu

and paste your code into the
```
type or paste code here
```

also we would like to test / run / see your code,
for that we would need your picture files,
OR
make a easy version where you // all picture things
and use walker like

//  image(a, 0, 0, 50, 50); // ciliegio
//  image(c, imgCx, imgCy, 50, 50); // coppia
  circle(imgCx, imgCy, 50 );
//  image(v, imgVx, imgVy, 50, 50); // varja
  circle(imgVx, imgVy, 50 );
3 Likes
4

Hi, thank you so much for the answer!

5

I formatted the code below, changing the images too. I hope it can work now. Also, for the keyPressed void, imgC and imgV must move the same way (when I say UP, both go UP.) The trick is (apart from the collision with the walls) to tell them “if I say UP: if imgC does not collide, go UP; if imgV collide, don’t move.” This way, they will both move, but the user will have the feeling that is controlling only imgC, because imgV won’t always follow the order and “move autonomously”. That’s also why walls are fundamental: they will control the movement of the imgV.

I first thought to give the user the option to chose where to make imgV start (3 choices; one would stay out of the way of imgC, one would almost catch him and the third would certainly catch him), but I have no idea how and wanted to simplify. Now my “only” problem is really creating those walls and making them stop unwanted movement.
(Apart from the collision code, how do I even tell him to “stop” the input? :thinking:)

Labirinto l;

PImage lab; // labirinto
PImage a; // ciliegio
PImage c; // coppia
PImage v; // varja

void setup() {
  size(500, 500);
  
  l = new Labirinto();
  
  //lab = loadImage("lab_10_1.gif");
  a = loadImage("th.jpeg");
  c = loadImage("Chair-PNG-Picture.png");
  v = loadImage("Volcano-Free-PNG-Image.png");
  
} // end setup

void draw() {
  // background(lab);
  background(0);
  
  stroke(255);
  strokeWeight(2);
  l.display();
  
 //  image(a, 0, 0, 50, 50); // ciliegio
  fill(255);
  rect(0, 0, 50, 50);
//  image(c, imgCx, imgCy, 50, 50); // coppia
fill(0, 255, 0);  
circle(imgCx, imgCy, 50 );
//  image(v, imgVx, imgVy, 50, 50); // varja
fill(255, 0, 0);
  circle(imgVx, imgVy, 50 );
  
} // end draw

// --------------------------------------------------------------------------

float imgCx = 450; // coppia posizione iniziale asse X
float imgCy = 450; // coppia posizione iniziale asse Y
float imgVx = 300; // varja posizione iniziale asse X
float imgVy = 450; // varja posizione iniziale asse Y

void keyPressed() {
  if (key == CODED) {
  
    if (keyCode == UP) {
      
      imgCy = imgCy -50;
      
      imgVy = imgVy -50;
    } // end if UP
    
    else if (keyCode == DOWN) {
      
      imgCy = imgCy +50;
   
      imgVy = imgVy +50;
    } // end else if DOWN
    
    else if (keyCode == RIGHT) {
      imgCx = imgCx +50;
     
      imgVx = imgVx +50;
    } // end else if RIGHT
    
    else if (keyCode == LEFT) {
      imgCx = imgCx -50;
     
      imgVx = imgVx -50;
    } // end else if LEFT
    
  } // end if CODED 
} // end keyPressed

// --------------------------------------------------------------------

class Labirinto {

  void display() {
    
    // verticali (dx-sx)
    line(100, 500, 100, 450); // primo livello
    line(250, 500, 250, 400); // primo + secondo livello
    line(350, 500, 350, 450); // primo livello
    line(150, 450, 150, 400); // secondo livello
    line(300, 450, 300, 350); // secondo + terzo livello
    line(400, 450, 400, 350); // secondo + terzo livello
    line(450, 450, 450, 400); // secondo livello
    line(50, 400, 50, 350); // terzo livello
    line(200, 400, 200, 250); // terzo + quarto + quinto livello
    line(100, 350, 100, 250); // quarto + quinto livello
    line(350, 350, 350, 300 ); // quarto livello
    line(150, 300, 150, 200); // quinto livello
    line(250, 300, 250, 200); // quinto livello
    line(300, 300, 300, 250); // quinto livello
    line(50, 250, 50, 200); // sesto livello
    line(350, 250, 350, 200); // sesto livello
    line(450, 250, 450, 200); // sesto livello
    line(100, 200, 100, 150); // settimo livello
    line(200, 200, 200, 100); // settimo + ottavo livello
    line(300, 150, 300, 100); // ottavo livello
    line(400, 150, 400, 0); // ottavo + nono + decimo livello
    line(50, 100, 50, 50); // nono livello
    line(250, 100, 250, 50); // nono livello
    line(450, 100, 450, 50); // nono livello
    
    // orizzontali (u-d)
    line(0, 150, 100, 150); // prima + seconda colonna
    line(0, 350, 50, 350); // prima
    line(50, 50, 350, 50); // prima + seconda + terza + quarta + quinta + sesta colonna
    line(50, 100, 150, 100); // seconda + terza colonna
    line(50, 250, 100, 250); // seconda colonna
    line(50, 300, 100, 300); // seconda colonna
    line(50, 400, 150, 400); // seconda + terza colonna
    line(50, 450, 100, 450); // seconda colonna
    line(100, 200, 200, 200); // terza + quarta colonna
    line(100, 350, 200, 350); // terza + quarta colonna
    line(150, 150, 250, 150); // quarta + quinta colonna
    line(150, 450, 200, 450); // quarta colonna
    line(200, 300, 250, 300); // quinta colonna
    line(200, 400, 250, 400); // quinta colonna
    line(250, 100, 400, 100); // sesta + settima + ottava colonna
    line(250, 200, 300, 200); // sesta colonna
    line(250, 350, 350, 350); // sesta + settima colonna
    line(300, 150, 350, 150); // settima colonna
    line(300, 250, 400, 250); // settima + ottava colonna
    line(300, 450, 350, 450); // settima colonna
    line(350, 200, 500, 200); // ottava + nona + decima colonna
    line(350, 400, 400, 400); // ottava colonna
    line(400, 150, 450, 150); // nona colonna
    line(400, 300, 500, 300); // nona + decima colonna
    line(400, 350, 500, 350); // nona + decima colonna
    line(400, 450, 450, 450); // nona colonna
    line(450, 100, 500, 100); // decima colonna
  
  } // end display
}
1 Like