How to make 2 moving images collide?

brianna0811

I want to have the panda (which the user moves with left and right arrow keys) collide with a candy image which is falling from the top left of the screen. When the 2 images collide, it would say "YOU TOUCHED THE CANDY" on the screen and the console. But when the panda and candy touch, nothing happens.

Here is the link to the code (I couldn't figure out how to indent the code on here): https://paste.ofcode.org/sBSTST866aqUv5xkzWJ84g

I tried doing if (pandaX==xPosCandy && pandaY==yPosCandy ) But it didn't work. I also tried doing if (pandaX>xPosCandy && pandaY<yPosCandy ) but it says YOU TOUCHED THE CANDY too soon.

Any help would be appreciated, and let me know if you need more code. Thanks!

GoToLoop

http://JeffreyThompson.org/collision-detection/rect-rect.php

brianna0811

@GoToLoop Thanks, I changed some variables for height and width to make it easier, and I tried checking if they were overlapping like so:

if (candyX+candyW > pandaX &&
    candyX < pandaX+pandaW &&
    candyY+candyH > pandaY &&
    candyY < pandaY+pandaH) {
    text("YOU TOUCHED THE CANDY!", width/2, height/2);
}

But it still doesn't work. I'm not sure if my math is wrong calculating the top and bottoms of the images. Any suggestions?

jeremydouglass

@brianna0811 please edit your post with the gear icon and format your code correctly: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

This will enable others to read and test your code.

brianna0811

@jeremydouglass @GoToLoop

    PImage candy, panda;
         int pandaX = 800;
         int pandaY = 790;
         int pandaW = 80;
         int pandaH = 112;
         int candySpeed = 20;
         int yDirCandy = 1;
         int candyX = 10;
         int candyY = 20;
         int candyW = 187;
         int candyH = 121;


     void setup() {
     candy = loadImage("goodCandy1.png");
     panda = loadImage("panda.png");
     }
     void loadStuff() {
       image(panda, pandaX, pandaY, pandaW, pandaH);
       text("Lives: " + lives, 1400, 70);
       image(candy, candyX, candyY, candyW, candyH);
       candyY = candyY + (candySpeed * yDirCandy);
       touchCandy(pandaX, pandaY, candyX, candyY);
     }
     void keyPressed() {
       if (key==CODED) {
         if (keyCode==LEFT) {
           pandaX = pandaX-20;
         }
         if (keyCode==RIGHT) {
           pandaX = pandaX+20;
         }
        if (pandaX<=10) {
          pandaX=10;
          lives = lives -1;
        }
        if (pandaX>=1500) {
          pandaX=1500;
        }
       }

     }

     void touchCandy(int candyX, int candyY, int pandaX, int pandaY) {
       if (pandaX==candyX && pandaY==candyY ) { 
         text("YOU TOUCHED THE CANDY!", width/2, height/2);
         print("YOU TOUCHED THE CANDY!");
       }

     }

Here's the code

I also tried

if (candyX+candyW > pandaX &&
          candyX < pandaX+pandaW &&
          candyY+candyH > pandaY &&
          candyY < pandaY+pandaH) {
    text("YOU TOUCHED THE CANDY!", width/2, height/2);

But it didn't work

kfrajer

@brianna0811

I have to ask, is this all your code? If it is...

Please visit the reference in the Processing's website and check the following keywords: setup, size and draw.

It is also a good idea to visit the Examples section and explore few of them there. They are very simple and explain the basic mechanism of operation of Processing. In your code:

You need to call the size() function as your first line of setup.

You need to call draw() as this is the function that is continuously executed at 60 fps. This is where you add your code that changes over time.

Another note. When you format code in the forum, ensure there is an empty line above and below your code. This will ensure your code block gets formatted properly.

Kf

GoToLoop

In order to encapsulate the collision detection algorithm + PImage + coordinates x & y, I've made a class called Sprite. Then created 2 subclasses extending it called Panda & Candy.

Just check it out online at this link: https://OpenProcessing.org/sketch/433511
And below the full code for it: :bz

/**
 * Catch Candy Panda (v1.0)
 * GoToLoop (2017-Jun-08)
 *
 * https://forum.Processing.org/two/discussion/22966/
 * how-to-make-2-moving-images-collide#Item_6
 *
 * https://OpenProcessing.org/sketch/433511
 */

/* @pjs preload="panda.png,candy-icon.png"; */

static final boolean REMOTE = true;
static final String HTTP = "http://";

static final String PANDA_SITE = HTTP + "FunHtml5Games.com/" + "images/";
static final String PANDA_FILE = (REMOTE? PANDA_SITE : "") + "panda.png";

static final String CANDY_SITE = HTTP + "icons.IconArchive.com/" +
  "icons/martin-berube/food/48/";
static final String CANDY_FILE = (REMOTE? CANDY_SITE : "") + "candy-icon.png";

Panda panda;
Candy candy;

void setup() {
  size(800, 600);
  smooth(3);
  frameRate(60);
  imageMode(CORNER);

  PImage p = loadImage(PANDA_FILE);
  panda = new Panda(p, width - p.width >> 1, height - p.height, 5);

  PImage c = loadImage(CANDY_FILE);
  candy = new Candy(c, (int) random(width - c.width), -c.height, 1);
}

void draw() {
  boolean colliding = panda.isIntersecting(candy);
  background(colliding? #FF0000 : 0);

  panda.update();
  panda.display();

  candy.update();
  candy.display();
}

void keyPressed() {
  panda.move(keyCode, 1);
}

void keyReleased() {
  panda.move(keyCode, 0);
}

class Sprite {
  final PImage img;
  int x, y;

  Sprite(PImage pic, int px, int py) {
    img = pic;
    x = px;
    y = py;
  }

  void display() {
    image(img, x, y);
  }

  boolean isIntersecting(final Sprite s) {
    return
      x + img.width  > s.x && x < s.x + s.img.width &&
      y + img.height > s.y && y < s.y + s.img.height;
  }
}

class Panda extends Sprite {
  int spd, dir;

  Panda(PImage img, int x, int y, int vel) {
    super(img, x, y);
    spd = vel;
  }

  void update() {
    x = constrain(x + spd*dir, 0, width - img.width);
  }

  void move(final int k, final int mov) {
    if (k == 'A' | k == 'Z' | k == LEFT)  dir = -mov;
    else if (k == 'D' | k == 'X' | k == RIGHT)  dir = mov;
  }
}

class Candy extends Sprite {
  int spd;

  Candy(PImage img, int x, int y, int vel) {
    super(img, x, y);
    spd = vel;
  }

  void update() {
    if ((y += spd) > height) {
      y = -img.height;
      x = (int) random(width - img.width);
    }
  }
}

brianna0811

@GoToLoop Thank you so much! I actually went back in my code and found that when I was calling the method touchCandy() it wasn't calling the parameters in the right order. It works now, thanks a lot for your help!