Image Placement with Precision - Graphics2D

Newbie & Debugging Questions
#1

Hi,
This is my first post!

I would like to load an image and control the placement/movement in a JPanel with precision (float). After a gazzilion searches and paging through books it seems that I can only position an image using (int).

Is there a trick I can use… Like somehow attaching the image to a rect, or another image method I can use?

Cheers & Thanks

#2

The smallest unit for placement is a pixel which is a discrete value (int) but there’s nothing to stop you casting a float to an int;


for (float i=0;i<100;i+=0.5f)
{
    g.drawImage(image,(int)i,(int)i,null);
}
#3

Indeed… but then I loose the precision. Sorry if this is silly question. ( Hence Newless Clubies)

#4

To help us (and probably yourself) to better understand the problem try to answer the following questions:

  • What do you want to achieve in your application?
  • Why would you need to place that image with float coordinates?
  • What do you expect to gain?
#5

I’m writing a simple app to simulate gravity on an object for a Physics project

The problem occurs in the Maths when the ball is at the top of the fall… because I have to cast to (int) for movement, it stalls until the value is greater than 0.5 or less than -0.5… So it just hangs there.

Here is the code for the movement of the ball…


// Variables
private final long DELAY = 20;                                  // Timer delay (10 ms)
    
    private float a = 9.8f;                                         // Default acceleration 9.80 m/s/s 
    private float t = DELAY / 1000.0f;


public void cycle(){
        // Increase velocity based on rate of acceration
        myBall.setY((int)(myBall.getY() + (t * (myBall.getVY() + a * t))));
        myBall.setVY(myBall.getVY() + a * t);
        //System.out.println(myBall.getY());
        //System.out.println(myBall.getVY());
        
        if(myBall.getY() > getHeight() - myBall.getRadius() * 2){
            myBall.setVY(-myBall.getVY()*myBall.getElast());
        }

/Edit - Added the variables… note getVY returns a float (myball current velocity)

#6

You could try TexturePaint and filling a rectangle with it.

#7

Make sure to keep all variables as floats throughout your calculations and only cast to int in the actual drawImage() call.
That should sort it!

#8

Many many thanks to everyone who replied!

Cheers

#9

You want to draw an image at sub-pixel locations? I think Project SceneGraph has that built-in. I’m not sure about JavaFX, I saw one demo (the puzzle demo) it looked like some pixel-snapping was going on.
For straight Java2D, this method that might work by using transforms:
Graphics2D#drawImage(Image, AffineTransform, ImageObserver)
You may have to set up some RenderingHints to get it to work correctly (bilinear filtering, etc)

#10

Have a look at this:
http://www.otcsw.com/planetarysimulator.php

All the masses, positions, and velocities of the planets are doubles. Then when I draw it I just say g.fillOval(int)x,(int)y,(int)radius2,(int)radius2).

There is no reason to draw at a sub-pixel level. Your monitor can only show things on a pixel-by-pixel basis; nothing can be drawn in between two pixels. SimonH is right - as long as you keep everything stored as a float or double and then merely draw as int, it will look fine.

#11

I think his problem is the visual imperfection of very small position changes, so the ball “hops” to the next pixel from time to time. Either way is to accept this limitation or use subpixel placement, that recalculates the real pixels by multisampling.

#12

Well… not exactly. Drawing at sub-pixel level makes anti-aliased images appear to have smoother animation when moving slowly. It can be accomplished with bilinear interpolation. Of course, it makes pixel-art look like crap.

Flash has a pixelSnapping on/off property for Bitmap objects. Apple’s Core Animation always enables sub-pixel placement. JavaFX, I couldn’t find any info about it, but I think Nodes always snap to the nearest pixel.

#13

I used the cast method as suggested by SimonH (gave me the answer in the first post, but I didn’t quite grasp it)…


g2.drawImage(myBall.getBall(),(int)myBall.getX(),(int)myBall.getY(),null);

… and everything works perfectly. Thank you very much, a wonderful first experience on this forum.

/ happily goes back to coding

#14

Welcome to java-gaming.org, where someone like myself typically pops into a thread and derails the conversation into something completely different. :slight_smile:

#15

I’m not sure about JavaFX

JavaFX uses floats everywhere, and there’s no “pixel snapping” for shapes.
Try placing a Rectangle on 1.1,1.1 you will see that becomes AA-ed to achieve that.

For Images, there’s a hint in the scenegraph to allow subpixel positioning (also depends on filtering mode set in ImageView: ImageView.smooth),
but I don’t think it’s exposed on the FX level right now.

By default non-integer translations for images is off since it’s slow on some earlier (1.5) jdks.

Dmitri

#16

To answer the original question: use affine transform to place the image with high precision. Also make sure to set bilinear rendering hint (the default is nearest neighbor). But be aware that with earlier jdks (pre-1.6) performance will suck.

Dmitri

#17

Could use g.translate(float x, float y) !!!

Example:

g.translate(myImageX, myImageY);
g.drawImage(myImage, 0, 0);
g.translate(-myImageX, -myImageY);

Thank you thank you! ;D

#18

Either that, or as suggested by brakeen (http://www.java-gaming.org/index.php/topic,19689.msg156523.html#msg156523) use drawImage with affine transform.

Don’t forget to set the rendering hint to bilinear:


g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                                RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2d.drawImage(image, AffineTransform.getTranslateInstance(doubleX, doubleY), null);

Dmitri

#19

Okay, that explains why I was seeing pixel-snapping on my Mac+Java 1.5 on the puzzle demo. Yup, that “smooth” variable is exposed in ImageView - good to know, thanks Dmitri!