How to make it so mousepressed() only works on a moving shape

Megsyy

Hi I'm fairly new to Processing and at the moment I'm trying to make a mini fishing game. So just to quickly explain the game, each of those boxes will each have a different bit of bait in it. Only certain bait works on certain fish. Eventually I'll have it so over time the amount of fish increases. To select the boxes is Q, W, E and R, respectively.

What I'm stuck on is how to make mousePressed() only work on a particular moving fish (as well as when a certain key is pressed). At the moment I've only gotten it to work when I press anywhere on the screen. I've tried adding mouseX == xPos1 etc to the if statement In the void mousePressed() section. But it doesn't seem to work, and I'm really not sure where to go from there. Any help would be greatly appreciated.

PShape fish1, body1, tail1, eye1, fish2, body2, tail2, eye2, fish3, body3, tail3, eye3, fish4, body4, tail4, eye4;
int xPos1 = 800;
int xPos2 = 800;
int xPos3 = 800;
int xPos4 = 800;
float per1 = sin(radians(10 * frameCount)); 
float per2 = sin(radians(20 * frameCount)); 
float per3 = sin(radians(30 * frameCount)); 
float per4 = sin(radians(frameCount));
float r = random(0, 600);
float yPos1 = random(0, 400);
float yPos2 = random(0, 400);
float yPos3 = random(0, 400);
float yPos4 = random(0, 400);

boolean qPressed = false;
boolean wPressed = false;
boolean ePressed = false;
boolean rPressed = false;

void setup() {
  size(800, 700);
  background(80, 208, 232);
  smooth();
  noStroke();

  //Creating the fish as a group of shapes parented together
  //fish 1
  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 120, 70, 165, 50 + per2, 165, 100 + per2); 
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 100, 70, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, 80, 60, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(body1);
  fish1.addChild(tail1);
  fish1.addChild(eye1);

  //fish 2    
  fish2 = createShape(GROUP);
  tail2 = createShape (TRIANGLE, 150, 70, 165, 40 + per2, 165, 100 + per2);
  tail2.setFill(color(160, 159, 158));
  body2 = createShape (ELLIPSE, 100, 70, 100, 35);
  body2.setFill(color(160, 159, 158));
  eye2 = createShape(ELLIPSE, 70, 65, 10, 10);
  eye2.setFill(color(0));

  fish2.addChild(body2);
  fish2.addChild(tail2);
  fish2.addChild(eye2);

  //fish 3
  fish3 = createShape(GROUP);
  tail3 = createShape (TRIANGLE, 120, 70, 150, 55 + per3, 150, 85 + per3);
  tail3.setFill(color(227, 156, 214));
  body3 = createShape (ELLIPSE, 100, 70, 60, 80);
  body3.setFill(color(227, 156, 214));
  eye3 = createShape (ELLIPSE, 80, 65, 10, 10);
  eye3.setFill(color(0));

  fish3.addChild(body3);
  fish3.addChild(tail3);
  fish3.addChild(eye3);

  //fish 4
  fish4 = createShape(GROUP);
  tail4 = createShape (TRIANGLE, 115, 70, 130, 75+ per3, 130, 65 + per3);
  tail4.setFill(color(195, 247, 234));
  body4 = createShape (ELLIPSE, 100, 70, 40, 20);
  body4.setFill(color(195, 247, 234));
  eye4 = createShape (ELLIPSE, 87, 70, 5, 5);
  eye4.setFill(color(0));

  fish4.addChild(body4);
  fish4.addChild(tail4);
  fish4.addChild(eye4);
}

void draw() {

  //draw a looping fish swimming horizontally across the screen in random y coordinate each time it reaches the end.
  background(80, 208, 232);

  //fish 1 loop
  shape(fish1, xPos1, yPos1);
  xPos1 = xPos1-3;

  if (xPos1<-200) {
    xPos1 = 800;
    yPos1 = random(0, 400);
  } 

  //fish 2 loop
  shape(fish2, xPos2, yPos2);
  xPos2 = xPos2-4;

  if (xPos2<-200) {
    xPos2 = 800;
    yPos2 = random(0, 400);
  }

  //fish 3 loop
  shape(fish3, xPos3, yPos3);
  xPos3 = xPos3-2;

  if (xPos3<-200) {
    xPos3 = 800;
    yPos2 = random(0, 400);
  }

  //fish 4 loop
  shape(fish4, xPos4, yPos4);
  xPos4 = xPos4 - 5;

  if (xPos4<-200) {
    xPos4 = 800;
    yPos4 = random(0, 400);
  }

  //Boxes that have the bait in them
  noFill();
  // Q
  if(qPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(250, 620, 75, 75);

  // W
  if(wPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(330, 620, 75, 75);

  // E
  if(ePressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
    strokeWeight(1);
  }
  rect(410, 620, 75, 75);

  // R
  if(rPressed == true) {
    stroke(203, 0, 0);
    strokeWeight(3);
  } else {
    stroke(1);
   strokeWeight(1);
  }
  rect(490, 620, 75, 75);

}

void keyPressed() {

  //When 'q' or 'Q' key is pressed, the first box will turn red. When another key is pressed it will go back to black.
  if (key == 'q' || key == 'Q') {
    qPressed = true;
    wPressed = false;
    ePressed = false;
    rPressed = false;
  } 

  //When 'w' or 'W' key is pressed, the second box will turn red. When another key is pressed it will go back to black.
  else if (key == 'w' || key == 'W') {
    qPressed = false;
    wPressed = true;
    ePressed = false;
    rPressed = false;
  }

  //When 'e' or 'E' key is pressed, the third box will turn red. When another key is pressed it will go back to black.
  else if (key == 'e' || key == 'E') {
    qPressed = false;
    wPressed = false;
    ePressed = true;
    rPressed = false;
  } 

  //When 'r' or 'R' key is pressed, the fourth box will turn red. When another key is pressed it will go back to black.
  else if (key == 'r' || key == 'R') {
    qPressed = false;
    wPressed = false;
    ePressed = false;
    rPressed = true;
  }  
}

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
  //This is the part I'm stuck on  
 if (qPressed == true){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false){
 shape(fish1, xPos1, yPos1);
 }

}

So at the moment I've got it so for the first fish, it only moves when you pressed 'q' or 'Q' , then click anywhere.

Megsyy

I figured out how to only click the object.

void mousePressed(){
  //When q is pressed (first box selected) and mouse is pressed on fish 1, that fish goes back to the beginning
  //This is the part I'm stuck on  
 if (qPressed == true && dist(xPos1, yPos1, mouseX, mouseY) < 100){
  shape(fish1, xPos1, yPos1);
  xPos1 = 1000;
 }
 else if (qPressed == false && dist(xPos1, yPos1, mouseX, mouseY) < 100){
 shape(fish1, xPos1, yPos1);
 }

}

I've run into another problem though. The clicking point is in front of the fish. As if there's a box in front of it. I'm not quite sure how to center it. I think it's got something to do with shapeMode(CENTER), since it's a custom shape. But I don't know where in the code it should go or if I need to do something else.

kfrajer

Check the following code:

PShape fish1, tail1, body1, eye1;
void setup() {
  size(600, 400);
  shapeMode(CENTER);
  rectMode(CENTER);

  stroke(0);
}

void draw() {
  background(125);

  float per2 = sin(radians(20 * frameCount));


  fish1 = createShape(GROUP);
  tail1 = createShape (TRIANGLE, 120, 70, 165, 50 + per2, 165, 100 + per2);
  tail1.setFill(color(252, 193, 97));
  body1 = createShape (ELLIPSE, 100, 70, 70, 50);
  body1.setFill(color(252, 193, 97));
  eye1 = createShape (ELLIPSE, 80, 60, 10, 10);
  eye1.setFill(color(0));

  fish1.addChild(body1);
  fish1.addChild(tail1);
  fish1.addChild(eye1);

  shape(fish1, mouseX, mouseY);
  pushStyle();
  noFill();
  rect(mouseX, mouseY, 50, 50);
  popStyle();
}

As you see, the reason your fish is off is because you didn't create it in the center of the PShape buffer. In other words, you created your figure off the 0,0 point. You should design your figure around the 0,0 point.

For example, your triangle's x range is between 120 and 165. To set it to the center of the PShape, you need to modify it so it is between -dx and dx where dx=(165-120)/2 so your triangle should be defined instead between -22 to 22. You have to apply the same ide for the y direction and then place the other figures related to these coordinates.

Kf

Megsyy

Ahh that makes sense! Thank you!