#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Determine if two images intercept?

edited March 2017

I'm working on a project for computing where I have to make a game. In my game, you have to kick the ball by using the arrow keys into the moving goal. My project partner is working on the different difficult levels, so I do not have that part built into the code yet, but the different animations for each level have already been built below. I can't figure out how to get processing to recognize when the two images (ball and goal) intercept so that I can cause the lives to go down if the player misses. Any help would be greatly appreciated.

``````int u=325; //y-value for soccer ball
int v=250; //x-value for soccer ball
int w=0;//x-value for goal
int x=150; //y-value for easy
int y=90; //y-value for medium
int z=35; //y-value for difficult
PImage goal; //goal image
PImage background; //background image
PImage ball; //soccer ball image

void setup(){
size(500,375);
//Makes images appear
}

void draw(){
//background must be in start of draw, otherwise unwanted trail occurs behind pictures
background(background);
image(ball,v,u,40,40);

//Goals
image(goal,w,x,250,250); //easy goal
w=w+3; //animation
w=w%375; //loop

image(goal,w,y,200,200); //medium goal
w=w+3; //animation
w=w%375; //loop

image(goal,w,z,150,150); //difficult goal
w=w+3; //animation
w=w%375; //loop

//Lives
fill(255); //background box fill
stroke(255,10,10); //background box outline
rect(350,15,80,50); //background box
fill(255,10,10); //text color
text("Lives",375,30); //label

ellipse(365,45,15,15); //Life 1
ellipse(390,45,15,15); //Life 2
ellipse(415,45,15,15); //Life 3
}

void keyPressed(){
if (key == CODED) {
if(keyCode == RIGHT) {
v=v+3;
}
if(keyCode == LEFT) {
v=v-3;
}

if(keyCode == UP) {
u=height-140; //easy goal ball shoot

}
if(keyCode == UP) {
u=height-200; //medium goal ball shoot

}
if(keyCode == UP) {
u=height-285; //difficult goal ball shoot
}
}}
``````

Kf

• The soccer ball and the goal are png so I assume they both have some transparency. Also you want to detect overlapping non-transparent pixels.

This sketch on Open Processing demonstrates how to do that.

• well, without seeing the images, i'd say it'd be easier to use the position of the ball rather than the image.

``````if ball x is off the left or the right
if ball y is between the goalposts
goal
``````
• edited March 2017

@ejlee -- For general purpose transparent image collision, @quark 's suggestion makes sense and is the most flexible. However in soccer you don't score when you hit the goal from the side or top -- you only score when the center of the ball crosses into the goal region from the front. Without having looked at your game prototype, that fact makes me think that @koogs has the right suggestion -- you should define the location of that goal line / zone and then use either point-line or point-rectangle collision detection -- Edit: where the point for each goal is the edge of the ball image as computed by the center +/- the radius, rather than the center (so that all of it is in).

• (All the ball has to be over the line.