added comments and reorganized UI labels

examples/shapes/shapes_math_sine_cosine.c

@@ -85,50 +85,79 @@ int main(void)
         BeginDrawing();
             ClearBackground(RAYWHITE);
 
+            // Cotangent (orange)
+            DrawLineEx((Vector2){ center.x , limitMin.y }, (Vector2){ cotangentPoint.x, limitMin.y }, 2.0f, ORANGE);
+            DrawLineDashed(center, cotangentPoint, 10.0f, 4.0f, ORANGE);
+            
+            // Side background
+            DrawLine(580, 0, 580, GetScreenHeight(), (Color){ 218, 218, 218, 255 });
+            DrawRectangle(580, 0, GetScreenWidth(), GetScreenHeight(), (Color){ 232, 232, 232, 255 });
+            
+            // Base circle and axes
             DrawCircleLinesV(center, radius, GRAY);
-            DrawCircleSectorLines(center, radius*0.4f , -angle, -360.f , 36.0f, PINK);
-            DrawCircleSectorLines(center, radius*0.5f , -angle, -180.f , 36.0f, DARKBLUE);
-            DrawCircleSectorLines(center, radius*0.6f , -angle, -90.f , 36.0f, BEIGE); 
-            DrawCircleSectorLines(center, radius*0.7f , -angle, 0.f, 36.0f, LIME); 
             DrawLineEx((Vector2){ center.x, limitMin.y }, (Vector2){ center.x, limitMax.y }, 1.0f, GRAY);      
             DrawLineEx((Vector2){ limitMin.x, center.y }, (Vector2){ limitMax.x, center.y }, 1.f, GRAY);
-            DrawLineEx((Vector2){ center.x, center.y }, (Vector2){ center.x, point.y }, 2.0f, RED);  
+
-            DrawLineDashed((Vector2){ point.x, center.y }, (Vector2){ point.x, point.y }, 10.0f, 4.0f, RED);
+            // Wave graph axes
-            DrawLineEx((Vector2){ center.x, center.y }, (Vector2){ point.x, center.y }, 2.0f, BLUE);         
-            DrawLineDashed((Vector2){ center.x , point.y }, (Vector2){ point.x, point.y }, 10.0f, 4.0f, BLUE);
-            DrawLineEx((Vector2){ center.x , limitMin.y }, (Vector2){ cotangentPoint.x, limitMin.y }, 2.0f, ORANGE);
-            DrawLineEx((Vector2){ limitMax.x , center.y }, (Vector2){ limitMax.x, tangentPoint.y }, 2.0f, PURPLE);
-            DrawLineDashed(center, cotangentPoint, 10.0f, 4.0f, ORANGE);
-            DrawLineDashed(center, tangentPoint, 10.0f, 4.0f, PURPLE);
-            DrawLineEx((Vector2){ center.x , center.y }, point, 2.0f, BLACK);
-            DrawCircleV(point, 4.0f, BLACK);
             DrawLineEx((Vector2){ start.x , start.y }, (Vector2){ start.x , start.y + start.height }, 2.0f, GRAY);
             DrawLineEx((Vector2){ start.x + start.width, start.y }, (Vector2){ start.x + start.width, start.y + start.height }, 2.0f, GRAY);
             DrawLineEx((Vector2){ start.x, start.y + start.height/2 }, (Vector2){ start.x + start.width, start.y + start.height/2 }, 2.0f, GRAY);
-            DrawCircleV((Vector2){ start.x + (angle/360.0f)*start.width, start.y + ((-sinRad + 1)*start.height/2.0f) }, 4.0f, RED);
+
-            DrawCircleV((Vector2){ start.x + (angle/360.0f)*start.width, start.y + ((-cosRad + 1)*start.height/2.0f) }, 4.0f, BLUE);
+            // Wave graph axis labels
-            DrawSplineLinear(sinePoints, wavePoints, 1.0f, RED);
-            DrawSplineLinear(cosPoints, wavePoints, 1.0f, BLUE);
-            DrawLine(580, 0, 580, GetScreenHeight(), (Color){ 218, 218, 218, 255 });
-            DrawRectangle(580, 0, GetScreenWidth(), GetScreenHeight(), (Color){ 232, 232, 232, 255 });
-            // Draw GUI controls
-            //------------------------------------------------------------------------------
-            GuiSetStyle(LABEL, TEXT_COLOR_NORMAL, ColorToInt(GRAY));
-            GuiToggle((Rectangle){ 640, 100, 120, 20}, TextFormat("Pause"), &pause);   
-            GuiSetStyle(LABEL, TEXT_COLOR_NORMAL, ColorToInt(LIME));
-            GuiSliderBar((Rectangle){ 640, 70, 120, 20}, "Angle", TextFormat("%.0f°", angle), &angle, 0.0f, 360.f);
-            DrawText(TextFormat("Supplementary  %0.f°",supplementary), 640, 130, 6, DARKBLUE);
-            DrawText(TextFormat("Complementary  %0.f°",complementary), 640, 150, 6, BEIGE);
-            DrawText(TextFormat("Explementary  %0.f°",explementary), 640, 170, 6, PINK);
-            DrawText(TextFormat("Sine %.2f", sinRad), 640, 190, 6, RED);
-            DrawText(TextFormat("Cosine %.2f", cosRad), 640, 210, 6, BLUE);
-            DrawText(TextFormat("Tangent %.2f", tangent), 640, 230, 6, PURPLE);
-            DrawText(TextFormat("Cotangent %.2f", cotangent), 640, 250, 6, ORANGE);
             DrawText("1", start.x - 8,  start.y, 6, GRAY);
             DrawText("0", start.x - 8,  start.y + start.height/2 - 6, 6, GRAY);
             DrawText("-1", start.x - 12, start.y + start.height - 8, 6, GRAY);
             DrawText("0", start.x - 2,  start.y + start.height + 4, 6, GRAY);
             DrawText("360", start.x + start.width - 8,  start.y + start.height + 4, 6, GRAY);  
+
+            // Sine (red - vertical)
+            DrawLineEx((Vector2){ center.x, center.y }, (Vector2){ center.x, point.y }, 2.0f, RED);  
+            DrawLineDashed((Vector2){ point.x, center.y }, (Vector2){ point.x, point.y }, 10.0f, 4.0f, RED);
+            DrawText(TextFormat("Sine %.2f", sinRad), 640, 190, 6, RED);
+            DrawCircleV((Vector2){ start.x + (angle/360.0f)*start.width, start.y + ((-sinRad + 1)*start.height/2.0f) }, 4.0f, RED);
+            DrawSplineLinear(sinePoints, wavePoints, 1.0f, RED);
+            
+            // Cosine (blue - horizontal)
+            DrawLineEx((Vector2){ center.x, center.y }, (Vector2){ point.x, center.y }, 2.0f, BLUE);         
+            DrawLineDashed((Vector2){ center.x , point.y }, (Vector2){ point.x, point.y }, 10.0f, 4.0f, BLUE);
+            DrawText(TextFormat("Cosine %.2f", cosRad), 640, 210, 6, BLUE);
+            DrawCircleV((Vector2){ start.x + (angle/360.0f)*start.width, start.y + ((-cosRad + 1)*start.height/2.0f) }, 4.0f, BLUE);
+            DrawSplineLinear(cosPoints, wavePoints, 1.0f, BLUE);
+              
+            // Tangent (purple)
+            DrawLineEx((Vector2){ limitMax.x , center.y }, (Vector2){ limitMax.x, tangentPoint.y }, 2.0f, PURPLE);
+            DrawLineDashed(center, tangentPoint, 10.0f, 4.0f, PURPLE);
+            DrawText(TextFormat("Tangent %.2f", tangent), 640, 230, 6, PURPLE);
+
+            // Cotangent (orange)
+            DrawText(TextFormat("Cotangent %.2f", cotangent), 640, 250, 6, ORANGE);
+
+            // Complementary angle (beige)
+            DrawCircleSectorLines(center, radius*0.6f , -angle, -90.f , 36.0f, BEIGE); 
+            DrawText(TextFormat("Complementary  %0.f°",complementary), 640, 150, 6, BEIGE);
+
+            // Supplementary angle (darkblue)
+            DrawCircleSectorLines(center, radius*0.5f , -angle, -180.f , 36.0f, DARKBLUE);
+            DrawText(TextFormat("Supplementary  %0.f°",supplementary), 640, 130, 6, DARKBLUE);
+
+            // Explementary angle (pink)
+            DrawCircleSectorLines(center, radius*0.4f , -angle, -360.f , 36.0f, PINK);
+            DrawText(TextFormat("Explementary  %0.f°",explementary), 640, 170, 6, PINK);
+
+            // Current angle - arc (lime), radius (black), endpoint (black)
+            DrawCircleSectorLines(center, radius*0.7f , -angle, 0.f, 36.0f, LIME); 
+            DrawLineEx((Vector2){ center.x , center.y }, point, 2.0f, BLACK);
+            DrawCircleV(point, 4.0f, BLACK);
+
+            // Draw GUI controls
+            //------------------------------------------------------------------------------
+            GuiSetStyle(LABEL, TEXT_COLOR_NORMAL, ColorToInt(GRAY));
+            GuiToggle((Rectangle){ 640, 70, 120, 20}, TextFormat("Pause"), &pause);   
+            GuiSetStyle(LABEL, TEXT_COLOR_NORMAL, ColorToInt(LIME));
+            GuiSliderBar((Rectangle){ 640, 40, 120, 20}, "Angle", TextFormat("%.0f°", angle), &angle, 0.0f, 360.f);
+
+            // Angle values panel
+            GuiGroupBox((Rectangle){ 620, 110, 140, 170}, "Angle Values"); 
             //------------------------------------------------------------------------------
             DrawFPS(10, 10);