glRectfを使って矩形を中心を中心に回転させいたい。

Question

提示コードなのですが参考サイトの回答を参考にプログラムしたいのですが回転する角度に数値２０を入れると画面に表示されなくなります。これは一体何をしたのでしょうか？原因が知りたいです。

#試したこと
getWindowContext()->getSize()関数の実装には問題がないです。確認しました。
glMatrixMode,glPushMatrix,glTranlated,glRotate,関数をコメントアウトすると矩形が正常に描画されます。
回転角度rに0,20,45,90と入力すると表示されなくなり180と表示すると提示画像のうに表示されます。
回転の順序の間違いをglTranslated,glRotated関数を逆しました。
glRectfではなくglVetrex2f関数を使ってみした。

#やりたいこと
矩形の中心を中心に回転させたい




![イメージ説明](c9f9551ddb4a08f1d92e22a4d062d153.png)
参考サイト(リファレンス): https://docs.microsoft.com/ja-jp/windows/win32/opengl/glrectf
参考サイト: https://teratail.com/questions/345582
```cpp
    // ##################################### 矩形 描画 ##################################### 
    void DrawRectangle(glm::vec2 start, glm::vec2 end,float r, glm::vec4 color)
    {
        glColor4f(color.x * RGBA_COLOR, color.y * RGBA_COLOR, color.z * RGBA_COLOR, color.w * RGBA_COLOR);

        float dx = 1.0f / (FrameWork::getWindowContext()->getSize().x / 2);
        float dy = 1.0f / (FrameWork::getWindowContext()->getSize().y / 2);

        glm::vec2 pos;
        pos.x = start.x * dx -1.0f;
        pos.y = 1.0f - start.y * dy;
        glm::vec2 posA;
        glm::vec2 posB;
        posA.x = start.x * dx - 1.0f;
        posA.y = 1.0f - start.y * dy;
        posB.x = end.x * dx - 1.0f;
        posB.y = 1.0f - end.y * dy;

        glMatrixMode(GL_MODELVIEW);
        glPushMatrix();
        glTranslated(pos.x, pos.y, 0);
        glRotated(r, 0, 0, -1);

        glRectf(posA.x,posA.y, posB.x, posB.y);


        glFinish();
        glPopMatrix();
    }

```
```cpp

    // ##################################### スクリーン座標を取得 ##################################### 
    glm::vec2 getWindowPosition(glm::vec2 pos)
    {
        float dx = 1.0f / (FrameWork::getWindowContext()->getSize().x / 2);
        float dy = 1.0f / (FrameWork::getWindowContext()->getSize().y / 2);

        pos.x = ((pos.x * dx) - 1.0f);
        pos.y = (1.0f - (pos.y * dy));

        return pos;
    }

```

Accepted Answer

「回転させると正方形が長方形になっちゃう」という話について回答

---

OpenGLのルールとしては，（ここではビューポートがクライアント領域全体だから）
「クリッピング座標系の -1～1 の範囲を，ウィンドウのクライアント領域全体に表示するよ」
という話だよね．

だから，例えば，クライアント領域のサイズが 横200*縦100[pixel] だとしたら，
クリッピング座標系でX,Yが共に -1～1 の正方形な範囲を，200*100[pixel]という横長な長方形の形に伸縮するという話になるわけ．

…ということは，
最終的に表示される形状がこの伸縮によって歪んでほしくない（正方形を描画したいのに長方形とかになってほしくない）ならば，
**この伸縮の結果がまともな形になるようにクリッピング座標系での座標を指定すればいい**ってことになるよね．
この200*100の例であれば，クリッピング座標系では横方向を1/2に潰した形状にしておけば，最終的にうまい形に伸縮されるわけだ．

という感じで，最終的にうまい形になるようなクリッピング座標系にpixel座標系から変換する処理を書けばいいよ．

---

さて，回答としては上記だけでも十分だと思うけど，
「最終的な伸縮でうまくいくような座標に変換する」ってところがちょっと難しいかもしれないから，
ここでは考えやすいように，

`pixel座標系　→　クリッピング座標系（形状はいい感じに潰しておく必要がある）`

という変換を，

`pixel座標系　→　何か考えやすい中間の座標系（形状はそのまま．潰れてない）　→(潰す)→　クリッピング座標系（形状はいい感じに潰しておく必要がある）`

として，間に１つ座標系を挟んでみる話をするよ．
この座標系の名前を，ここでは便宜上「おCAT座標系」とか呼ぼうか．

このようにすると，
必要な回転とか並進とかは全てこの「おCAT座標系」の上で行ってやり，その結果を最後に一発潰してクリッピング座標系に変換すればいいって話になる．

「最後に一発潰す」のところは，こう書けるよね．

```
glScalef( 0.5f, 1, 1 );  //X座標を半分に潰す
{//このブロックの中は「おCAT座標系」
  glTranslatef( ... );  //おCAT座標系での並進
  glRotatedf( ... );  //おCAT座標系での回転
  glRectf( ... );  //おCAT座標系での座標
}
```

だからあとは，pixel座標系からおCAT座標系への変換があればいい．

最終的にクライアント領域に表示されることになるおCAT座標系の範囲というのはどこからどこまでかな？
というのを考えれば，
この例ではX方向を半分に潰した結果が -1～1 になる範囲なんだから，「X方向が -2～2，Y方向が -1～1」という長方形な範囲だ．
この範囲に 200*100[pixel] な範囲がすっぽりはまるような変換をしてやることは問題ないよね．
（元々あなたがやっていた，pixel座標をクリッピング座標に変換する計算と話は全く一緒．倍率とオフセット量を考えればいいよ）

…と言う話のサンプルコードを以下に示すよ．
おCAT座標系での値は，そうだとわかるように変数名の末尾を _oc としている．
ウィンドウのサイズが変更された際に，上記の計算をして，glRectf()とかに渡す値を求めてるようにしてある．

あと，このコードでは，上下方向の反転も glScalef で行う形にしてある．
つまり，pixelの世界とおCAT座標系では上下の向き(Y軸の正の方向)は揃っていて，クリッピング座標系だけがそれらとは逆という形で考えてる．

```C++
namespace
{
    //値がクライアント領域のサイズ次第である変数群の再計算が必要なことを示すフラグ
    bool NeedToRecalc_Flag = true;

    //ウィンドウサイズ変化時のコールバック
    void OnWndSizeChanged( GLFWwindow *const pWnd, int w, int h )
    {
        NeedToRecalc_Flag = true;   //フラグを立てておく
        glViewport( 0,0, w,h );
    }
}

int main()
{
    GLFWwindow *pWindow = nullptr;
    {//GLFW ウィンドウ準備
        if( !(pWindow = glfwCreateWindow( 640, 480, "GLFW", NULL, NULL )) )return 1;    //ウィンドウ生成
        glfwMakeContextCurrent( pWindow );  //ウィンドウをGLの処理対象にする
        glfwSetWindowSizeCallback( pWindow, OnWndSizeChanged ); //callback設定
    }

    //設定．てきとーに．
    glfwSwapInterval(1);    //垂直同期信号待ちの設定っぽい
    glClearColor( 0.1f, 0.2f, 0.4f, 0.0f );
    glMatrixMode( GL_MODELVIEW );
    glColor3d( 1,0,0 );  //Rectの描画色

    //描画したいRect の２頂点 [pixel]
    const glm::vec2 V1{ 100, 70 };
    const glm::vec2 V2 = V1 + glm::vec2{ 100,100 };

    //ウィンドウクライアント領域のサイズに合わせて計算する必要がある変数群
    //※初期値には特に意味はない
    float AspectRatio = 1.0;    //ウィンドウクライアント領域の縦横比(W/H)
    glm::vec2 C_oc{0,0};    //Rectの中心
    glm::vec2 RectHalfSize_oc{1,1}; //Rectの(縦横半分の)サイズ

    //メインループ
    double rotate_angle = 0;    //Rectの回転角度[deg]
    while( glfwWindowShouldClose( pWindow ) == 0 )
    {
        //(ESCキーで終了)
        if( glfwGetKey( pWindow, GLFW_KEY_ESCAPE ) == GLFW_PRESS ){ glfwDestroyWindow( pWindow );   break;  }

        //回転角度の変更用キー処理
        if( glfwGetKey( pWindow, GLFW_KEY_A ) == GLFW_PRESS ){  rotate_angle -= 1.0;    }
        if( glfwGetKey( pWindow, GLFW_KEY_S ) == GLFW_PRESS ){  rotate_angle += 1.0;    }
        if( glfwGetKey( pWindow, GLFW_KEY_D ) == GLFW_PRESS ){  rotate_angle = 0;   }

        //ウィンドウサイズが変わったら必要な計算をする
        if( NeedToRecalc_Flag )
        {
            NeedToRecalc_Flag = false;  //フラグを下す

            int WndW, WndH;
            glfwGetWindowSize( pWindow, &WndW, &WndH );
            AspectRatio = WndW / (float)WndH;

            const float CvtRate = 2.0f / WndH;
            const glm::vec2 CvtOffset{ -AspectRatio, -1.0f };

            const glm::vec2 V1_oc = V1*CvtRate + CvtOffset;
            const glm::vec2 V2_oc = V2*CvtRate + CvtOffset;

            C_oc = ( V1_oc + V2_oc ) * 0.5f;
            RectHalfSize_oc = glm::abs( V1_oc - V2_oc ) * 0.5f;
        }

        //
        //draw
        //
        glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );
        glLoadIdentity();

        glScalef( (1.0f / AspectRatio), -1, 1 );    //おCAT座標系 から クリッピング座標系 への変換
        {//この中は おCAT座標系
            glTranslatef( C_oc.x, C_oc.y, 0 );
            glRotated( rotate_angle, 0,0,1 );
            glRectf( -RectHalfSize_oc.x, -RectHalfSize_oc.y,    RectHalfSize_oc.x, RectHalfSize_oc.y );
        }

        glfwSwapBuffers( pWindow );
        glfwWaitEvents();
    }

    return 0;
}
```

---

[追記]

動作結果のスクリーンショット画像を示す．
これは実行後にウィンドウをかなり小さくした状態のスクリーンショットである．
矩形を回転させても，ウィンドウ座標を変更しても

* 矩形の中心は常に(150,120)あたりにある
* 矩形の１辺は100[pixel]くらいになってる

![イメージ説明](d67b8aaef83e9533144475edf7aedefe.png)

Answer

[別の質問](https://teratail.com/questions/345582)の回答に書いた**話を理解してください**．
描画するものが楕円だろうが線だろうが矩形だろうが，理屈は全く同じ話なのだから．

以前の回答の内容の繰り返しになりますが，

「矩形の中心」を glRatated() で行う回転の中心にしたいのならば，
コード上で glRateted()の下に書く座標というのは，「矩形の中心が(0,0)である座標系での値」にしないといけないよね．

っていう話．

```
glRotated( ... );
/* ここに書く座標値というのは回転中心を(0,0)とした世界の値で書くんだよね */
```

つまり，

> void DrawRectangle(glm::vec2 start, glm::vec2 end,float r, glm::vec4 color)
    
の引数 start, end で示された位置を 矩形中心を(0,0)とした座標系で読み直した座標値 を求めて，それを glRectf() に渡さないといかん．

---

そういう話を実装しているのであれば，あなたの関数 `DrawRectangle()` の中には，
**「矩形の中心」というデータを算出なり何なりするような処理が書かれることになる**と思うのね．
なのに，提示コードにはそれらしき記述が見当たらないのですよね．

関連した質問