How do I calculate the changed value after rotating the canvas rectangle in Flutter? - flutter

Maybe it's simple math, but I'm asking a question because it's not easy to find a way to calculate.
I'm drawing a rectangle using canvas and I can rotate it using canvas.rotate.
If have Rect as follows and I rotate it 30 degrees, how can I calculate the Rect value(rect LTRB) after rotation?
Rect rect = Rect.fromLTRB(100,100,200,200);
final degrees = 30;
final radians = degrees * math.pi / 180;
canvas.translate(100,100); // left top pivot
canvas.rotate(radians);
canvas.translate(-100,-100)
// after rotate, rect left,rop, right, bottom value = ?

Let C be the rotation center. Any corner P maps to
(cos Θ (P.X-C.X) - sin Θ (P.Y-C.Y) + C.X, sin Θ (P.X-C.X) + cos Θ (P.Y-C.Y) + C.Y)
Take the minima and maxima for the four corners to get the bounding box.

Related

How to reposition a circle to be outside of circumference of two other circles?

This is a question for Unity people or Math geniuses.
I'm making a game where I have a circle object that I can move, but I don't want it to intersect or go into other (static) circles in the world (Physics system isn't good enough in Unity to simply use that, btw).
It's in 3D world, but the circles only ever move on 2 axis.
I was able to get this working perfectly if circle hits only 1 other circle, but not 2 or more.
FYI: All circles are the same size.
Here's my working formula for 1 circle to move it to the edge of the colliding circle if intersecting:
newPosition = PositionOfStaticCircleThatWasJustIntersected + ((positionCircleWasMovedTo - PositionOfStaticCircleThatWasJustIntersected).normalized * circleSize);
But I can't figure out a formula if the moving circle hits 2 (or more) static circles at the same time.
One of the things that confuse me the most is the direction issue depending on how all the circles are positioned and what direction the moving circle is coming from.
Here's an example image of what I'm trying to do.
Since we're operating in a 2D space, let's approach this with some geometry. Taking a close look at your desired outcome, a particular shape become apparent:
There's a triangle here! And since all circles are the same radius, we know even more: this is an isosceles triangle, where two sides are the same length. With that information in hand, the problem basically boils down to:
We know what d is, since it's the distance between the two circles being collided with. And we know what a is, since it's the radius of all the circles. With that information, we can figure out where to place the moved circle. We need to move it d/2 between the two circles (since the point will be equidistant between them), and h away from them.
Calculating the height h is straightforward, since this is a right-angle triangle. According to the Pythagorean theorem:
// a^2 + b^2 = c^2, or rewritten as:
// a = root(c^2 - b^2)
float h = Mathf.Sqrt(Mathf.Pow(2 * a, 2) - Mathf.Pow(d / 2, 2))
Now need to turn these scalar quantities into vectors within our game space. For the vector between the two circles, that's easy:
Vector3 betweenVector = circle2Position - circle1Position
But what about the height vector along the h direction? Well, since all movement is on 2D space, find a direction that your circles don't move along and use it to get the cross product (the perpendicular vector) with the betweenVector using Vector3.Cross(). For
example, if the circles only move laterally:
Vector3 heightVector = Vector3.Cross(betweenVector, Vector3.up)
Bringing this all together, you might have a method like:
Vector3 GetNewPosition(Vector3 movingCirclePosition, Vector3 circle1Position,
Vector3 circle2Position, float radius)
{
float halfDistance = Vector3.Distance(circle1Position, circle2Position) / 2;
float height = Mathf.Sqrt(Mathf.Pow(2 * radius, 2) - Mathf.Pow(halfDistance, 2));
Vector3 betweenVector = circle2Position - circle1Position;
Vector3 heightVector = Vector3.Cross(betweenVector, Vector3.up);
// Two possible positions, on either side of betweenVector
Vector3 candidatePosition1 = circle1Position
+ betweenVector.normalized * halfDistance
+ heightVector.normalized * height;
Vector3 candidatePosition2 = circle1Position
+ betweenVector.normalized * halfDistance
- heightVector.normalized * height;
// Absent any other information, the closer position will be assumed as correct
float distToCandidate1 = Vector3.Distance(movingCirclePosition, candidatePosition1);
float distToCandidate2 = Vector3.Distance(movingCirclePosition, candidatePosition2);
if (distToCandidate1 < distToCandidate2){
return candidatePosition1;
}
else{
return candidatePosition2;
}
}

point projection into yx rotated plane

I want to simulate depth in a 2D space, If I have a point P1 I suppose that I need to project that given point P1 into a plane x axis rotated "theta" rads clockwise, to get P1'
It seems that P1'.x coord has to be the same as the P1.x and the P1'.y has to b shorter than P1.y. In a 3D world:
cosa = cos(theta)
sina = sin(theta)
P1'.x = P1.x
P1'.y = P1.y * cosa - P1.z * sina
P1'.z = P1.y * sina + P1.z * cosa
Is my P1.z = 0? I tried it and P1'.y = P1.y * cosa doesn't result as expected
Any response would be appreciated, Thanks!
EDIT: What I want, now I rotate camera and translate matrix
EDIT 2: an example of a single line with a start1 point and a end1 point (it's an horizontal line, result expected is a falling line to the "floor" as long as tilt angle increases)
I think it's a sign error or an offset needed (java canvas drawing (0,0) is at top-left), because my new line with a tilt of 0 is the one below of all and with a value of 90º the new line and the original one match
The calculation you are performing is correct if you would like to perform a rotation around the x axis clockwise. If you think of your line as a sheet of paper, a rotation of 0 degrees is you looking directly at the line.
For the example you have given the line is horizontal to the x axis. This will not change on rotation around the x axis (the line and the axis around which it is rotating are parallel to one another). As you rotate between 0 and 90 degrees the y co-ordinates of the line will decrease with P1.y*cos(theta) down to 0 at 90 degrees (think about the piece of paper we have been rotating around it's bottom edge, the x axis, at 90 degrees the paper is flat, and the y axis is perpendicular to the page, thus both edges of the page have the same y co-ordinate, both the side that is the "x-axis" and the opposite parallel side will have y=0).
Thus as you can see for your example this has worked correctly.
EDIT: The reason that multiplying by 90 degrees does not give an exactly zero answer is simply floating point rounding

Get x,y point from angle and radius

I need to get a specific point with specified angle and distance(Radius) from center point of my base UIView. I found this question How to calculate a point with an given center, angle and radius? but this doesn't give me correct point. I'm using below code to find the point,
Basically i need to find the x,y point from 100px distance and 90 degrees(clock wise) from center point of my base view.
int angle = 90 * M_PI / 180;//need to find the point of 90 degrees
int distance = 100;
int line_end_x = 160 + cos(angle)*distance;//160 is my center x
int line_end_y = 274 + sin(angle)*distance;//274 is my center y
myView.center = CGPointMake(line_end_x, line_end_y);
Above code gives me below output,
Red box is "myView" with (20px x 20px)
May be someone can tell me whats wrong i'm doing?
I doubt that you want your angle to be expressed as an int.
Your angle is Pi/2 which is 1.57.
Maybe try float angle = 90 * M_PI / 180;

Objective-C: How do I calculate the x/y coordinates of a given distance on 2 different circle sizes, inside one another?

iPhone SDK and Objective-C
Goal:
I'm trying to calculate the 'x' and 'y' coordinates of 2 circles. I have the inner circle dimensions and want to calculate what the 'x' and 'y' coordinates of the larger outer circle circumference would be to match the same width (distance) along the edge of the larger circle as it does with the inner circle.
In the end, I just need to figure out what the edge x/y points would be for the large circles edge. So that it matches the same as the inner smaller circle. If the width is 10 high on the inner circle, I need to know the x/y points to make it 10 high to the larger circle. To make a rectangle that will extend. Perpendicular lines.
Example:
I'm using the following to calculate the first 2 sets of x/y for the arc on the inner circle to plot points:
- (CGPoint)coordinatePoints:(CGFloat)radius angleDegrees:(CGFloat)degrees xAxis:(CGFloat)x yAxis:(CGFloat)y {
CGFloat pointX = (CGFloat) ((radius * cos((degrees * M_PI) / 180.0f)) + x);
CGFloat pointY = (CGFloat) ((radius * sin((degrees * M_PI) / 180.0f)) + y);
CGPoint points = CGPointMake(pointX, pointY);
return points;
}
I call it for the first 2 positions on the inner circle. I need to figure out how to make it have the distance on the outer circle as well.
CGPoint innerPoints1 = [self coordinatePoints:innerRadius angleDegrees:startingPoint xAxis:x yAxis:y];
CGPoint innerPoints2 = [self coordinatePoints:innerRadius angleDegrees:endingPoint xAxis:x yAxis:y];
If the inner circle radius is 200, and the outer circle radius is 500, I want it to still be the same thickness from the inner circle to the larger outer circle when I plot the points.
// I have these calculated.
CGContextMoveToPoint(context, innerPoints1.x, innerPoints1.y);
CGContextAddLineToPoint(context, innerPoints2.x, innerPoints2.y);
// I need to find the solution for making innerPoints3 and innerPoints4 correctly.
CGContextAddLineToPoint(context, innerPoints3.x, innerPoints3.y);
CGContextAddLineToPoint(context, innerPoints4.x, innerPoints4.y);
I have the coordinates for the inner circle lines for spaced out x/y points. I need to find the proper way to get the same width plotted for the larger circle locations. Circle sizes will always change. Lengths of the lines will be dynamic. As I'm trying to create a polygon, I need to find 2 coordinates on the larger circles, for each segment.
Any help with this would be greatly appreciated.
Information graphics: a comprehensive illustrated reference
Page 74: In the section "Circular Column Graph", my end goal is to be able to produce the same result as displayed in the 3 images.
If the spokes are not too thick, then the arc length is a good approximation of the spoke width:
So first you construct your 2 inner points, with 2 angles (a1 and a2) centered around a main spoke angle (a).
Then you calculate the distance D between these points (or you approximate it by R1*(a2-a1))
Then you take the points on the outer circle with angle values centered around the same main spoke angle: a-0.5*D/R2 and a+0.5*D/R2. These points will be D apart (measured on the arc)

Circles misplaced in MATLAB

I'm trying to draw a circle on an image in MATLAB with given X,Y coordinates and radius. Here's the chuck of code of method that draws multiple circles for me -
function circle( Xs, Ys, Rs, LineWidth, LineColor)
radius = Rs;
centerX = Xs;
centerY = Ys;
for i=1:length(centerX)
rectangle('Position',[centerX(i), centerY(i), radius(i), radius(i)],...
'Curvature',[1,1],...
'LineWidth',LineWidth,...
'LineStyle','-',...
'EdgeColor',LineColor);
end
end
But whenever I see the circles in an image, I see that the circles are a little bit misplaced from the given coordinates (for example, they moved a little bit right/down). How do I fix this problem?
What you are drawing is actually a rectangle. But you have a curvature defined, which makes it look like a circle. The circle is then defined by a bounding box with the coordinates of the rectangle. The Position of the rectangle is the upper left corner (or in a regular plot the lower left corner) and what you called the radius is actually the width and height of that bounding box.
This is what I mean:
>> figure, imshow(I)
>> rectangle('Position',[100,100,120,120],'Curvature',[1,1])
>> rectangle('Position',[100,100,120,120],'Curvature',[0,0],'EdgeColor','r')
>> axis on
This code will produce a circle and a rectangle both in the same position defined by the same rectangle coordinates in the upper left corner. The red one is the bounding box I am speaking of.
Edit: If you don't want to use the rectangle function you could maybe do the following:
>> figure,imshow(I)
>> hold on
>> plot(centerX+radius*sin(0:0.1:2*pi),centerY+radius*cos(0:0.1:2*pi))
Try the following:
function circle( Xs, Ys, Rs, LineWidth, LineColor)
radius = Rs;
centerX = Xs;
centerY = Ys;
xStart = centerX - radius;
yStart = centerY - radius;
for i=1:length(centerX)
rectangle('Position',[xStart(i) , yStart(i) , radius(i), radius(i)],...
'Curvature',[1,1],...
'LineWidth',LineWidth,...
'LineStyle','-',...
'EdgeColor',LineColor);
end
end
I hope this will work.
By subtracting the radius from the center points we can get the starting point(Top left corner) of the rectangle with curvature [1,1], that is nothing but the circle.