We Keep Coding

How to zoom into mouse position with correct translation

I'm trying to zoom a grid in Processing and I am having trouble with applying the correct translation such that zooming is centered around the mouse position. I have searched the web for a while but nothing I try seems to work.
The screen size is width and height and the mouse position is mouseX and mouseY.
The code I have at the moment is below, but it zooms the grid (controlled by player.zoom) from the top left corner which is not what I want. To update the translation of the grid, player has the 2d vector player.translate.
void mouseWheel(MouseEvent event) {
float zoomFactor = 200.0f;
float scroll = event.getCount();
player.zoom -= scroll * player.zoom / zoomFactor;
// player.translate.x += something;
// player.translate.y += something;
}
If you need more details to answer I can link the repo with the source code.

I have created a very simple mock-up for you which will hopefully point you in the right direction into applying this to your player.
So this little demo shows the zooming in to the centre of an ellipse whilst keeping it as the central focus.
float scale = 1;
// displacement left/right
float xPan = 720;
// displacement up/down
float yPan = 450;
boolean zoomIn = true;
void setup() {
size(1440, 900);
}
void draw() {
// allows us to zoom into the center of the screen rather than the corner
translate(width/2, height/2);
scale(scale);
translate(-xPan, -yPan);
background(200);
// draws the ellipse in the center
ellipse(width/2, height/2, 100, 100);
// does the zooming
if (zoomIn) {
scale *= 1.01;
}
}
I suggest you to copy this into a new project and then comment out specific lines to try to understand what's going on and how you can transfer this over to your own project.
The same principles still apply, I didn't do this with mouse input in the effort of making the program as simple as possible.

Offset between click detection and button graphics in libgdx

I have a libgdx application that contains a class Button. The constructor of Button takes three arguements: Filename of graphics, position, and game (the latter being used for callbacks of various sorts).
The button scales itself based on the graphics provided, thus setting its width and height based on the properties of the graphics.
The main class, Game, when a click is detected compares the coordinates of the click up against the coordinates of the button combined with its width and height.
Now, the main issue is that there is a little bit of a horizontal offset between the button and the click coordinates, so the effect is that the graphics show up a few pixels to the right of the clickable area. I cannot for the life of me figure out the source of this discrepancy, so I would greatly appreciate some fresh eyes to see where I'm going wrong here.
Button, constructor and polling-method for clickable area.
public Rectangle getClickArea() {
return new Rectangle(pos.x - (img.getWidth() / 2), pos.y + (img.getHeight() / 2), w, h);
}
public Button(String assetfile, int x, int y, Game game) {
this.game = game;
img = new Pixmap(new FileHandle(assetfile));
pos = new Vector2(x, y);
this.w = img.getWidth();
this.h = img.getHeight();
}
A relevant snippet from InputHandler. It listens for input and passes on the event. Please note that the vertical click position is subtracted from the vertical size of the screen, as vertical 0 is opposite in InputHandler:
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
tracker.click(screenX, Settings.windowSize_Y - screenY);
return false;
}
ClickTracker (referenced as tracker in the above snippet), the Class that does the actual comparison between clicks and clickables:
public void click(int x, int y) {
Vector2 clickPos = new Vector2(x, y);
for (Tickable c : world.getPaintables())
{
if (!(c instanceof Unit))
continue;
if (((Clickable)c).getClickArea().contains(clickPos)) {
System.out.println("Clicked on unit");
}
}
for (Clickable c : clickables)
{
if (c.getClickArea().contains(clickPos)) {
c.clicked(x, y);
}
}
In short: The vertical alignment works as intended, but the horizontal is slightly off. The button graphics appear maybe around 10-20 pixels to the right of the clickable area.
I'll gladly post more info or code if needed, but I believe I have the relevant parts covered.
Edit:
As Maciej Dziuban requested, here's the snipped that draws the UI elements. batch is a SpriteBatch as provided by libgdx:
for (Paintable p : ui) {
batch.draw(new Texture(p.getImg()), p.getImgPos().x, p.getImgPos().y);
}
the getImgPos() is an interface method implemented by all drawable items:
public Vector2 getImgPos() {
return new Vector2(pos.x - (getImg().getWidth() / 2), pos.y);
}
It's worth noting that half of the horizontal image size is subtracted from the X pos, as X pos refers to the bottom center.

You have inconsistency in your position transformations:
Your clickArea's corner is pos translated by [-width/2, height/2] vector.
Your drawArea's corner is pos translated by [-width/2, 0] vector
They clearly should be the same, so if you want your pos to represent bottom-center of your entity (as you've explicitly stated) you have to change your getClickArea() method to, so it matches getImgPos().
public Rectangle getClickArea() {
return new Rectangle(pos.x - (img.getWidth() / 2), pos.y, w, h);
}
Side note: as Tenfour04 noticed, you create new texture each frame and this is huge memory leak. You should make it a field initialized in constructor or even a static variable given some buttons share the texture. Don't forget to call dispose() on resources. For more powerful asset management check out this article (note it may be an overkill in small projects).

LibGDX touch coordination confusion

as I understood, libGDX coordinate system set by default, so the (0,0) is located at the bottom left corner, like in the following picture:
(source: gyazo.com)
Is it possible to make it work like JFrame, where the default position is at the top left corner?
Anyhow, back to my actual question, android (OR at least my phone) touch coordinate system is working by full screen (when phone is laying on it's side) so the default (0, 0) position is located at the top right corner, like in the following picture:
(source: gyazo.com)
So what happens when I simply do this:
#Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
System.out.println("X: " + screenX + " Y: " + screenY);
this.instance.player.setLocation(screenX, screenY);
return false;
}
I simply get the X, Y of touched screen (based on android's fullscreen coordinate system) and then use it on libgdx coordinate system which is totally different,
so if I touched at the top right corner, my blue rectangle will appear at bottom left corner.
Is there a way to make everything work by the top left corner like on PC?

You'll need to use a camera to do this. If you're not using a camera, I'd highly recommend adding one in, as it makes things a lot easier. Simply call camera.setToOrtho(true), which will switch LibGDX's coordinate system to the one you want, (0,0) in the top left.
To do this with a certain viewport width and height other than what you get from Gdx.graphics.getWidth/Height(), you can call camera.setToOrtho(true, viewportWidth, viewportHeight).

I don't know how to set it at top left corner but one thing you could is to convert input coordinate to libgdx coordinate.
I hope that could help you or help somebody else :
int Screen_height = Gdx.graphics.getHeight(); // Your screen height
#Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
System.out.println("X: " + screenX + " Y: " + (Screen_height - screenY));
this.instance.player.setLocation(screenX, (Screen_height - screenY));
return false;
}

Yes, and it's very easy.
You just have to subtract from the Y value the height of the screen.
So:
The finger position Y = Heigh of the screen - the Y value you have found.

There's an easier way:
Just make the subtraction bellow
Gdx.graphics.getHeight()-screenY
Only this line of code is necessary, as you can see.

Create the variable fingerY and use the subtraction:
fingerY= Gdx.graphics.getHeight()-screenY;
So, if screenY equals 10 from the left bottom corner and the height of the screen equals 240 pixels:
fingerY=240-10
Then fingerY=230 pixels from the bottom left corner, while it is 10 pixels from the top left corner.

You need to use the method project(Vector3 worldCoords) in class com.badlogic.gdx.graphics.Camera.
private Camera camera;
............
#Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
Create an instance of the vector and initialize it with the coordinates of the input event handler.
Vector3 worldCoors = new Vector3(screenX, screenY, 0);
Projects the worldCoors given in world space to screen coordinates.
camera.project(worldCoors);
Use projected coordinates.
world.hitPoint((int) worldCoors.x, (int) worldCoors.y);
OnTouch();
return true;
}

How to get X,Y coordinates of an image in a JLabel

I have an image of a map placed as the icon of a JLabel.
I am using following code to get the X,Y coordinates of the location where the mouse is clicked.
I have put this code in the MouseClick event of the JLabel.
Point point = MouseInfo.getPointerInfo().getLocation();
double X = point.getX();
double Y = point.getY();
but the coordinates depend on the location of the JFrame form. If the form is moved the coordinates change.
Is there anyway I can freeze the JFrame?
Or
Is there anyway I can get a corner of the image as 0,0 and get the other coordinates relative to that? (So I can calculate the actual coordinates)

getLocation returns the mouse co-ordinates relative to the screen. Use the co-ordinates from the MouseEvent instead
label.addMouseListener(new MouseAdapter() {
#Override
public void mouseClicked(MouseEvent e) {
double x = e.getX();
double y = e.getY();
...
}
});

How to use MouseListener and MouseMotionListener in java3D to rotate 3D object?

I m making desktop app in java swing. i made 3D image from my 2D image using PointArray[]. now i want to rotate image using MouseListener and MouseMotionListener.I used MouseRotate object to rotate myImage, but it not works well for that, MouseRotate rotate image with origin(0,0,0). but i want to rotate image using center point of image. means rotate image using center point not origin point. So, How can i do that?

Hmm, it's hard to tell without code, but I think you can just set up a transformation matrix and rotate it with that. Assuming the image is facing the front of the screen, you can try something like this:
public void mouseDragged(MouseEvent e)
{
int dx = e.getX() - x; //x should be a global variable
int dy = e.getY() - y; //same applies here
x = e.getX(); //to set x for the next update loop
y = e.getY();
double rotation = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
Transform3D transform = new Transform3D();
Matrix3d matrix = new Matrix3d();
transformG.getTransform(transform); //assuming the TransformGroup your image is in is transformG
transform.getRotationScale(matrix);
transform.rotZ(rotation);
transformG.setTransform(transform);
}
You can set up the rotation amount differently if you want, but this should give you an idea