Processing 1.0 - Processing Discourse - colliding loaded images

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › colliding loaded images

‹ Previous Topic | Next Topic ›

Pages: 1

colliding loaded images (Read 614 times)

Luc

colliding loaded images
May 12^th, 2009, 3:04am

Hello,
still very new to programming, I'm trying to let two images collide.
Can someone show me the way?

I have one fixed image on a background (which is also a loaded image).
A second image moves by the cursor.

I would like a third image to be triggered when the two first images collide...

This is my sketch(A):

// move image by mouse

// global variables

float x,y;

// set images

PImage carpet;
PImage bg;
PImage gr8;

void setup()
{
// set window

size (1024, 768);

smooth();

x=width/2;
y=height/2;

//Load Images

carpet = loadImage("flyingcarpet2.png");
bg = loadImage("lucht2.jpg");
gr8 = loadImage("green8th.png");

}

void draw() {
background(bg);
image(gr8, width/2, height/2);

image(carpet,mouseX,mouseY);
}
if(mouseX == 400 && mouseY == 450) {
gr8 = loadImage("hit8thnote.png");
}

Also I would like to have the effect of the folliwng sketch (B) in the previous sketch (A)

sketch B:

//RavenousellipseI
float x,y;
PImage ball;

void setup () {
size(400,400);
x=width/2;
y=height/2;
smooth();
ball = loadImage("flyingcarpet2.png");
}
void draw(){
//repaintbackground
fill(255, 40);
rect(0,0,width,height);
/*finddistanceforxandy
between prey and predator */
float deltaX = (pmouseX-x);
float deltaY = (pmouseY-y);
x+=deltaX;
y+=deltaY;
image(ball,x,y);
}

Thank You for helping me with this!

Greetings,
Luc

PhiLho

Re: colliding loaded images
Reply #1 - May 12^th, 2009, 3:47am

Some remarks:

You can load the hit8thnote in the setup too, say in hn8 variable.
Where you load the image, you can simply use gr8 = hn8;
The "repaintbackground" code is useless, just use background().
If you do the math of deltaX and x computing, you will see you assign pmouseX to x.

And lastly, you can check image collision by looking if their bounding rectangles collide, which isn't hard.

Cedric

Re: colliding loaded images
Reply #2 - May 12^th, 2009, 4:00am

which is pretty easy

I made an example with rectangles using your code. You have to adapt it yourself though :

// move image by mouse

// global variables

float x,y,imageWidth,imageHeight,size2;

void setup()
{
// set window
rectMode(CENTER);
size (1024, 768);

smooth();

x=width/2;
y=height/2;
imageWidth = width/2;
imageHeight = height/2;
size2 = 100;
}

void draw() {
background(255);
fill(255);

rect(x,y,imageWidth, imageHeight);

if(mouseX-size2/2 < x+imageWidth/2 && mouseX+size2/2 > x-imageWidth/2 && mouseY+size2/2 > y-imageHeight/2 && mouseY-size2/2 < y+imageHeight/2) {
fill(0,255,0);
}else
{fill(255,0,0);}

rect(mouseX,mouseY,100,100);

}

twitter.com/CedricKiefer

Luc Ex Member	Re: colliding loaded images Reply #3 - May 12^th, 2009, 5:05am THANK YOU!!! This is great. I'm trying to get acquainted with the logical reasoning required to program in Processing. I'm not used to it at all... But you are helping me really good. I have to leave now, but I will post my sketch tonight or tomorrow... Greetings and once again: thanks! Luc

Luc

Re: colliding loaded images
Reply #4 - May 14^th, 2009, 11:18am

Hi!

this is what I made of it:

// move image by mouse

// global variables

float x,y,imageWidth,imageHeight,size2;

// set images

PImage carpet;
PImage bg;
PImage gr8;

void setup()
{
// set window
size (1024, 768);

smooth();

x=width/2;
y=height/2;
imageWidth = 100;
imageHeight = 73;
size2 = 100;

carpet = loadImage("flyingcarpet2.png");
gr8 = loadImage("green8th.png");
bg = loadImage("lucht2.jpg");

}

void draw() {
background(bg);
fill(255);
image(gr8, x,y,imageWidth, imageHeight);
if(mouseX-size2/2 < x+imageWidth/2 && mouseX+size2/2 > x-imageWidth/2 && mouseY+size2/2 > y-imageHeight/2 && mouseY-size2/2 < y+imageHeight/2) {
gr8 = loadImage("hit8thnote.png");
}else
{gr8 = loadImage("green8th.png");}

image(carpet, mouseX, mouseY);

}

Greetings!
Luc

Cedric YaBB Moderator Offline Posts: 1838	Re: colliding loaded images Reply #5 - May 14^th, 2009, 11:07pm hard to test without images, especially when you use different ones for animation. i tested it with an icon flying over the google logo maybe you wanna add imageMode(CENTER); to setup...
	twitter.com/CedricKiefer

Luc

Re: colliding loaded images
Reply #6 - May 18^th, 2009, 2:40am

Hey Cedric,
I don't now if there's a way to post the images?

Here's a description: an avatar is sitting on a flying carpet (flyingcarpet2.png). By moving the cursor, he moves in the air. In the air a music note (green8th.png) is "floating". When touching the note, the avatar gains points (hit8thnote.png).

Adding imageMode(center) is a good idea. Thanks!!

Greetings,
Luc

Pages: 1

‹ Previous Topic | Next Topic ›