I'm playing a game and I want to draw a line on it. I can't use Graphics.DrawLine because it takes the window/screen coordinates, not the game coordinates.
I want to draw a line from game's pos A to games's pos B. If I put those coordinates in DrawLine, it will take X's and Y's coordinates of the window/screen, not from the game.
In the image below as a example, I want to draw the blue line, but using DrawLine it will draw the grey line.
I want to draw even if the points were not visible in the screen, as I showed in this example. If I move the screen through the game's scenario, the line keeps static since the coordinates of the points A and B keep the same.
Is there a way to do it?
The point here is to convert the world coordinates into screen coordinates. For example, suppose I want to draw a line from point x = 100, y = 600 to point x = 700, y 600 in the world map and the left of my screen is at x = 300 and it's bottom is at y = 300 in world coordinates, then the drawing should start from x = -200, y = 300 to x = 400, y = 300 in screen coordinates which would finish the drawed line at the center of the screen, assuming it's resolution is 800x600.
Since the screen moves in relation to the world scenario, the code for the world to screen method could be:
static int[] WorldToScreen(int worldX, int worldY, int worldX2, int worldY2, int screenLeft, int screenBottom)
{
int screenX = worldX - screenLeft;
int screenY = worldY - screenBottom;
int screenX2 = worldX2 - screenLeft;
int screenY2 = worldY2 - screenBottom;
return new int[] { screenX, screenY, screenX2, screenY2 };
}
Now we just take these converted coordinates and draw on the screen using GDI, DirectX or whatever you want.
PS: Screen (or camera) coordinates are usually related to the center of the screen. I used the edges here just for simplification.
Related
I have a BitMap image where the image contains a black circle. I have found all the pixels from the image that are black which represent the circle and have saved the points into a List.
Where I am lost is finding the center of the circle from coordinates saved in the list. I am thinking that I need to find the diameter of the circle somehow but how do I loop though the pixels to do that to determine that?
One naive approach could be to find the bounding box for the circle.
Seeing as you already have all of the points in a list you can find the top, bottom, left and right.
Assuming the (0,0) is the top left of the co-ordinate system:
The top is the point with min Y.
The bottom is the point with max Y.
The left is the point with min X.
The right is the point with max X.
The center of the bounding box is the center of the circle.
Similarly the width/height of the bounding box is its diameter.
Edit: an alternative solution
Find the mean of all the points in the circle.
This will then give you the center of the circle.
var aggregate = points.Aggregate((point, result) => new Point{ X = point.X + result.X, Y = point.Y + result.Y });
var center = new Point { X = aggregate.X / points.Count, Y = aggregate.Y / points.Count };
This may be a more optimal solution because it could be done while you are scanning the image for the black pixels. Rather than finding the black pixels and then using LINQ.
Circle is a relative term when it comes to images, that's to say, that the shape you are referring to is shown in pixels and may only be representative of a circle.
However to get the midpoint all you need to do is get the extents.
Assuming you have a List<Point>
var left = list.Min(x => x.X);
var right = list.Max(x => x.X);
var top= list.Min(x => x.Y);
var bottom = list.Max(x => x.Y);
Point mid = new Point();
mid.X = left + (right-left) / 2; //calculate mid point x
mid.Y = top + (bottom-top) / 2; //calculate mid point y
Note : Totally untested
double degPi = degrees * Math.PI / 180;
double a = Math.cos(degPi)*tImgCover.getScaledHeight();
double b = Math.sin(degPi)*tImgCover.getScaledWidth();
double c = -Math.sin(degPi) * tImgCover.getScaledHeight();
double d = Math.cos(degPi)* tImgCover.getScaledWidth();
double e = absX;
double f = absY;
contentByte.addImage(imgae, a, b, c, d, e, f);/*add image*/
How to rotate around the image center by itext?
If we have an Image image and coordinates x, y, we can draw the image without rotation with its lower left corner at the given coordinates like this
contentByte.addImage(image, image.getWidth(), 0, 0, image.getHeight(), x, y);
A bitmap image from the resources has a size of 1x1 with the coordinate origin at its lower left. Thus, this operation stretches the image to its correct size and moves it so its lower left is at the given coordinates.
If we want to draw the same image as if the one drawn above was rotated around its center by an angle rotate, therefore, we can do this by moving the 1x1 image so that the origin is in its center, stretch it to its correct size, rotate it, and then move the origin (which still is at the center of the rotated image) to the center of the unrotated image. These operations are easier to express using AffineTransform instances (from package com.itextpdf.awt.geom) instead number tupels. Thus:
// Draw image as if the previous image was rotated around its center
// Image starts out being 1x1 with origin in lower left
// Move origin to center of image
AffineTransform A = AffineTransform.getTranslateInstance(-0.5, -0.5);
// Stretch it to its dimensions
AffineTransform B = AffineTransform.getScaleInstance(image.getWidth(), image.getHeight());
// Rotate it
AffineTransform C = AffineTransform.getRotateInstance(rotate);
// Move it to have the same center as above
AffineTransform D = AffineTransform.getTranslateInstance(x + image.getWidth()/2, y + image.getHeight()/2);
// Concatenate
AffineTransform M = (AffineTransform) A.clone();
M.preConcatenate(B);
M.preConcatenate(C);
M.preConcatenate(D);
//Draw
contentByte.addImage(image, M);
(AddRotatedImage.java test method testAddRotatedImage)
For example drawing both images using
int x = 200;
int y = 300;
float rotate = (float) Math.PI / 3;
results in something like this:
With a Flip
The OP asked in a comment
how to add rotate and flip image？
For this you simply insert a mirroring affine transformation into the sequence of transformations above.
Unfortunately the OP did not mention which he meant a horizontal or a vertical flip. But as changing the rotation angle accordingly transforms one in the other, that isn't really necessary, either.
// Draw image as if the previous image was flipped and rotated around its center
// Image starts out being 1x1 with origin in lower left
// Move origin to center of image
AffineTransform A = AffineTransform.getTranslateInstance(-0.5, -0.5);
// Flip it horizontally
AffineTransform B = new AffineTransform(-1, 0, 0, 1, 0, 0);
// Stretch it to its dimensions
AffineTransform C = AffineTransform.getScaleInstance(image.getWidth(), image.getHeight());
// Rotate it
AffineTransform D = AffineTransform.getRotateInstance(rotate);
// Move it to have the same center as above
AffineTransform E = AffineTransform.getTranslateInstance(x + image.getWidth()/2, y + image.getHeight()/2);
// Concatenate
AffineTransform M = (AffineTransform) A.clone();
M.preConcatenate(B);
M.preConcatenate(C);
M.preConcatenate(D);
M.preConcatenate(E);
//Draw
contentByte.addImage(image, M);
(AddRotatedImage.java test method testAddRotatedFlippedImage)
The result with the same image as above:
With Interpolation
The OP asked in a yet another comment
How anti aliasing ?
The iText Image class knows an Interpolation property. By setting it to true (before adding the image to the document, obviously),
image.setInterpolation(true);
low resolution images are subject to interpolation when drawn.
E.g. using a 2x2 image with differently colored pixels instead of the image of Willi, you get the following results, first without interpolation, then with interpolation:
Confer the AddRotatedImage.java test testAddRotatedInterpolatedImage which adds this image:
Beware: iText Image property Interpolation effectively sets the Interpolate entry in the PDF image dictionary. The PDF specification notes in this context:
NOTE A conforming Reader may choose to not implement this feature of PDF, or may use any specific implementation of interpolation that it wishes.
Thus, on some viewers interpolation may occur differently than in your viewer, maybe even not at all. If you need a specific kind of interpolation on every viewer, upscale the image with the desired amount of interpolation / anti-aliasing before loading it into an iText Image.
public static BufferedImage rotateClockwise90( BufferedImage inputImage ){
int width = inputImage.getWidth();
int height = inputImage.getHeight();
BufferedImage returnImage = new BufferedImage( height, width , inputImage.getType() );
for( int x = 0; x < width; x++ ) {
for( int y = 0; y < height; y++ ) {
returnImage.setRGB( height-y-1, x, inputImage.getRGB( x, y ) );
}
}
return returnImage;
}
I would like to draw a radar on a pictureBox. Drawing points is no problem but I am struggling with basic maths. Maybe I am too tired.
I have a pictureBox that is 200x200. I have loaded a small, centered image inside the picturebox (4x4) which symbolizes the current player.
I have build a function called
PaintRadar(int meX, int meY, int enemyX, int enemyY)
The parameters could have the following values: meX = 27000, meY = 30000, enemyX = 26000, enemyY = 28000
The desired result is to have the enemies around me and I am always centered in the pictureBox. What do I have to calculate to center meX and meY in the pictureBox?
Thanks
Assume the player is in the middle of the enemies and draw the enemies around the center based on the difference between their positions and the player's position.
Think about it as though the player is the origin. By subtracting the player's position from the enemy's position you are putting the enemy position into a coordinate system with the player at the center. This is essentially what you're radar is.
Example:
// Get differences. d is short for difference (or delta :)).
int dy = enemyY - meY;
int dx = enemyX - meX;
// Then scale the dy and dx values so they fix in the picture box.
dy *= scaleY;
dx *= scaleX;
Then you would draw the enemies at (dx,dy) on the picture box.
Scale should be a formula like this:
scaleY = (1 / maxDetectionDistance) * (heightOfRadarBox / 2);
scaleX = (1 / maxDetectionDistance) * (widthOfRadarBox / 2);
Anything greater than your radar's limit should not be drawn.
// Don't draw if enemy is too far away for radar to pick up.
if (Math.Abs(dy) > maxDetectionDistance || Math.Abs(dx) > maxDetectionDistance)
{
return;
}
As I have known, the correct size for the camera is half of your wanted width, so in my case:
Width: 1920
Height: 1080
Camera Size: 540
Each block represents 64x64 pixels
In unity I was having this problem by start placing blocks in the -960 (half of 1920, which is the camera minimun x):
Since as shown I thought, just add half of the blocks width to its x, and subtract half of its height in its y, so this happen:
After a lots of tries I figured out it was supposed to be placed at -938 and 518, which is 22 units away from the corner, by placing in that position this is my result:
(Ignore the other blocks for now, they are with wrong algorithm now)
So what I ask is:
Why 22? How can I get to that value from my starting values? (Please don't answer something like 2.032%, because probably have something more integer to its math calculation)
Code if needed:
float height = Camera.main.orthographicSize *2f;
float width = height / (float)Screen.height * (float)Screen.width;
Destroy(map);
map = new GameObject();
print("W: "+width+". H: "+height);
lastH=height;
lastW=width;
for (int i=0; i<30; i++) {
for (int j=0; j<16; j++) {
if(mapa[i,j]>0){
GameObject aux = objetos[mapa[i,j]-1];
float wX=aux.transform.localScale.x,hY=aux.transform.localScale.y;
print ("wX: "+wX+", hY: "+hY);
float unidadeW = 2*(float)lastW/(float)(20*wX);
float unidadeH = 2*(float)lastH/(float)(20*hY);
//aux.transform.localScale = new Vector3(unidadeW,unidadeH,0);
GameObject t = (GameObject)Instantiate(aux, new Vector2(j*wX*wX/100-width/2+wX*wX/200,-i*hY*hY/100+height/2-hY*hY/200),Quaternion.identity);
t.transform.parent = map.transform;
}
}
}
The correct way to make a distance between two units is their diagonal, see the image below:
Doesn't matter which is your orientation point, if its top left or center, the distance between the blocks will be √2*side, so the correct distance between mine was around 22, and I can find it by doing this equation:
sqrt(2)/2*32=22.62 (the correct distance between two tiles of 64x64), instead of using 64+ at the last x and 64+ at the last y the right way to do is by adding 22.62 at both multiplications.
Basically I want to take a fixed straight line across the devices point of view and determine if anything intercepts it but in my example I want to make the "laser line" configurable with regards to the distance from the top of the field of view.
Now it's easy enough to get the depth data at a given pixel point simply by doing this.
var depthInMM = DepthImagePixel.Depth;
and its also easy to simply say I want to focus on the 100th line of pixels from the top by doing something like this.
for (int i = 0; i < this._DepthPixels.Length; ++i) //_DepthPixels.Length is obviously 307200 for 640x480
{
if (i >= 64000 && i <= 64640) //Hundredth vertical pixel line
{
//Draw line or whatever
}
}
Which ends up with something like this.
BUT for example I might want to have the line intercept at 50 cm from the top of the field of view at 3 meters depth. Now obviously I understand that as the depth increases so does the area represented but I cannot find any reference or myself work out how to calculate this relationship.
So, how can one calculate the coordinate space represented at a given depth utilizing the Kinect sensor. Any help sincerely appreciated.
EDIT:
So if I understand correctly this can be implemented as such in C#
double d = 2; //2 meters depth
double y = 100; //100 pixels from top
double vres = 480; //480 pixels vertical resolution
double vfov = 43; //43 degrees vertical field of view of Kinect
double x = (2 * Math.Sin(Math.PI * vfov / 360) * d * y) / vres;
//x = 0.30541768893691434
//x = 100 pixels down is 30.5 cm from top field of view at 2 meters depth
2 sin(PI VFOV / 360) D Y
X = --------------------------
VRES
X: distance of your line from the top of the image in meters
D: distance - orthogonal to the image plane - of your line from the camera in meters
Y: distance of your line from the top of the image in pixels
VRES: vertical resolution of the image in pixels
VFOV: vertical field of view of the camera in degrees