In SFML how would I rotate a shape around some point using transformations? I know how to use cos and sin but like to understand how to use transformation.
I think my problem is that I don't get the sfml interface. Here is one example:
// Draw circle at center
sf::CircleShape c;
c.setFillColor(sf::Color::Red);
c.setPosition(width / 2, height / 2);
c.setRadius(50);
c.setOrigin({50, 50});
Now, how would I move and rotate the circle around the center of the screen inside the frame refresh loop?
Turns out there is rotate function which takes a center point.
sf::CircleShape c;
c.setFillColor(sf::Color::Red);
c.setPosition(width / 2.f, height / 2.f - 100);
c.setRadius(50);
c.setOrigin({50, 50});
float angle = 1.0;
sf::Transform t;
while(true)
{
window.clear(sf::Color::Black);
t.rotate(angle, { width/2.f, height / 2.f });
window.draw(c, t);
window.display();
}
Related
I have a vector between (posX, posY) and (mouseX, mouseY), and I get the mouse position as a positive integer with allegro's event library. From this vector using an arc tangent I get the radian of (deltaX, deltaY). I then plug that radian into an al_draw_rotated_bitmap function. I expect the bitmap to point towards where the mouse cursor is, but the issue I have is that the radian or vector is causing it to be rotated perpendicular to the cursor.
Here is the relevant code:
void setRotation(int dx, int dy)
{
float deltax = posX - mouseX;
float deltay = posY - mouseY;
rotation = atan2(deltay, deltax);
}
void Player::draw()
{
al_draw_rotated_bitmap(player, al_get_bitmap_width(player) / 2, al_get_bitmap_height(player) / 2, posX, posY, rotation, 0);
}
int main()
{
while(true)
{
player.setRotation(mouseX, mouseY);
player.draw();
al_flip_display();
}
}
Imagine (deltax, deltay) = (0, 100), that is the mouse is 100 pixels above the object, and so the picture (I believe) shouldn't be rotated at all. But atan2(deltay, deltax) = atan2(100, 0) = π/2, that's why your picture is rotated perpendicularly.
To fix this you should change it to atan2(deltax, deltay), possibly adding - before arguments depending on the direction of X and Y axes in Allegro, which I don't know.
In other words, atan2 measures the angle relative to X axis, but in your case the angle should be measured relative to Y axis (because alignment on Y axis means no rotation), so you should swap its arguments.
I'm making a pie chart program and I'm creating the pie segments with "gluPartialDisks". However, I also want to check if a point is within the area of one of the disks (The point in question being my mouse cursor). I know how to find the position of a mouse cursor, but how can I check if it is within the area of a disk?
Quick snippet of code:
glTranslatef(-0.3, 0, 0);
gluPartialDisk(gluNewQuadric(), 0, 0.65, 10, 1,
((2 * 3.141592654 * 0.65) * (/*Specific angle*/) - (/*Specific angle*/ * 5),
/*Different angle*/ * 360);
As long as your partial disks are parallel to the screen, and rendered with a parallel projection, it's easiest to do the math without getting OpenGL involved at all.
Say you were drawing a partial disk with:
glTranslatef(xPos, yPos, 0.0f);
gluPartialDisk(quadric, innerRad, outerRad, slices, loops, startAng, sweepAng);
Now if you want to test point (x0, y0), you subtract the translation vector, and then calculate the polar coordinates:
x0 -= xPos;
y0 -= yPos;
float dist = sqrt(xPos * xPos + yPos * yPos);
float ang = atan2(yPos, xPos);
To be inside the partial disk, the distance to the center would have to be within the range of radii:
if (dist < innerRad || dist > outerRad) {
// it's outside!
}
The angle is slightly trickier because it wraps around. Also, the result of atan2() is in radians, measured counter-clockwise from the x-axis in a range [-PI, PI] while the arguments to gluPartialDisk() are in degrees, and measured clockwise from the y-axis. With startAng and sweepAng in the range [0.0, 360.0] degrees, the interval test logic could look like this (untested):
ang *= 180.0f / PI; // convert to degrees
ang = 90.0f - ang; // make clockwise, relative to y-axis
if (ang < 0.0f) {
ang += 360.0f; // wrap into range [0.0, 360.0]
}
ang -= startAng; // make relative to startAng
if (ang < 0.0f) {
ang += 360.0f; // ... and back into range [0.0, 360.0]
}
if (ang > sweepAng) {
// it's outside!
} else {
// it's inside!
}
OpenGL is not going to do this for you, unfortunately.
You can either compute a bounding area for your disk and then do some point vs. bounding area intersection testing (which would be complicated for a shape like this) or you can implement color picking.
Since this is for a charting program, it may be very useful to go with the latter approach. The idea there is to assign each object in your scene a unique color code, draw the scene and then read back the color at the cursor's position. This approach is pixel-perfect and much too slow for most applications, but for a simple charting program it is perfect.
I'm having little trouble whit trying to compare rotated 2D Quads coordinates to rotated x and y coordinates. I'm trying to determine if mouse was clicked inside the quad.
1) the rot's are this classes objects: (note : the operator << is overloaded for the use of the rotate coords func)
class Vector{
private:
std::vector <float> Vertices;
public:
Vector(float, float);
float GetVertice(unsigned int);
void SetVertice(unsigned int, float);
std::vector<float> operator <<(double);
};
Vector::Vector(float X,float Y){
Vertices.push_back(X);
Vertices.push_back(Y);
}
float Vector::GetVertice(unsigned int Index){
return Vertices.at(Index);
}
void Vector::SetVertice(unsigned int Index,float NewVertice){
Vertices.at(Index) = NewVertice;
}
//Return rotated coords:D
std::vector <float> Vector::operator <<(double Angle){
std::vector<float> Temp;
Temp.push_back(Vertices.at(0) * cos(Angle) - Vertices.at(1) * sin(Angle));
Temp.push_back(Vertices.at(0) * sin(Angle) + Vertices.at(1) * cos(Angle));
return Temp;
}
2) Comparasion and rotation of the coordinates THE NEW VERSION
Vector Rot1(x,y),Rot3(x,y);
double Angle;
std::vector <float> result1,result3;
Rot3.SetVertice(0,NewQuads.at(Index).GetXpos() + NewQuads.at(Index).GetWidth());
Rot3.SetVertice(1,NewQuads.at(Index).GetYpos() + NewQuads.at(Index).GetHeight());
Angle = NewQuads.at(Index).GetRotation();
result1 = Rot1 << Angle; // Rotate the mouse x and y
result3 = Rot3 << Angle; // Rotate the Quad x and y
//.at(0) = x and .at(1)=y
if(result1.at(0) >= result3.at(0) - NewQuads.at(Index).GetWidth() && result1.at(0) <= result3.at(0) ){
if(result1.at(1) >= result3.at(1) - NewQuads.at(Index).GetHeight() && result1.at(1) <= result3.at(1) ){
when i run this it works perfectly at 0 angle but when you rotate the quad, it fails.
and by failing I mean the activation area seem to just disappear.
am I doing the rotation of the coordinates correctly? or is it the comparison?
if it's the comparison how would you do it properly, I have tried changing the if's but whit out any luck...
edit
the drawing of the quad(Happens before the testing):
void Quad::Render()
{
if(!CheckIfOutOfScreen()){
glPushMatrix();
glLoadIdentity();
glTranslatef(Xpos ,Ypos ,0.f);
glRotatef(Rotation,0.f,0.f,1.f); // same rotation is used for the testing later...
glBegin(GL_QUADS);
glVertex2f(Zwidth,Zheight);
glVertex2f(Width,Zheight);
glVertex2f(Width,Height);
glVertex2f(Zwidth,Height);
glEnd();
if(State != NOT_ACTIVE)
RenderShapeTools();
glPopMatrix();
}
}
basicly I'm trying to test if mouse was clicked inside this quad:
Image
There is more than one way to achieve what you want, But from the image you posted I assume you want to draw to a surface the same size as your screen (or window) using only 2D graphics.
As you know in 3D graphics we talk about 3 coordinate references. The first is the coordinate reference of the object or model to be drawn, the second is the coordinate reference of the camera or view and the third is the coordinate reference of the screen.
In OpenGL the first two coordinate references are established through the MODELVIEW matrix and the third is achieved by the PROJECTION matrix and the viewport transformation.
In your case you want to rotate a quad and place it somewhere on the screen. Your quad has it's own model coordinates. Let's assume that for this specific 2D quad the origin is at the center of the quad and it has the dimensions of 5 by 5. Also let's assume that if we look to the center of the quad then the X axis points to the RIGHT, the Y axis points UP and the Z axis points towards the viewer.
The unrotated coordinates of the quad will be (from bottom left clockwise): (-2.5,-2.5,0), (-2.5,2.5,0), (2.5,2.5,0), (2.5,-2.5,0)
Now we want to have a camera and projection matrices and viewport so to simulate a 2D surface with known dimensions.
//Assume WinW contains the window width and WinH contains the windows height
glViewport(0,0,WinW,WinH);//Set the viewport to the whole window
glMatrixMode (GL_PROJECTION);
glLoadIdentity ();
glOrtho (0, WinW, WinH, 0, 0, 1);//Set the projection matrix to perform a 2D orthogonal projection
glMatrixMode (GL_MODELVIEW);
glLoadIdentity ();//Set the camera matrix to be the Identity matrix
You are now ready to draw your quad an this 2D surface with dimensions WinW, WinH. In this context if you just draw your quad using it's current vertices you will have the quad drawn with it's center at the bottom left of the window with each side measuring 5 pixels so you will actually see only quarter of a quad. If you want to rotate and move it you will do something like this:
//Prepare matrices as shown above
//Viewport coordinates range from bottom left (0,0) to top right (WinW,WinH)
float dX = CenterOfQuadInViewportCoordinatesX, dY = CenterOfQuadInViewportCoordinatesY;
float rotA = QuadRotationAngleAroundZAxisInDegrees;
float verticesX[4] = {-2.5,-2.5,2.5,2.5};
float verticesY[4] = {-2.5,2.5,2.5,-2.5};
//Remember that rotate is done first and translation second
glTranslatef(dX,dY,0);//Move the quad to the desired location in the viewport
glRotate(rotA, 0,0,1);//Rotate the quad around it's origin
glBegin(GL_QUADS);
glVertex2f(verticesX[0], veriticesY[0]);
glVertex2f(verticesX[1], veriticesY[1]);
glVertex2f(verticesX[2], veriticesY[2]);
glVertex2f(verticesX[3], veriticesY[3]);
glEnd();
Now you want to know whether the click of the mouse was within the rendered quad.
Whereas the viewport coordinates start from the bottom left the window coordinates start from the top left. So when you get the mouse coordinates you have to translate them to viewport coordinates in the following way:
float mouseViewportX = mouseX, mouseViewportY = WinH - mouseY - 1;
Once you have the mouse location in viewport coordinates you need to transform it to model coordinates in the following way (Please double check the calculations since I generally use my own matrix library for that and don't calculate it by hand):
//Translate the mouse location to model coordinates reference
mouseViewportX -= dX, mouseViewportY -= dY;
//Unrotate the mouse location
float invRotARad = -rotA*DEG_TO_RAD;
float sinRA = sin(invRotARad), cosRA = cos(invRotA);
float mouseInModelX = cosRA*mouseViewportX - sinRA*mouseViewportY;
float mouseInModelY = sinRA*mouseViewportX + cosRA*mouseViewportY;
And now you can finally check if the mouse falls within the quad - as you can see this is done in quad coordinates:
bool mouseInQuad = mouseInModelX > verticesX[0] && mouseInModelY < verticesX[1] &&
mouseInModelY > verticesY[0] && mouseInModelY < verticesY[1];
Hope I didn't make too many mistakes and this puts you on the right track. If you want to deal with more complex cases and 3D then you should have a look at gluUnproject (maybe you will want to implement your own) and for even more complex scenes you may need to use a stencil or depth buffers
I need to rotate a rectangle around it's center-point and display it in the center of a QWidget. Can you complete this specific code? If possible, could you also dumb-down the explaination or provide a link to the simplest explaination?
Please note: I have read the Qt documentation, compiled examples/demos that deal with rotation and I STILL cannot understand it!
void Canvas::paintEvent(QPaintEvent *event)
{
QPainter paint(this);
paint.setBrush(Qt::transparent);
paint.setPen(Qt::black);
paint.drawLine(this->width()/2, 0, this->width()/2, this->height());
paint.drawLine(0, this->height()/2, this->width(), this->height()/2);
paint.setBrush(Qt::white);
paint.setPen(Qt::blue);
// Draw a 13x17 rectangle rotated to 45 degrees around its center-point
// in the center of the canvas.
paint.drawRect(QRect(0,0, 13, 17));
}
void paintEvent(QPaintEvent* event){
QPainter painter(this);
// xc and yc are the center of the widget's rect.
qreal xc = width() * 0.5;
qreal yc = height() * 0.5;
painter.setPen(Qt::black);
// draw the cross lines.
painter.drawLine(xc, rect().top(), xc, rect().bottom());
painter.drawLine(rect().left(), yc, rect().right(), yc);
painter.setBrush(Qt::white);
painter.setPen(Qt::blue);
// Draw a 13x17 rectangle rotated to 45 degrees around its center-point
// in the center of the canvas.
// translates the coordinate system by xc and yc
painter.translate(xc, yc);
// then rotate the coordinate system by 45 degrees
painter.rotate(45);
// we need to move the rectangle that we draw by rx and ry so it's in the center.
qreal rx = -(13 * 0.5);
qreal ry = -(17 * 0.5);
painter.drawRect(QRect(rx, ry, 13, 17));
}
You are in the painter's coordinate system. When you call drawRect(x, y, 13, 17), it's upper left corner is at (x,y). If you want (x, y) to be the center of your rectangle, then you need to move the rectangle by half, hence rx and ry.
You can call resetTransform() to reset the transformations that were made by translate() and rotate().
Simple:
void rotate(QPainter* p, const QRectF& r, qreal angle, bool clock_wise) {
p->translate(r.center());
p->rotate(clock_wise ? angle : -angle);
p->translate(-r.center());
}
My application is a vector drawing application. It works with OpenGL. I will be modifying it to instead use the Cairo 2D graphics library. The issue is with zooming. With openGL camera and scale factor sort of work like this:
float scalediv = Current_Scene().camera.ScaleFactor / 2.0f;
float cameraX = GetCameraX();
float cameraY = GetCameraY();
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
float left = cameraX - ((float)controls.MainGlFrame.Dimensions.x) * scalediv;
float right = cameraX + ((float)controls.MainGlFrame.Dimensions.x) * scalediv;
float bottom = cameraY - ((float)controls.MainGlFrame.Dimensions.y) * scalediv;
float top = cameraY + ((float)controls.MainGlFrame.Dimensions.y) * scalediv;
glOrtho(left,
right,
bottom,
top,
-0.01f,0.01f);
// Set the model matrix as the current matrix
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
hdc = BeginPaint(controls.MainGlContext.mhWnd,&ps);
Mouse position is obtained like this:
POINT _mouse = controls.MainGlFrame.GetMousePos();
vector2f mouse = functions.ScreenToWorld(_mouse.x,_mouse.y,GetCameraX(),GetCameraY(),
Current_Scene().camera.ScaleFactor,
controls.MainGlFrame.Dimensions.x,
controls.MainGlFrame.Dimensions.y );
vector2f CGlEngineFunctions::ScreenToWorld(int x, int y, float camx, float camy, float scale, int width, int height)
{
// Move the given point to the origin, multiply by the zoom factor and
// add the model coordinates of the center point (camera position)
vector2f p;
p.x = (float)(x - width / 2.0f) * scale +
camx;
p.y = -(float)(y - height / 2.0f) * scale +
camy;
return p;
}
From there I draw the VBO's of triangles. This allows me to pan and zoom in. Given that Cairo only can draw based on coordinates, how can I make it so that a vertex is properly scaled and panned without using transformations. Basically GlOrtho sets the viewport usually but I dont think I could do this with Cairo.
Well GlOrtho is able to change the viewport matrix instead of modifying the verticies but how could I instead modify the verticies to get the same result?
Thanks
*Given vertex P, which was obtained from ScreenToWorld, how could I modify it so that it is scaled and panned accordng to the camera and scale factor? Because usually OpenGL would essentially do this
I think Cairo can do what you want ... see http://cairographics.org/matrix_transform/ . Does that solve your problem, and if not, why ?