Processing 1.0 - Processing Discourse

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 › Programs › animating images

‹ Previous Topic | Next Topic ›

Pages: 1

animating images (Read 391 times)

onoxo

animating images
Jul 4^th, 2008, 11:03am

Hi!
i'm new here, so I'll need some help to start with processing. I've been programing in as2 and vvvv and this should be my first project in processing.

i have two images(png) that i want to animate in relation to mouse movement. I would like to access this images as objects so i made a class with methods to animate them. Is this a good approach? or i have to treat images as objects?

i did'nt use classes in as2 so i have poor experience with this way of programing. i saw that this is a good way to work with multiple instances in processing.

code:

ObjectHolder obh1, obh2;
PImage a;

void setup(){
size(640, 480);
obh1 = new ObjectHolder("dot_p.png", 100, 100);
obh2 = new ObjectHolder("dot_p.png", 200, 200);
}

void draw(){
background(0);

obh1.move(mouseX, mouseY, 30);
obh1.move((mouseX+100), (mouseY+100), 20);
}

class ObjectHolder {
String picName;
float xPos;
float yPos;

ObjectHolder(String pic_name, float x_pos, float y_pos) {
picName = pic_name;
xPos = x_pos;
yPos = y_pos;
a = loadImage(picName);
}

void move (float posX, float posY, float damping) {
float dif = yPos - posY;
if (abs(dif) > 1) {
ypos -= dif/damping;
}
dif = xPos - posX;
if (abs(dif) > 1) {
xpos -= dif/damping;
}
}
}

thnx!
Vedran

PhiLho

Re: animating images
Reply #1 - Jul 4^th, 2008, 1:18pm

I would say it is the good approach whenever you have several objects you need to draw/animated independently: the objects remember their state, particularly position, and can do actions, like moving.

I would include PImage in the object itself (which should have a more meaningful name), in case you need a different image per object. You can drop the name, although it can be useful if you ever need to add a toString() method (useful for debugging...).
If you are sure all objects will share the same image, do the loadImage() in setup(), and pass the PImage to the object (will hold only a reference, so it is lightweight). Or just access the global image, but it is uglier...

You also need to add a draw() method to your object (can have any name, Draw(), display() or whatever) to call after move(), to update the display.

onoxo

Re: animating images
Reply #2 - Jul 4^th, 2008, 1:47pm

Hi!
thnx for fast reply!

well i need different image per object. Currently i don't know how to include PImage in object, so i made Array of PImages. But i would like to do it this way.
Problem is that i can't find out how to refer back to image form class. when i have to move it i have to refer to it somehow.
so, i try to extend PImage and i get this:

No accessible method with signature "move(int, int, float)" was found in type "processing.core.PImage".

i dont know what's wrong here.

code:

PImage [] r;
String [] imgNames = {
"dot_p.png","dot_t.png","dot_p.png","dot_t.png"};
int numOfInstances = 4;
//--------------------------------------------------------------------
void setup(){
size(500, 400);

r = new PImage[numOfInstances];
for(int i = 0; i < r.length; i++)
r[i] = loadImage(imgNames[i]);
}

void draw() {
background(100);
for(int i = 0; i < r.length; i++)
r[i].move(mouseX, mouseY, random(20)+10);
// image(r[i], random(100), random(200));
}
//--------------------------------------------------------------------
class ImageAnimation extends PImage{
float xPos;
float yPos ;

void move (float posX, float posY, float damping) {
float dif = yPos - posY;
if (abs(dif) > 1) {
yPos -= dif/damping;
}
dif = xPos - posX;
if (abs(dif) > 1) {
xPos -= dif/damping;
}
}

void display(){
//
}
}

onoxo

Re: animating images
Reply #3 - Jul 4^th, 2008, 2:21pm

ok, it's working!
PhiLho, what do you think?
is this ok?

code:

String [] imgNames = {"dot_p.png","dot_t.png","dot_p.png","dot_t.png"};
DotHolder [] dh;
int numOfInstances = 4;
//--------------------------------------------------------------------
void setup(){
size(600, 600);

dh = new DotHolder[numOfInstances];
for(int i = 0; i < dh.length; i++)
dh[i] = new DotHolder(imgNames[i], 0, 0, random(50)+10);
}

void draw() {
background(100);

for(int i = 0; i < dh.length; i++){
dh[i].move(mouseX, mouseY);
dh[i].display();
}
}
//--------------------------------------------------------------------
class DotHolder {
float xPos;
float yPos;
float damping;
PImage imgHolder;

DotHolder (String img_name, float x_pos, float y_pos, float iDump) {
imgHolder = loadImage(img_name);
imageMode(CORNERS);
image(imgHolder,100,100,40,40);
damping = iDump;
//println("dot created");
}

void move (float posX, float posY) {
float dif = yPos - posY;
if (abs(dif) > 1) {
yPos -= dif/damping;
}
dif = xPos - posX;
if (abs(dif) > 1) {
xPos -= dif/damping;
}
}

void display(){
image(imgHolder,xPos,yPos);
}
}

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: animating images Reply #4 - Jul 4^th, 2008, 3:48pm Looks like you did it. At least, it is close of what I would have done.

Pages: 1

‹ Previous Topic | Next Topic ›