In Processing (2) I am currently creating a Java class diagram in a UML-ish sort of style. Classes, Interfaces and the like are represented as rectangles, created using processing's rect() method. A class is created for each rectangle to be displayed storing information about it, with a display() method which draws the rect.
In order to implement zooming in and out of this diagram (to facilitate very large or very small projects), I have added code which changes a scale variable each time the mousewheel is scrolled in and out. The code then uses Processing's scale() method each time the class rectangles, etc, are drawn.
I am also attempting to detect when one of these rectangles is moused over. This is currently done with the following code inside the class representing a rectangle:
//Checks to see if a mouse X and Y (posX and posY) position is inside the rectangle.
public boolean positionCollides(int posX, int posY) {
boolean xCollides = false, yCollides = false;
if((centreX + (width/2) >= posX) && (centreX - (width/2) <= posX)){
xCollides = true;
}
if((centreY + (height/2) >= posY) && (centreY - (height/2) <= posY)){
yCollides = true;
}
if(xCollides && yCollides){
return true;
}
else{
return false;
}
}
Where mouseX and mouseY are fed into that method. Note in this code centreX and centreY are variables which contain(ed) the co-ordinates of the centre of the rectangle when it was first created.
However, when I zoom in and the scaling is applied to the rectangle's display() method, the mousing over breaks - presumably because the things are displayed at slightly different X and Y co-ordinates and it's still checking the old ones.
Is there a way I can change my above positionCollides method to help it deal with the result of the scaling? How can I get this sorted?
I've attempted to sort this by putting the code which calls positionCollides after the scale() call in the display method (in an attempt to get the mouseX and mouseY values to scale as well), and by multiplying mouseX and mouseY by the scale (ie 0.9, 1.1) to try and get them to the correct values.
Perhaps there's a way I can alter the object's centreX and centreY dynamically?
Thanks for reading my wall of text.
tl;dr - How can I detect if the mouse pointer is inside a shape/rectangle which has been scaled in Processing?
Here, try this:
(tested in processing 1.5)
int x, y, sz;
float factor = 0.87;//any value here
float transx = 50;//any value here
float transy = 25;//any value here
void setup()
{
size(400, 400);
x=100;
y=100;
sz=50;
}
void draw()
{
noFill();
//draw at original positon, no fill
rect(x, y, sz, sz);
scale(factor);
translate(transx, transy);
fill(255);
//draw after scalling and positioning filled this is tested for insidness
rect(x, y, sz, sz);
if ( mouseX / factor - transx > x &&
mouseX / factor - transx < x+sz &&
mouseY / factor - transy > y &&
mouseY / factor - transy < y+sz)
{
println("i'm inside!!!");
}
else
{
println("i'm outside");
}
}
Related
I am programming a game in java with reference to youtube videos and have come across some code and algorithms that I don't quite understand.
private float x, y;
public Camera(float x, float y) {
this.x = x;
this.y = y;
}
public void tick(GameObject object) {
x += ((object.getX() - x) - 1000 / 2) * 0.05f;
y += ((object.getY() - y) - 563 / 2) * 0.05f;
System.out.println(x);
if (x <= 0)
x = 0;
if (x >= 1032)
x = 1032;
if (y <= 0)
y = 0;
if (y >= 563 + 48)
y = 563 + 48;
}
public float getX() {
return x;
}
public void setX(float x) {
this.x = x;
}
public float getY() {
return y;
}
public void setY(float y) {
this.y = y;
}
}
Now, I understand everything here except this
x += ((object.getX() - x) - 1000 / 2) * 0.05f;
y += ((object.getY() - y) - 563 / 2) * 0.05f;
which is within the tick method. The method is what updates the camera to follow the player around the screen. The GameObject parameter is parsed in as the player object. How do the cameras x and y follow the player with this algorithm? Why do we subtract players x/y by the cameras x/y and then all multiplied by a float. I get the subtracting the windows width / 2 and height / 2 centers the player in the middle of the screen part.
The float is what gives the camera a smoother feel according to RealtutsGML. It's not strictly fixed on the players position, it slides along a little. But why does * 0.05 make this happen?
Then in the game class inside the main rendering method the cameras getX and getY method alongside the graphics2D's translate method are to determine where the camera moves within the game.
Graphics g = bs.getDrawGraphics();
Graphics2D g2d = (Graphics2D) g;
g.setColor(Color.BLUE);
g.fillRect(0, 0, 1000, 563);
g2d.translate(-camera.getX(), -camera.getY());
handler.render(g);
g2d.translate(camera.getX(), camera.getY());
Apparently, the screen center will be at the coordinates (x + 1000 / 2, y + 563 / 2). With this in mind, let's take a closer look at the formula (only the x part; y is exactly the same):
x += ((object.getX() - x) - 1000 / 2) * 0.05f;
Re-arranging the parenthesis, we get:
x += (object.getX() - (x + 1000 / 2)) * 0.05f;
We see that the screen center is right there. Let us substitute it with the variable c to make things clearer:
x += (object.getX() - c) * 0.05f;
The first term object.getX() - c is the difference between the object's position and the screen center. Hence, if the object is centered, this difference is zero. This is exactly the amount that we need to move the camera to exactly center the object. And if we had
x += (object.getX() - c);
... we would always keep the object at the screen center. But we have a factor of 0.05 there. Hence, we are not moving the camera by the entire distance. Only by a fraction of it. I.e., we are moving the object closer to the screen center. If it is far away, it will move fast (because the difference is large). If it is already close, it will move slowly (because the difference is small). The factor of 0.05 is setting how immediate the centering will be. A factor of 0 would not move the object at all, a factor of 1 would immediately center the object. Everything in between represents a smooth motion with different accelerations. You can imagine this factor as the stiffness of a spring between the screen center and the object.
I have spent hours looking for the solution to this: I am developing a little top-down game with libgdx (maybe it matters what engine i am using). Now i have to implement the collision detection between my character (circle) and the wall (rectangle). I want the character to slide along the wall on collision, if sliding is possible.
Let me explain:
If i am moving 45 degrees right up i can collide with the down, the
left or the corner of a wall.
If i collide with the left i want to stop x-movement and move only up. If i leave the wall then i want to go on moving right up. The same
with the down side (stop y-movement)
If i collide with the Corner i want to stop movement (sliding not possible).
What i am doing actually is to check if the left line of the rectangle intersects my circle. Then i check intersection between the left line of wall and my circle and the bottom line of wall and my circle. Depending on which intersection occuret i set back x/y possition of my circle and set x/y Speed to 0. The Problem is, that most times not a collision bt an overlap occures. So the bottom check returns true, even if in reality the circle would only collide with the right. In this case both intersection test would return true and i would reset both speeds like on the Corner collision.
How can i solve this Problem? Is ther a better way to detect collision and collision side or corner?
I don't Need the exact Point of collision just the side of the rectangle.
Edit:
I have to say, that the rects aren't rotated just parallel to the x-axis.
You can find an explanation for circle/rectangle collision below, but please note that this type of collision might not be necessary for your needs. If, for example, you had a rectangle bounding box for your character the algorithm would be simpler and faster. Even if you are using a circle, it is probable that there is a simpler approach that is good enough for your purposes.
I though about writing the code for this, but it would take too long so here is only an explanation:
Here is a example movement of your character circle, with its last (previous) and current positions. Wall rectangle is displayed above it.
Here is that same movement, dotted lines represent the area the circle sweeps in this move. The sweep area is capsule shaped.
It would be difficult to calculate the collision of these two object, so we need to do this differently. If you look at the capsule on the previous image, you will see that it is simply the movement line extended in every direction by the radius of the circle. We can move that "extension" from the movement line to the wall rectangle. This way we get a rounded rectangle like on the image below.
The movement line will collide with this extended (rounded) rectangle if and only if the capsule collides with the wall rectangle, so they are somehow equivalent and interchangeable.
Since this collision calculation is still non-trivial and relatively expensive, you can first do a fast collision check between the extended wall rectangle (non-rounded this time) and the bounding rectangle of the movement line. You can see these rectangles on the image below - they are both dotted. This is a fast and easy calculation, and while you play the game there will probably NOT be an overlap with a specific wall rectangle >99% of the time and collision calculation will stop here.
If however there is an overlap, there is probably a collision of the character circle with wall rectangle, but it is not certain as will be demonstrated later.
Now you need to calculate the intersection between the movement line itself (not its bounding box) and the extended wall rectangle. You can probably find an algorithm how to do this online, search for line/rectangle intersection, or line/aabb intersection (aabb = Axis Aligned Bounding Box). The rectangle is axis-aligned and this makes the calculation simpler. The algorithm can give you intersection point or points since it is possible that there are two - in this case you choose the closest one to the starting point of the line. Below is an example of this intersection/collision.
When you get an intersection point, it should be easy to calculate on which part of the extended rectangle this intersection is located. You can see these parts on the image above, separated by red lines and marked with one or two letters (l - left, r - right, b - bottom, t - top, tl - top and left etc).
If the intersection is on parts l, r, b or t (the single letter ones, in the middle) then you are done. There is definitely a collision between character circle and wall rectangle, and you know on which side. In the example above, it is on the bottom side. You should probably use 4 variables called something like isLeftCollision, isRightCollision, isBottomCollsion and isTopCollision. In this case you would set isBottomCollision to true, while the other 3 would remain at false.
However, if the intersection is on the corner, on the two-letter sections, additional calculations are needed to determine if there is an actual collision between character circle and wall rectangle. Image below shows 3 such intersections on the corners, but there is an actual circle-rectangle collision on only 2 of them.
To determine if there is a collision, you need to find an intersection between the movement line and the circle centered in the closest corner of the original non-extended wall rectangle. The radius of this circle is equal to the radius of character circle. Again, you can google for line/circle intersection algorithm (maybe even libgdx has one), it isn't complex and shouldn't be hard to find.
There is no line/circle intersection (and no circle/rectangle collision) on bl part, and there are intersections/collisions on br and tr parts.
In the br case you set both isRightCollision, isBottomCollsion to true and in the tr case you set both isRightCollision and isTopCollision to true.
There is also one edge case you need to look out for, and you can see it on the image below.
This can happen if the movement of previous step ends in the corner of the the extended rectangle, but outside the radius of the inner rectangle corner (there was no collision).
To determine if this is the case, simply check if movement staring point is inside the extended rectangle.
If it is, after the initial rectangle overlap test (between extended wall rectangle and bounding rectangle of movement line), you should skip line/rectangle intersection test (because in this case there might not be any intersection AND still be a circle/rectangle collision), and also simply based on movement stating point determine which corner you are in, and then only check for line/circle intersection with that corner's circle. If there is intersection, there is a character circle/wall rectangle collision, otherwise not.
After all of this, the collision code should be simple:
// x, y - character coordinates
// r - character circle radius
// speedX, speedY - character speed
// intersectionX, intersectionY - intersection coordinates
// left, right, bottom, top - wall rect positions
// I strongly recomment using a const "EPSILON" value
// set it to something like 1e-5 or 1e-4
// floats can be tricky and you could find yourself on the inside of the wall
// or something similar if you don't use it :)
if (isLeftCollision) {
x = intersectionX - EPSILON;
if (speedX > 0) {
speedX = 0;
}
} else if (isRightCollision) {
x = intersectionX + EPSILON;
if (speedX < 0) {
speedX = 0;
}
}
if (isBottomCollision) {
y = intersectionY - EPSILON;
if (speedY > 0) {
speedY = 0;
}
} else if (isTopCollision) {
y = intersectionY + EPSILON;
if (speedY < 0) {
speedY = 0;
}
}
[Update]
Here is a simple and I believe efficient implementation of segment-aabb intersection that should be good enough for your purposes. It is a slightly modified Cohen-Sutherland algorithm. Also you can check out the second part of this answer.
public final class SegmentAabbIntersector {
private static final int INSIDE = 0x0000;
private static final int LEFT = 0x0001;
private static final int RIGHT = 0x0010;
private static final int BOTTOM = 0x0100;
private static final int TOP = 0x1000;
// Cohen–Sutherland clipping algorithm (adjusted for our needs)
public static boolean cohenSutherlandIntersection(float x1, float y1, float x2, float y2, Rectangle r, Vector2 intersection) {
int regionCode1 = calculateRegionCode(x1, y1, r);
int regionCode2 = calculateRegionCode(x2, y2, r);
float xMin = r.x;
float xMax = r.x + r.width;
float yMin = r.y;
float yMax = r.y + r.height;
while (true) {
if (regionCode1 == INSIDE) {
intersection.x = x1;
intersection.y = y1;
return true;
} else if ((regionCode1 & regionCode2) != 0) {
return false;
} else {
float x = 0.0f;
float y = 0.0f;
if ((regionCode1 & TOP) != 0) {
x = x1 + (x2 - x1) / (y2 - y1) * (yMax - y1);
y = yMax;
} else if ((regionCode1 & BOTTOM) != 0) {
x = x1 + (x2 - x1) / (y2 - y1) * (yMin - y1);
y = yMin;
} else if ((regionCode1 & RIGHT) != 0) {
y = y1 + (y2 - y1) / (x2 - x1) * (xMax - x1);
x = xMax;
} else if ((regionCode1 & LEFT) != 0) {
y = y1 + (y2 - y1) / (x2 - x1) * (xMin - x1);
x = xMin;
}
x1 = x;
y1 = y;
regionCode1 = calculateRegionCode(x1, y1, r);
}
}
}
private static int calculateRegionCode(double x, double y, Rectangle r) {
int code = INSIDE;
if (x < r.x) {
code |= LEFT;
} else if (x > r.x + r.width) {
code |= RIGHT;
}
if (y < r.y) {
code |= BOTTOM;
} else if (y > r.y + r.height) {
code |= TOP;
}
return code;
}
}
Here is some code example usage:
public final class Program {
public static void main(String[] args) {
float radius = 5.0f;
float x1 = -10.0f;
float y1 = -10.0f;
float x2 = 31.0f;
float y2 = 13.0f;
Rectangle r = new Rectangle(3.0f, 3.0f, 20.0f, 10.0f);
Rectangle expandedR = new Rectangle(r.x - radius, r.y - radius, r.width + 2.0f * radius, r.height + 2.0f * radius);
Vector2 intersection = new Vector2();
boolean isIntersection = SegmentAabbIntersector.cohenSutherlandIntersection(x1, y1, x2, y2, expandedR, intersection);
if (isIntersection) {
boolean isLeft = intersection.x < r.x;
boolean isRight = intersection.x > r.x + r.width;
boolean isBottom = intersection.y < r.y;
boolean isTop = intersection.y > r.y + r.height;
String message = String.format("Intersection point: %s; isLeft: %b; isRight: %b; isBottom: %b, isTop: %b",
intersection, isLeft, isRight, isBottom, isTop);
System.out.println(message);
}
long startTime = System.nanoTime();
int numCalls = 10000000;
for (int i = 0; i < numCalls; i++) {
SegmentAabbIntersector.cohenSutherlandIntersection(x1, y1, x2, y2, expandedR, intersection);
}
long endTime = System.nanoTime();
double durationMs = (endTime - startTime) / 1e6;
System.out.println(String.format("Duration of %d calls: %f ms", numCalls, durationMs));
}
}
This is the result I get from executing this:
Intersection point: [4.26087:-2.0]; isLeft: false; isRight: false; isBottom: true, isTop: false
Duration of 10000000 calls: 279,932343 ms
Please note that this is desktop performance, on an i5-2400 CPU. It will probably be much slower on Android devices, but I believe still more than sufficient.
I only tested this superficially, so if you find any errors, let me know.
If you use this algorithm, I believe you don't need special handling for that case where starting point is in the corner of the extended wall rectangle, since in this case you will get the intersection point at line start, and the collision detection procedure will continue to the next step (line-circle collision).
I suppose you determine the collision by calculating the distance of the circles center with the lines.
We can simplify the case and tell that the circle colliding with the corner if both distances are equal and smaller than the radius. The equality should have a tolerance of course.
More - may be not necessary- realistic approach would be to consider x,y speed and factor it in the equality check.
I'm working on a simple game and i need these squareBumpers which simply stands idle and when got hit, collides and reflects the ball. But currently the ball just flies through my squareBumpers. I can only use java awt and swing libraries. Here's the code:
class squareBumper {
private int x = 300;
private int y = 300;
private Color color = new Color(66,139,139);
public void paint(Graphics g) {
Rectangle clipRect = g.getClipBounds();
g.setColor(color);
g.fillRect(x, y, 31, 31);
}
}
class BouncingBall {
// Overview: A BouncingBall is a mutable data type. It simulates a
// rubber ball bouncing inside a two dimensional box. It also
// provides methods that are useful for creating animations of the
// ball as it moves.
private int x = 320;
private int y = 598;
public static double vx;
public static double vy;
private int radius = 6;
private Color color = new Color(0, 0, 0);
public void move() {
// modifies: this
// effects: Move the ball according to its velocity. Reflections off
// walls cause the ball to change direction.
x += vx;
if (x <= radius) { x = radius; vx = -vx; }
if (x >= 610-radius) { x = 610-radius; vx = -vx; }
y += vy;
if (y <= radius) { y = radius; vy = -vy; }
if (y >= 605-radius) { y = 605-radius; vy = -vy; }
}
public void randomBump() {
// modifies: this
// effects: Changes the velocity of the ball by a random amount
vx += (int)((Math.random() * 10.0) - 5.0);
vx = -vx;
vy += (int)((Math.random() * 10.0) - 5.0);
vy = -vy;
}
public void paint(Graphics g) {
// modifies: the Graphics object <g>.
// effects: paints a circle on <g> reflecting the current position
// of the ball.
// the "clip rectangle" is the area of the screen that needs to be
// modified
Rectangle clipRect = g.getClipBounds();
// For this tiny program, testing whether we need to redraw is
// kind of silly. But when there are lots of objects all over the
// screen this is a very important performance optimization
if (clipRect.intersects(this.boundingBox())) {
g.setColor(color);
g.fillOval(x-radius, y-radius, radius+radius, radius+radius);
}
}
public Rectangle boundingBox() {
// effect: Returns the smallest rectangle that completely covers the
// current position of the ball.
// a Rectangle is the x,y for the upper left corner and then the
// width and height
return new Rectangle(x-radius, y-radius, radius+radius+1, radius+radius+1);
}
}
Take a look at the classes that implement the Shape interface. There are ellipses and other shapes, and they all implement a intersects(Rectangle2D) method. It might help you if you don't want to perform intersection yourself.
As for dealing with the collision, well, it depends on the level of accuracy you want. Simply deflecting the ball of edges is quite easy. Just determine whether the collided side of the rectangle is vertical or horizontal, and negate the corresponding velocity component accordingly. If you want to handle the corners, well that is a bit more complicated.
You need to detect when the ball has collided with the bumper. You have the boundingBox() method of BouncingBall, this will get you a rectangle that contains your ball. So you need to check if this rectangle intersects your square bumper (which implies a collision), and then do something with that.
I have a game of a rocket landing game, where the player is the rocket and you must land it safely at the right speed on the landing pad. This was taken from www.gametutorial.net
Its actually for educational purposes and I recently added a still meteor in the game.
When the player hits the meteor (touches) the game is over.
if(...) {
playerRocket.crashed = true;
}
My problem is there I need to replace the "..." with the actual condition that "Has the rocket crashed into the meteor?"
Plus the following variables (coordinates, height and width) for use -
[All Integers]:
X and Y coordinates: playerRocket.x, playerRocket.y, meteor.x, meteor.y
Height and Width: playerRocket.rocketImgHeight, playerRocket.rocketImgWidth, meteor.meteorImgHeight, meteor.meteorImgWidth
For collision detection in 2D games, you can use rectangles. I'd use a base class called GObject and inherit all objects in the game from it.
public class GObject
{
private Rectangle bounds;
public float x, y, hspeed, vspeed;
private Image image;
public GObject(Image img, float startx, float starty)
{
image = img;
x = startx;
y = starty;
hspeed = vspeed = 0;
bounds = new Rectangle(x, y, img.getWidth(null), img.getHeight(null));
}
public Rectangle getBounds()
{
bounds.x = x;
bounds.y = y;
return bounds;
}
}
There's also other methods like update() and render() but I'm not showing them. So to check for collision between two objects use
public boolean checkCollision(GObject obj1, GObject obj2)
{
return obj1.getBounds().intersects(obj2.getBounds());
}
Also, there's a specific site for game related questions. Go to Game Development Stack Exchange
You need to check if you hit the object, meaning, if the click coordinates are within the object's Rectangle.
if( playerRocket.x + playerRocket.width >= clickX && playerRocket.x <= clickX &&
playerRocket.y + playerRocket.height >= clickY && playerRocket.Y <= clickY ) {
playerRocket.crashed = true;
}
ok guys i want to rotate a PVector that i have in this method.
this method replaces the posX and posY by the x and y of the PVector.
the movement is determinated by a joystick that comes from arduino it moves the image in x and y but i would like to turn the vector depending on the axis the joystick is looking
public void moverPjUno(PVector coordenadas) {
if(areaXad==-1 && areaXat==-1){
miPersonaje.setPosX((miPersonaje.getPosX())+(int)coordenadas.x);
}
if(areaYab==-1 && areaYar==-1){
miPersonaje.setPosY((miPersonaje.getPosY())+(int)coordenadas.y);
}
}
I don't have an Arduino hooked up and I don't know what kind of information your joystick is giving you, so I made a Processing example that uses the mouse to imitate the joystick:
int rad = 100;
void setup() {
size(400, 400);
}
void draw() {
background(255);
ellipse(width/2, height/2, rad*2, rad*2);
// Using the mouse to mimic the position of the joystick
float theta = atan2(mouseY-height/2, mouseX-width/2);
// Get the new position
float x = width/2+cos(theta)*rad;
float y = height/2+sin(theta)*rad;
// Show the new position
ellipse(x, y, 30, 30);
}
The atan2 function gives the angle to the mouse position, replace the arguments with the equivalent of the joystick position. The smaller ellipse being drawn shows where your miPersonaje would be set based on x and y earlier in the code. The rad variable is arbitrary and just for displaying purposes, you can set it to be whatever you want (if needed at all).