Test for collision between a rectangle and an image

Processing.py
1

Hello there! In class, I have been learning how to use python in processing. However, I have learned barely anything in processing, and I now have a project to complete. I am trying to make a simple game where you control a spaceship and have to shoot this big alien, but I have absolutely no idea how to test for collisions between a rectangle and an image. And Google hasn’t really helped either, because it seems like almost no one uses processing.py. Can someone please help me? I have put my code below (very bad code lol, I really have no idea what I’m doing) along with two images (the player and the enemy). Thank you!

x = 750
y = 900
xspeed = 0
bossx = 500
bossy = 100
bxspeed = 10
bosshealth = 200
gunx = x + 50
guny = 900
velocity = 100
xxspeed = 0
liney = bossy
bgunx = bossx + 50
bguny = 100

def setup():
    global ship, alien
    ship = loadImage("ship.png")
    alien = loadImage("alien.png")
    imageMode(CORNERS)
    size(1500, 1000)
    frameRate(60)
    
def draw():
    global x, y, bgunx, bguny, xspeed, ship, alien, bossx, bxspeed, gunx, guny, xxspeed, linex, bossy
    background(0)
    textSize(32)
    text(bosshealth, 750, 30)
    fill(255)
    image(ship, x, y)
    bullet = rect(gunx, guny, 15, 15)
    danger = rect(bgunx, bguny, 30, 30)
    if keyPressed:
        if key == "d":
            xspeed = 10
            xxspeed = 10
        if key == "a":
            xspeed = -10
            xxspeed = -10
    else:
        xspeed = 0
    if keyPressed:
        if key == "d":
            xxspeed = 10
        if key == "a":
            xxspeed = -10
        if key == "w":
            guny = guny - velocity
    else:
        xxspeed = 0
    x = x + xspeed
    gunx = gunx + xxspeed
    if x > 1500:
        x = 0
        gunx = 50
    if x < 0:
        x = 1500
        gunx = 1450
    image(alien, bossx, 100)
    bossx = bossx + bxspeed
    bgunx = bgunx + bxspeed
    if bossx == 1000:
        bxspeed = -10
    if bossx == 0:
        bxspeed = 10
    guny = guny - 50
    if guny < 0:
        guny=900
    bguny = bguny + 10
    if bguny > 1000:
        bguny=200
1 Like
2

Processing’s default mode is “Java Mode”; so Java is indeed the main language here.

After that, we’ve got a Processing JavaScript flavor called p5js.org.

A Processing PImage is also a rectangle form. So it’s basically rect-to-rect collision too.

I’ve got this article about rect-to-rect collision check, both in Java & JS:

  1. Collision Detection
  2. Collision Detection

Just try to understand the concept, and then translate it to Python syntax.

Or I can try finding some sketch of mine w/ rect-to-rect collision and convert it to Python syntax.

3 Likes
3

As @GoToLoop has suggested, this is a language independent concept. Here’s a basic implementation of AABB collision in Python:

def setup():
    size(500, 500)

def draw():
    background('#0000FF')
    # target
    targetx, targety, targetsize = 200, 200, 100 
    # player
    playerx, playery, playersize = mouseX, mouseY, 60 
    
    if (playerx+playersize >= targetx and  # player right-edge over target left-edge?
        playerx <= targetx+targetsize and  # player left-edge over target right-edge?
        playery+playersize >= targety and  # player bottom-edge over target top-edge?
        playery <= targety+targetsize      # player top-edge over target bottom-edge?
        ):
        fill('#FF0000')
    else:
        fill('#FFFFFF')
    
    square(targetx, targety, targetsize)
    square(playerx, playery, playersize)

This is possibly the easiest method. But there are other methods for greater accuracy.

3 Likes