Move an image slowly and smoothly

Programming Questions

Alex Pilk..

Move an image slowly and smoothly

in Programming Questions • 5 months ago

Hi! I want to move an image slowly and smoothly. I am not sure why this doesn't work, but I suppose that it's because image changes it's position after image() converts it to integer.

PImage img;
float x;
void setup(){
size(500,500);
img=loadImage("song cover.png");
}
void draw(){
background(255);
image(img,x,0,500,500);
x+=0.01;
}

Replies(7)

GoToLoop

Re: Move an image slowly and smoothly

5 months ago

In software terms, a screen is made outta pixels. And they are of integral values of course!

Every coordinate pair is rounded before being actually used!

Anyways, the float variable x is itself unaffected by it.

So I don't get why it's not working as you expected to!

Another thing you can do is control how many frames per second (FPS)

function draw() is called back by Processing!

Use function frameRate() for that!

Also, a higher screen resolution gives an illusion of smoothness!

adilapapa..

Re: Move an image slowly and smoothly

5 months ago

(I should really just delete this but then GoToLoop's follow up comment wouldn't make sense)

it might have to do with your 'x' variable not being initialized. Try

float x = 0;

in place of

float x;

and it should move the image across the screen like you want it to. :)

One thing though -- like GoToLoop said, it'll only increment your image position in integer increments, so even though you're using x+=0.01, it'll actually position the image at

image(img, floor(x) ,0,500,500);

(Your internet privileges have been revoked. Go directly to Jail. Do not pass GO. Do not collect $200.)

GoToLoop

Re: Move an image slowly and smoothly

5 months ago

Java language initializes all field variables w/ a default value when 1 is not provided.

For numerical primitives, their default value is 0 or 0.0.

For boolean ones, false. For non-primitives, it's null.

Only local variables demand an initial value before usage!

In relation to coordinate pair integral conversion's method;

I dunno whether it's floor(), round(), int() or an (int) cast!

adilapapa..

Re: Re: Move an image slowly and smoothly

5 months ago

ah, thanks for catching that~! see my updated post :)

Alex Pilk..

Re: Move an image slowly and smoothly

5 months ago

OK, got it. So such functions like image() take in only integers and if it's a float, it rounds it.

Thanks guys!

GoToLoop

Re: Move an image slowly and smoothly

5 months ago

And that's b/c pixel coordinates at the screen are always integral values for a programmer.

Although in the real world, that is in a monitor display grid,

a beam can light up a portion of many pixels nearby,

instead of exactly only 1 whole pixel, making a slightly blurred image!

v.k.

Re: Move an image slowly and smoothly

5 months ago

So the effect of incrementing by floats is the speed of the moving image. As the way it is, every 100 frames it will jump one pixel. This gives the sensation of non smooth animation, if you speed it up a little , it will look better. Try x+=1 or x+=0.5. It will look better.

Top Reply