# \[Project ended\] game problem moving character with mouse, ball going through the character

**URL:** <https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808>\
**Category:** Coding Questions\
**Created:** [March 31, 2019, 9:04am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808 "2019-03-31T09:04:22Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon26872549](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@anon26872549](https://discourse.processing.org/u/anon26872549)\
**Post date:** [March 31, 2019, 9:04am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/1 "2019-03-31T09:04:22Z")

</div>

//A problem with the character movement as it relied with the mouse. Also trouble with the ball script of which my character meant to bounce back up, as the ball went through the character.

```auto
float circleX=1;
float circleY=1;   

float speedX=3;
float speedY=1;

float xpos;       
float ypos;      

void setup() {
  size(640,480);
  
  xpos=0;
  ypos=0;
  
}

void draw() {
  
  background(44,56,245);
  fill(2,188,34);
  noStroke();
  rect(0,440,width,height);
       
  pushMatrix();
  translate(mouseX,280);
  fill(255,224,189);
  rect(100,100,60,50);  
  fill(210,105,30);
  rect(110,120,15,5);  
  rect(135,120,15,5);  
  fill(0);
  ellipse(130,136,10,2);  
  fill(0);
  rect(85,96,90,4);  
  
  fill(255,0,0);
  rect(110,150,40,20); 
  
  fill(0);
  rect(110,170,5,10); 
  rect(145,170,5,10); 
  popMatrix();
    
  ypos+=speedY;
  xpos+=speedX;
  
  fill(180);
  stroke(0);
  strokeWeight(2);
  ellipse(xpos,ypos,50,50);
    
  if(xpos>width-50 || xpos<0){
    speedX*=-1;
  }
  
    
   if(ypos>height-50){
    speedY*=-1*.99;
  
  }else{
   speedY+=1; 
  }
 
  if(ypos<0){
   speedY*=-1; 
  }
    
  if(speedY==0){
    xpos=0;
    ypos=0;
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 6:09am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/2 "2019-04-01T06:09:24Z")

</div>

hi robin,

you bumped that 3 times by changing text  
but the code is still same  
and not formatted by the

```auto
</> code tag

```

we assume this is homework,  
possibly the code basic was given to you?  
and you just post it here, hoping we do your work?

but ok, let’s start slowly

+a+ if you ever want to find out if the ball hits not only the ground  
also the HAT of the ‘character’  
you need to know ( as global variables ):  
ball:  
bposx, bposy, bradius  
character’s hat:  
cposx, cwide, cposy,

i think your translate makes it more difficult to get that required values  
for a ‘collision check’ ( but not impossible )

+b+ with that must check if the ball falls down on the HAT and not on the ground,  
for that need a additional logic function like

```auto
if( ypos>height-50 || ball_hits_HAT() ){}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 6:28am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/4 "2019-04-01T06:28:13Z")

</div>

a general collision example for

ball with line ( top of HAT )  
[https://github.com/jeffThompson/CollisionDetectionFunctionsForProcessing/blob/master/ballLine/ballLine.pde](https://github.com/jeffThompson/CollisionDetectionFunctionsForProcessing/blob/master/ballLine/ballLine.pde) ,

but again, your problem is to call such a collision\_detect\_function  
need to know above list of values…

and we still wait you repair your first post regarding  
paste the code in \</\> code tag.

---

<div class="post-metadata">

**Author:** ![anon26872549](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@anon26872549](https://discourse.processing.org/u/anon26872549)\
**Post date:** [April 1, 2019, 6:32am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/5 "2019-04-01T06:32:10Z")

</div>

My apologises once again about the code not display in the \</\> code tag.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 6:37am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/6 "2019-04-01T06:37:45Z")

</div>

ok, where is the ball, where is the HAT

```auto
boolean ball_hits_HAT() {
  float bposx = ?;
  float bposy = ?;
  float bradius = ?;
  float cposx = ?;
  float cwide = ?;
  float cposy = ?;
  if (? ) return true;
  return false;
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 7:17am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/8 "2019-04-01T07:17:39Z")

</div>

> [@anon26872549](#):
>
> rect(85,96,90,4); //The hat it part of the character

that is how you draw it, but for the collision with the ball you need to know where it actually is?  
work on the boolean function i layout for you  
and run it in your code ( as i show above. ).

---

<div class="post-metadata">

**Author:** ![anon26872549](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@anon26872549](https://discourse.processing.org/u/anon26872549)\
**Post date:** [April 1, 2019, 7:25am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/9 "2019-04-01T07:25:17Z")

</div>

Any appropriate location for the boolean function by inserting the void draw and put below the hat drawing.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 1, 2019, 7:27am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/10 "2019-04-01T07:27:58Z")

</div>

> [@anon26872549](#):
>
> location for the boolean function by inserting the void draw

no, outside of draw,  
but a call with

```auto
if( ypos>height-50 || ball_hits_HAT() ){}

```

only possible if all used variables are global.

* * *

a small tip,  
if you change

```auto
translate(mouseX,280);

```

to

```auto
translate(mouseX-85,280);

```

your mouse control works  
and the collision position calculation gets much easier

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 3, 2019, 8:33am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/12 "2019-04-03T08:33:25Z")

</div>

you can make 2 new variables  
`int hposx=mouseX-85, hposy=280;`  
and add this inside each rect and ellipse to (x,y like  
`rect(100,100,60,50);`  
will be  
`rect(100+hposx,100+hposy,60,50);`

and make the whole “character” to a function.

```auto
void character() {
  int hposx=mouseX-85, hposy=280;
  // no push no translate
  rect(100+hposx,100+hposy,60,50);
  //...
}

```

after that your mouse will be at left top HAT

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 3, 2019, 3:22pm UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/13 "2019-04-03T15:22:47Z")

</div>

the problem with mouse and the character is in the translate(). note: all the lines below translate(), the Y and X are relative to 0. meaning if you

```auto
translate(100, 200);
ellipse(30, 40, 10, 10);

```

you’ll get the actual X and Y:

```auto
X = 100 + 30 = 130; //and 
Y = 200 + 40 = 240;

```

so to solve this problem, you can pick some constants for X and Y (in this case i picked from the body of the character, so the body will in the origin (0,0)) and subtract every X and Y with those constants.

```auto

fill(255,224,189);
  rect(100,100,60,50); // the body
  fill(210,105,30); 
  rect(110,120,15,5);  
  rect(135,120,15,5);

```

to this

```auto
fill(255,224,189);
  rect(0,0,60,50); // the body
  fill(210,105,30); 
  rect(10, 20,15,5);  
  rect(35,20,15,5);

```

And for the second problem, you can use collision detection function for Rectangle and circle.  
first, define the Hat x and y. in this case the hat x and y:

```auto
//below translate
hatX = -15;
hatY = -4;

```

actual hatX and hatY are

```auto
hatX = mouseX - 45; // + x Translate
hatY = 376; // + y Translate

```

so,

```auto
boolean ballHitsHat() {
  // Rectangle and circle collision detection
  if (ballPos.y + ballRadius > hatY && ballPos.x + ballRadius > hatX && ballPos.x + ballRadius < hatX + hatW) {
    return true;
  }
  return false;
}

```

finally, i’ve got something done for you, some adjustments and corrections

```auto
PVector ballPos;
PVector speed;
PVector gravity;

float friction = 0.8;
float ballRadius = 25;

float hatX;
float hatY = 376;
float hatW = 90;
float hatH = 4;

void setup() {
  size(640, 480);
  ballPos = new PVector(0, 0);
  speed = new PVector(3, 1);
  gravity =new PVector(0, 1);
}

void draw() {
  background(44, 56, 245);
  fill(2, 188, 34);
  noStroke();
  rect(0, 440, width, height); 

  updateBall();
  checkBall();
  drawPuppy();
  drawBall();
}

void updateBall() {
  speed.add(gravity);
  ballPos.add(speed);
}

boolean ballHitsHat() {
  // Rectangle and circle collision detection
  if (ballPos.y + ballRadius > hatY && ballPos.x + ballRadius > hatX && ballPos.x + ballRadius < hatX + hatW) {
    return true;
  }
  return false;
}

void checkBall() {

  if (ballHitsHat()) {
    speed.y *= -1;
  }

  // checking Edges
  if (ballPos.x > width - ballRadius) {
    if (speed.x > 0) speed.x *= -1;
  } else if (ballPos.x < ballRadius) {
    if (speed.x < 0) speed.x *= -1;
  }

  if (ballPos.y > height - ballRadius - 34) {
    ballPos.y = height - ballRadius - 34;
    speed.y *= -friction;
  }
}

void drawBall() {
  fill(180);
  stroke(0);
  strokeWeight(2);
  ellipse(ballPos.x, ballPos.y, ballRadius*2, ballRadius*2);
}

void drawPuppy() {
  pushMatrix();
  hatX = mouseX - 45;
  translate(mouseX - 30, 380);
  fill(255, 224, 189);
  rect(0, 0, 60, 50);
  fill(210, 105, 60, 50);
  rect(10, 20, 15, 5);
  rect(35, 20, 15, 5);
  fill(0);
  ellipse(30, 36, 10, 2);
  fill(0);

  rect(-15, -4, hatW, hatH);

  fill(0);
  rect(10, 50, 40, 20);

  fill(0);
  rect(10, 70, 5, 10);
  rect(45, 70, 5, 10);
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 5, 2019, 1:01pm UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/17 "2019-04-05T13:01:56Z")

</div>

> [@anon26872549](#):
>
> PVector ballPos;

```auto
float ballX, ballY;

```

you never had PVector in your code,  
you can use, OK, but why you use if you not like??

* * *

somewhere you are supposed to use  
hatX = mouseX -45 ; // middle HAT

to limit move must check:

> **[constrain() / Reference](https://processing.org/reference/constrain_.html)**
>
> Constrains a value to not exceed a maximum and minimum value.

hatX = constrain(mouseX,45,width-45) - 45;

for the draw of all that rectangles use  
hatX and not mouseX to make that limit happen,  
sorry need to move all rect again.

```auto
void drawPuppy() {
  hatX = constrain(mouseX, 45, width-45) - 45;
  hatY = 400;
  fill(0);
  rect(hatX, hatY, 90, 10); //HAT
  fill(255, 224, 189); //head
  rect(hatX+15, hatY+10, 60, 40);
  fill(210, 105, 30);
  rect(hatX+25, hatY+20, 15, 5); //left eye
  rect(hatX+25+20, hatY+20, 15, 5); //right eye
  fill(0);
  ellipse(hatX+42, hatY+36, 10, 2); //mouth 
  fill(255, 0, 0);
  rect(hatX+25, hatY+50, 40, 20); //body
  fill(0);
  rect(hatX+35, hatY+70, 5, 10); //legs        
  rect(hatX+35+15, hatY+70, 5, 10);
}

```

also the “ball hit hat” logic i would change  
( still your pvector )

```auto

boolean ballHitsHat() {
  // Rectangle and circle collision detection
// if (ballPos.y + ballRadius > hatY && ballPos.x + ballRadius > hatX && ballPos.x + ballRadius < hatX + hatW) {
  if (ballPos.y < hatY && ballPos.y + ballRadius > hatY && ballPos.x > hatX && ballPos.x < hatX + hatW) {
    ballPos.y = hatY-ballRadius; // anti rebounce
    return true;
  }
  return false;
}

```

so we are not able to deal with a hit on the hat corner,  
( if ball center outside hatX ( + hatW ) )  
but that would require real circle // rect collision logic!!!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [April 5, 2019, 1:08pm UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/18 "2019-04-05T13:08:07Z")

</div>

> **[r/processing - Is there any alternative way to replace the all the PVector...](https://www.reddit.com/r/processing/comments/b9ql9f/is_there_any_alternative_way_to_replace_the_all/)**
>
> 0 votes and 5 comments so far on Reddit

---

<div class="post-metadata">

**Author:** ![anon26872549](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@anon26872549](https://discourse.processing.org/u/anon26872549)\
**Post date:** [April 5, 2019, 1:50pm UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/19 "2019-04-05T13:50:38Z")

</div>

No need to apologise of moving all the rect again, it just my confidence of trying to fix everything. And I’m only struggling to work on the entire project. The only problem is just the PVector that the earlier post by humayung provided it line of code and it have the PVector. And I’m trying my very best to change and altered a fraction of the code into something more appropriated from his one. But the results are the same as the code really operate properly with the PVector. Also doesn’t mean to be a bugger but I’ve decided to use my own code of the character to make it more appropriate in my point of view and only I need is just simply fix the character movement.

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 6, 2019, 8:43am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/20 "2019-04-06T08:43:51Z")

</div>

great!  
sorry for making you confusing.  
the PVector just a class that helpful to work with Vector Operation. It just hold x and y, or if you need z, it included that too! i know it quite silly to use PVector just for moving something 😅, it is not reveal the greatest power of the PVector class!  
but to make the code more clean, i’d better use PVector in my code, it packed X and Y in one variable so you can do happier debugging since it cleanly looking, but sometimes i use basic data type

```auto
// using primitive data type (basic structure of data type)
xPos = xPos + 10;
yPos = yPos + 2;

xPos = xPOs - 5;
yPos = yPos - 6;

xPos = xPos * 3;
yPos = yPos * 3;

//using PVector object
// we packed the position into PVector pos
pos.add(10, 2); // Vector addition
pos.sub(5,6) //vector subtraction
pos.mult(3); //Vector multiplication

```

love to discuss!  
sorry for my english

---

<div class="post-metadata">

**Author:** ![anon26872549](https://avatars.discourse-cdn.com/v4/letter/a/839c29/32.png) [@anon26872549](https://discourse.processing.org/u/anon26872549)\
**Post date:** [April 6, 2019, 11:00am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/21 "2019-04-06T11:00:19Z")

</div>

No need to apologise mate, it all good. My English is not good too sometimes.

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 6, 2019, 11:44am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/26 "2019-04-06T11:44:13Z")

</div>

nope, i mean  
redefine all the PVector using primitive data type. so

```auto
float xPos;
float yPos;

float gravity; 
float speedX;

```

replace all `ballPos.y` with `yPos`  
replace all `ballPos.x` with `xPos`

for speed.add(gravity) change to:

```auto
speedY += gravity

```

since the gravity only vertical acceleration.

and `pos.add(speed)` change to

```auto
xPos += speedX;
yPos += speedY

```

all done

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 7, 2019, 8:52am UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/27 "2019-04-07T08:52:24Z")

</div>

> Any possible suggestion for the character to stay in the barrier of the screen  
> without the character going out of it.  
> By using a if instead of constrain or dist?  
> This is the last question I’m going to ask  
> robinyashed90

```auto

void drawBill() {
  
  hatX = mouseX - 45;//bouncing hat
  background(44, 56, 245);//sky
  fill(2, 188, 34);
  noStroke();
  rect(0, 420, width, height);//grass

  fill(255, 224, 189);
  rect(mouseX, 400, 60, 50);//head

  fill(210, 105, 30);
  rect(mouseX+10, 420, 15, 5); //left eye

  rect(mouseX+35, 420, 15, 5); //right eye

  fill(0);
  ellipse(mouseX+30, 436, 10, 2); //mouth 

  fill(0);
  rect(mouseX-15, 390, 90, 10); //hat
  
  fill(165, 42, 42);
  rect(mouseX-3, 400, 65, 10); //hair

```

a functioning code was provided  
[[Project ended] game problem moving character with mouse, ball going through the character - #17 by kll](https://discourse.processing.org/t/the-problem-with-my-game/9808/17) here

yes, a command like

```auto
hatX = constrain(mouseX, 45, width-45) - 45;

```

can be replaced with if…

```auto
// concept: 
// hatX is left corner of HAT 
// hatX + hatW is right corner of HAT
// mouseX controlls the middle of the HAT

float hatW=90;
float hatX,hatXt;

void setup() {
  size(640,80);
}

void draw() {
  background(200,200);
  // way A
  hatX = constrain(mouseX, 45, width-45) - 45;
  // way B
  hatXt = mouseX;
  if ( hatXt > width -45 ) hatXt = width -45;
  if ( hatXt < 45 ) hatXt = 45;
  hatXt -= 45;
  // print
  println("mouseX "+mouseX+" hatX "+hatX+" hatXt "+hatXt);
  fill(200,0,0);
  rect(hatXt,50,hatW,10);
}

```

pls. no coding questions per message!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 28, 2019, 2:04pm UTC](https://discourse.processing.org/t/project-ended-game-problem-moving-character-with-mouse-ball-going-through-the-character/9808/28 "2019-07-28T14:04:04Z")

</div>