How to rotate relative points in degrees?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP











up vote
1
down vote

favorite












I have 4 points in range [0.0, 1.0] representing the top-left and bottom-right corners of a bounding box.



For example: [0.25 0.33 0.71 0.73]



In other words, the first pair (in (y, x) format) means that the point is 25% down the top of the image, and 33% from the left. The second pair means that the bottom right point is located 71% from the top of the image and 73% from the left.



Question



If I now rotate the image by N degrees, how do I compute where those 4 points should be? To be more specific, I really only care to rotate the image 90, 180, 270 degrees.



enter image description here



Left: original image, not rotated. Right: image rotated 90 degrees.







share|cite|improve this question



















  • Which software are you using?
    – Mostafa Ayaz
    Jul 16 at 18:12










  • I'm wanting to do this by hand, using a pencil and paper.
    – rodrigo-silveira
    Jul 16 at 19:01










  • The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
    – Mauricio Cele Lopez Belon
    Jul 16 at 20:09










  • I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
    – rodrigo-silveira
    Jul 16 at 21:19















up vote
1
down vote

favorite












I have 4 points in range [0.0, 1.0] representing the top-left and bottom-right corners of a bounding box.



For example: [0.25 0.33 0.71 0.73]



In other words, the first pair (in (y, x) format) means that the point is 25% down the top of the image, and 33% from the left. The second pair means that the bottom right point is located 71% from the top of the image and 73% from the left.



Question



If I now rotate the image by N degrees, how do I compute where those 4 points should be? To be more specific, I really only care to rotate the image 90, 180, 270 degrees.



enter image description here



Left: original image, not rotated. Right: image rotated 90 degrees.







share|cite|improve this question



















  • Which software are you using?
    – Mostafa Ayaz
    Jul 16 at 18:12










  • I'm wanting to do this by hand, using a pencil and paper.
    – rodrigo-silveira
    Jul 16 at 19:01










  • The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
    – Mauricio Cele Lopez Belon
    Jul 16 at 20:09










  • I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
    – rodrigo-silveira
    Jul 16 at 21:19













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I have 4 points in range [0.0, 1.0] representing the top-left and bottom-right corners of a bounding box.



For example: [0.25 0.33 0.71 0.73]



In other words, the first pair (in (y, x) format) means that the point is 25% down the top of the image, and 33% from the left. The second pair means that the bottom right point is located 71% from the top of the image and 73% from the left.



Question



If I now rotate the image by N degrees, how do I compute where those 4 points should be? To be more specific, I really only care to rotate the image 90, 180, 270 degrees.



enter image description here



Left: original image, not rotated. Right: image rotated 90 degrees.







share|cite|improve this question











I have 4 points in range [0.0, 1.0] representing the top-left and bottom-right corners of a bounding box.



For example: [0.25 0.33 0.71 0.73]



In other words, the first pair (in (y, x) format) means that the point is 25% down the top of the image, and 33% from the left. The second pair means that the bottom right point is located 71% from the top of the image and 73% from the left.



Question



If I now rotate the image by N degrees, how do I compute where those 4 points should be? To be more specific, I really only care to rotate the image 90, 180, 270 degrees.



enter image description here



Left: original image, not rotated. Right: image rotated 90 degrees.









share|cite|improve this question










share|cite|improve this question




share|cite|improve this question









asked Jul 16 at 17:53









rodrigo-silveira

1397




1397











  • Which software are you using?
    – Mostafa Ayaz
    Jul 16 at 18:12










  • I'm wanting to do this by hand, using a pencil and paper.
    – rodrigo-silveira
    Jul 16 at 19:01










  • The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
    – Mauricio Cele Lopez Belon
    Jul 16 at 20:09










  • I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
    – rodrigo-silveira
    Jul 16 at 21:19

















  • Which software are you using?
    – Mostafa Ayaz
    Jul 16 at 18:12










  • I'm wanting to do this by hand, using a pencil and paper.
    – rodrigo-silveira
    Jul 16 at 19:01










  • The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
    – Mauricio Cele Lopez Belon
    Jul 16 at 20:09










  • I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
    – rodrigo-silveira
    Jul 16 at 21:19
















Which software are you using?
– Mostafa Ayaz
Jul 16 at 18:12




Which software are you using?
– Mostafa Ayaz
Jul 16 at 18:12












I'm wanting to do this by hand, using a pencil and paper.
– rodrigo-silveira
Jul 16 at 19:01




I'm wanting to do this by hand, using a pencil and paper.
– rodrigo-silveira
Jul 16 at 19:01












The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
– Mauricio Cele Lopez Belon
Jul 16 at 20:09




The point of having the box defined relative to the image sides is precisely that you dont need to rotate or scale the box. I.e., whatever rigid transform you do to the image should not affect the box since it is defined relative to the image.
– Mauricio Cele Lopez Belon
Jul 16 at 20:09












I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
– rodrigo-silveira
Jul 16 at 21:19





I think the relative points is so the box scales if the image scales. But if you rotate the image, the box would need to be rotated as well. Think of a tall, skinny box on the left side of the image, which bounds, say, a stop sign. If you rotate that image 90 degrees, the stop sign is now sideways across the top of the image, so you'd want the bounding box to likewise be rotated such that it is horizontal (wide and not tall) like the object it is bounding on the image.
– rodrigo-silveira
Jul 16 at 21:19











2 Answers
2






active

oldest

votes

















up vote
3
down vote



accepted










The transformation you require is:
$$ y’ = y cos theta + x sin theta $$
$$x’ = -y sin theta+ x cos theta$$



Also don’t forget that when programming $ cos theta$ and $ sin theta$ needs to be in radians and not degrees. To convert from degrees to radians multiply by $pi/180$.



You will note that the above formula is greatly simplified if the rotation angles are multiples of $90 deg$.



For 0 degrees, $y’ = y, ; x’ = x $



For 90 degrees, $ y’ = x, ; x’ = -y $



For 180 degrees,$ y’ = -y, ;x’ = - x $



For 270 degrees, $y’ = -x, ;x’ = y $



If the final coordinates all have to be positive, as is the case for many image processing contexts, this should be modified to



For 0 degrees, $y’ = y, ; x’ = x $



For 90 degrees, $ y’ = x, ;x’ =1 -y $



For 180 degrees,$ y’ = 1-y, ;x’ =1 - x $



For 270 degrees, $y’ =1 -x, ; x’ = y$



Finally, I note that the order of $x$ and $y$ coordinates that you use (although used in image processing fairly often) are reversed to the standard math convention so be careful if you are searching for other solutions on the internet that you are reading the correctly!



Hope that helps!






share|cite|improve this answer






























    up vote
    1
    down vote













    Based off Martin Roberts answer, here's my complete solution:



     // values in absolute pixels
    box = [y_min, x_min, y_max, x_max];

    // Make points relative to image
    pct = [box[0] / height, box[1] / width, box[2] / height, box[3] / width];
    //^
    //|
    //+--------+
    // |
    // v
    rot90 = [pct[1], 1 - pct[2], pct[3], 1 - pct[0]];
    // ^
    // |
    // +--------+
    // |
    // v
    rot180 = [rot90[1], 1 - rot90[2], rot90[3], 1 - rot90[0]];
    // ^
    // |
    // +--------+
    // |
    // v

    rot270 = [rot180[1], 1 - rot180[2], rot180[3], 1 - rot180[0]];


    enter image description here



    • As a minor implementation detail, although not all images in my dataset were squares, they were deliberately reshaped to be squares because of the neural network model where they'll be used.

    • The reason for the reversed (x, y) points, that's because TensorFlow's tf.image.draw_bounding_boxes expects the points in that order.





    share|cite|improve this answer























      Your Answer




      StackExchange.ifUsing("editor", function ()
      return StackExchange.using("mathjaxEditing", function ()
      StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
      StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["$", "$"], ["\\(","\\)"]]);
      );
      );
      , "mathjax-editing");

      StackExchange.ready(function()
      var channelOptions =
      tags: "".split(" "),
      id: "69"
      ;
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function()
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled)
      StackExchange.using("snippets", function()
      createEditor();
      );

      else
      createEditor();

      );

      function createEditor()
      StackExchange.prepareEditor(
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: false,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      noCode: true, onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      );



      );








       

      draft saved


      draft discarded


















      StackExchange.ready(
      function ()
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmath.stackexchange.com%2fquestions%2f2853667%2fhow-to-rotate-relative-points-in-degrees%23new-answer', 'question_page');

      );

      Post as a guest






























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      3
      down vote



      accepted










      The transformation you require is:
      $$ y’ = y cos theta + x sin theta $$
      $$x’ = -y sin theta+ x cos theta$$



      Also don’t forget that when programming $ cos theta$ and $ sin theta$ needs to be in radians and not degrees. To convert from degrees to radians multiply by $pi/180$.



      You will note that the above formula is greatly simplified if the rotation angles are multiples of $90 deg$.



      For 0 degrees, $y’ = y, ; x’ = x $



      For 90 degrees, $ y’ = x, ; x’ = -y $



      For 180 degrees,$ y’ = -y, ;x’ = - x $



      For 270 degrees, $y’ = -x, ;x’ = y $



      If the final coordinates all have to be positive, as is the case for many image processing contexts, this should be modified to



      For 0 degrees, $y’ = y, ; x’ = x $



      For 90 degrees, $ y’ = x, ;x’ =1 -y $



      For 180 degrees,$ y’ = 1-y, ;x’ =1 - x $



      For 270 degrees, $y’ =1 -x, ; x’ = y$



      Finally, I note that the order of $x$ and $y$ coordinates that you use (although used in image processing fairly often) are reversed to the standard math convention so be careful if you are searching for other solutions on the internet that you are reading the correctly!



      Hope that helps!






      share|cite|improve this answer



























        up vote
        3
        down vote



        accepted










        The transformation you require is:
        $$ y’ = y cos theta + x sin theta $$
        $$x’ = -y sin theta+ x cos theta$$



        Also don’t forget that when programming $ cos theta$ and $ sin theta$ needs to be in radians and not degrees. To convert from degrees to radians multiply by $pi/180$.



        You will note that the above formula is greatly simplified if the rotation angles are multiples of $90 deg$.



        For 0 degrees, $y’ = y, ; x’ = x $



        For 90 degrees, $ y’ = x, ; x’ = -y $



        For 180 degrees,$ y’ = -y, ;x’ = - x $



        For 270 degrees, $y’ = -x, ;x’ = y $



        If the final coordinates all have to be positive, as is the case for many image processing contexts, this should be modified to



        For 0 degrees, $y’ = y, ; x’ = x $



        For 90 degrees, $ y’ = x, ;x’ =1 -y $



        For 180 degrees,$ y’ = 1-y, ;x’ =1 - x $



        For 270 degrees, $y’ =1 -x, ; x’ = y$



        Finally, I note that the order of $x$ and $y$ coordinates that you use (although used in image processing fairly often) are reversed to the standard math convention so be careful if you are searching for other solutions on the internet that you are reading the correctly!



        Hope that helps!






        share|cite|improve this answer

























          up vote
          3
          down vote



          accepted







          up vote
          3
          down vote



          accepted






          The transformation you require is:
          $$ y’ = y cos theta + x sin theta $$
          $$x’ = -y sin theta+ x cos theta$$



          Also don’t forget that when programming $ cos theta$ and $ sin theta$ needs to be in radians and not degrees. To convert from degrees to radians multiply by $pi/180$.



          You will note that the above formula is greatly simplified if the rotation angles are multiples of $90 deg$.



          For 0 degrees, $y’ = y, ; x’ = x $



          For 90 degrees, $ y’ = x, ; x’ = -y $



          For 180 degrees,$ y’ = -y, ;x’ = - x $



          For 270 degrees, $y’ = -x, ;x’ = y $



          If the final coordinates all have to be positive, as is the case for many image processing contexts, this should be modified to



          For 0 degrees, $y’ = y, ; x’ = x $



          For 90 degrees, $ y’ = x, ;x’ =1 -y $



          For 180 degrees,$ y’ = 1-y, ;x’ =1 - x $



          For 270 degrees, $y’ =1 -x, ; x’ = y$



          Finally, I note that the order of $x$ and $y$ coordinates that you use (although used in image processing fairly often) are reversed to the standard math convention so be careful if you are searching for other solutions on the internet that you are reading the correctly!



          Hope that helps!






          share|cite|improve this answer















          The transformation you require is:
          $$ y’ = y cos theta + x sin theta $$
          $$x’ = -y sin theta+ x cos theta$$



          Also don’t forget that when programming $ cos theta$ and $ sin theta$ needs to be in radians and not degrees. To convert from degrees to radians multiply by $pi/180$.



          You will note that the above formula is greatly simplified if the rotation angles are multiples of $90 deg$.



          For 0 degrees, $y’ = y, ; x’ = x $



          For 90 degrees, $ y’ = x, ; x’ = -y $



          For 180 degrees,$ y’ = -y, ;x’ = - x $



          For 270 degrees, $y’ = -x, ;x’ = y $



          If the final coordinates all have to be positive, as is the case for many image processing contexts, this should be modified to



          For 0 degrees, $y’ = y, ; x’ = x $



          For 90 degrees, $ y’ = x, ;x’ =1 -y $



          For 180 degrees,$ y’ = 1-y, ;x’ =1 - x $



          For 270 degrees, $y’ =1 -x, ; x’ = y$



          Finally, I note that the order of $x$ and $y$ coordinates that you use (although used in image processing fairly often) are reversed to the standard math convention so be careful if you are searching for other solutions on the internet that you are reading the correctly!



          Hope that helps!







          share|cite|improve this answer















          share|cite|improve this answer



          share|cite|improve this answer








          edited Jul 17 at 0:49


























          answered Jul 17 at 0:00









          Martin Roberts

          1,189318




          1,189318




















              up vote
              1
              down vote













              Based off Martin Roberts answer, here's my complete solution:



               // values in absolute pixels
              box = [y_min, x_min, y_max, x_max];

              // Make points relative to image
              pct = [box[0] / height, box[1] / width, box[2] / height, box[3] / width];
              //^
              //|
              //+--------+
              // |
              // v
              rot90 = [pct[1], 1 - pct[2], pct[3], 1 - pct[0]];
              // ^
              // |
              // +--------+
              // |
              // v
              rot180 = [rot90[1], 1 - rot90[2], rot90[3], 1 - rot90[0]];
              // ^
              // |
              // +--------+
              // |
              // v

              rot270 = [rot180[1], 1 - rot180[2], rot180[3], 1 - rot180[0]];


              enter image description here



              • As a minor implementation detail, although not all images in my dataset were squares, they were deliberately reshaped to be squares because of the neural network model where they'll be used.

              • The reason for the reversed (x, y) points, that's because TensorFlow's tf.image.draw_bounding_boxes expects the points in that order.





              share|cite|improve this answer



























                up vote
                1
                down vote













                Based off Martin Roberts answer, here's my complete solution:



                 // values in absolute pixels
                box = [y_min, x_min, y_max, x_max];

                // Make points relative to image
                pct = [box[0] / height, box[1] / width, box[2] / height, box[3] / width];
                //^
                //|
                //+--------+
                // |
                // v
                rot90 = [pct[1], 1 - pct[2], pct[3], 1 - pct[0]];
                // ^
                // |
                // +--------+
                // |
                // v
                rot180 = [rot90[1], 1 - rot90[2], rot90[3], 1 - rot90[0]];
                // ^
                // |
                // +--------+
                // |
                // v

                rot270 = [rot180[1], 1 - rot180[2], rot180[3], 1 - rot180[0]];


                enter image description here



                • As a minor implementation detail, although not all images in my dataset were squares, they were deliberately reshaped to be squares because of the neural network model where they'll be used.

                • The reason for the reversed (x, y) points, that's because TensorFlow's tf.image.draw_bounding_boxes expects the points in that order.





                share|cite|improve this answer

























                  up vote
                  1
                  down vote










                  up vote
                  1
                  down vote









                  Based off Martin Roberts answer, here's my complete solution:



                   // values in absolute pixels
                  box = [y_min, x_min, y_max, x_max];

                  // Make points relative to image
                  pct = [box[0] / height, box[1] / width, box[2] / height, box[3] / width];
                  //^
                  //|
                  //+--------+
                  // |
                  // v
                  rot90 = [pct[1], 1 - pct[2], pct[3], 1 - pct[0]];
                  // ^
                  // |
                  // +--------+
                  // |
                  // v
                  rot180 = [rot90[1], 1 - rot90[2], rot90[3], 1 - rot90[0]];
                  // ^
                  // |
                  // +--------+
                  // |
                  // v

                  rot270 = [rot180[1], 1 - rot180[2], rot180[3], 1 - rot180[0]];


                  enter image description here



                  • As a minor implementation detail, although not all images in my dataset were squares, they were deliberately reshaped to be squares because of the neural network model where they'll be used.

                  • The reason for the reversed (x, y) points, that's because TensorFlow's tf.image.draw_bounding_boxes expects the points in that order.





                  share|cite|improve this answer















                  Based off Martin Roberts answer, here's my complete solution:



                   // values in absolute pixels
                  box = [y_min, x_min, y_max, x_max];

                  // Make points relative to image
                  pct = [box[0] / height, box[1] / width, box[2] / height, box[3] / width];
                  //^
                  //|
                  //+--------+
                  // |
                  // v
                  rot90 = [pct[1], 1 - pct[2], pct[3], 1 - pct[0]];
                  // ^
                  // |
                  // +--------+
                  // |
                  // v
                  rot180 = [rot90[1], 1 - rot90[2], rot90[3], 1 - rot90[0]];
                  // ^
                  // |
                  // +--------+
                  // |
                  // v

                  rot270 = [rot180[1], 1 - rot180[2], rot180[3], 1 - rot180[0]];


                  enter image description here



                  • As a minor implementation detail, although not all images in my dataset were squares, they were deliberately reshaped to be squares because of the neural network model where they'll be used.

                  • The reason for the reversed (x, y) points, that's because TensorFlow's tf.image.draw_bounding_boxes expects the points in that order.






                  share|cite|improve this answer















                  share|cite|improve this answer



                  share|cite|improve this answer








                  edited Jul 17 at 15:29


























                  answered Jul 17 at 12:17









                  rodrigo-silveira

                  1397




                  1397






















                       

                      draft saved


                      draft discarded


























                       


                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function ()
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmath.stackexchange.com%2fquestions%2f2853667%2fhow-to-rotate-relative-points-in-degrees%23new-answer', 'question_page');

                      );

                      Post as a guest













































































                      Comments

                      Popular posts from this blog

                      Color the edges and diagonals of a regular polygon

                      Relationship between determinant of matrix and determinant of adjoint?

                      What is the equation of a 3D cone with generalised tilt?