Update 'Analog Clock'

Analog-Clock.md

@@ -179,3 +179,59 @@ Now that we have determined how to draw around the clock via code, we still need
 I've moved the final rendered drawing coordinate to a variable so we can keep the dots around as a reference point. I am also adding 1 to `i` so the numbers start at 1, not 0.
 
 <img src="https://pit.pgetinker.com/I32IJlyR5GSV.png" width="256" height="240">
+
+As you can see, the numbers start from 1 to 12. But they also start from the right. In C++, 0 radians is pointing to the right and going clockwise, as we are now witnessing here. Let's first fix the degrees issue. We have to start by having 12 pointing to the top instead of the 2 o' clock position, which means bringing the rotation back by 60 degrees, or `π/3` radians.
+
+```cpp
+            olc::vf2d drawVec{80,float(i*(pi/6)-pi/3)};
+```
+
+Much better. 
+<img src="https://pit.pgetinker.com/wJhogmpEWIdF.png" width="256" height="240">
+
+Next we focus on centering the text on each dot. One trick I like to use for centering an image or text is the rotated version of the functions. So instead of `DrawString()` I am going to use `DrawRotatedStringDecal()`. Using a decal version of the string drawing routine is inconsequential here.
+
+```cpp
+        for(int i{0};i<12;i++){
+            using namespace std::numbers;
+            olc::vf2d drawVec{80,float(i*(pi/6)-pi/3)};
+            const olc::vf2d drawPos{GetScreenSize()/2+drawVec.cart()};
+            Draw(drawPos);
+            const std::string text{std::format("{}",i+1)};
+            const olc::vf2d textNumbSize{GetTextSize(text)};
+            DrawRotatedStringDecal(drawPos,text,0.f,textNumbSize/2);
+        }
+```
+
+So this is a little bit involved. First I separated the `text` argument since we need it twice. To center text we need to get the size of the entire text and then divide it by 2. 
+
+Once I have that I can plug it in for the `center` argument of `DrawRotatedStringDecal()` to create a nice little trick of centering text without too much mucking with the drawing position itself.
+
+The result looks like this:
+<img src="https://pit.pgetinker.com/IE5l5jQS1SDp.png" width="256" height="240">
+
+Very nice. Just to make it look a little cooler, I'm going to make the numbers be a grey color and push the numbers back a little bit so they are farther to the edges of the clock. I think I will keep the dots there, they seem to make good decorations.
+
+```cpp
+        for(int i{0};i<12;i++){
+            using namespace std::numbers;
+
+            //Draw decorative dots
+            olc::vf2d drawVec{60,float(i*(pi/6)-pi/3)};
+            const olc::vf2d drawPos{GetScreenSize()/2+drawVec.cart()};
+            Draw(drawPos);
+
+            //Draw clock numbers
+            olc::vf2d numberVec{drawVec};
+            numberVec.x=90; //Adjusted further towards the edge of the clock.
+            const olc::vf2d numberDrawPos{GetScreenSize()/2+numberVec.cart()};
+            const std::string text{std::format("{}",i+1)};
+            const olc::vf2d textNumbSize{GetTextSize(text)};
+            DrawRotatedStringDecal(numberDrawPos,text,0.f,textNumbSize/2,olc::GREY);
+        }
+```
+
+Tidied up the code with some separation, comments, and moved the dots slightly further back while adding `olc::GREY` as the coloring for the clock numbers.
+[[***Try it out!***]](https://pgetinker.com/s/y5OwBA5pHJ "Click to try it out!")
+
+[<img src="https://pit.pgetinker.com/RccUk1rcxfc4.png" width="256" height="240">](https://pgetinker.com/s/y5OwBA5pHJ "Click to try it out!")