Add draw circle graphics usage examples

[222448082Ashen]

Description

Splashkit Function: draw_circle and fill_circle

This PR adds a new usage example demonstrating how to draw circles using SplashKit's draw_circle and fill_circle functions. The example creates a window and draws multiple circles with different colors, sizes, and positions to showcase various circle drawing capabilities.

Overview of example functionality:

This example demonstrates basic circle drawing in SplashKit. The code creates a visual showcase featuring:

• A large red filled circle in the center using fill_circle
• Multiple outlined circles in different colors (blue, green, orange, purple) positioned around the screen
• A row of 8 dynamically colored circles with varying radii to show programmatic circle generation

The example is designed to be simple and educational, showing both filled and outlined circle variants in a single demonstration.

Example Output:

The program opens an 800x600 window displaying:

• A large red filled circle (radius 100) centered in the window
• Four outlined circles at different positions with varying sizes and colors
• A horizontal row of 8 circles at the top with random colors and increasing radii
• All circles remain visible for 5 seconds before the window closes

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (update or new)

How Has This Been Tested?

All language versions were tested locally:

C++ (MSYS2/SplashKit):

• Compiled successfully using: g++ draw_circle-1-example.cpp -lsplashkit -o draw_circle_test
• Executed successfully with expected visual output
• Window displayed all circles correctly and closed after 5 seconds

Python:

• Ran with: python draw_circle-1-example.py
• All circles rendered correctly with proper colors and positions

C# (both versions):

• Top-level and OOP versions both compile and run correctly
• Visual output matches other language implementations

Build verification:

• Ran npm run setup - JSON files and API MDX pages generated successfully
• The new example is now included in the Graphics API documentation

Testing Checklist

• Tested in latest Chrome (for web documentation build)
• Tested in latest Firefox
• npm run build (generates API pages successfully, Algolia warning is pre-existing)
• npm run preview (works with new example)

Checklist

If involving code

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

If modified config files

• I have checked the following files for changes:
  • package.json
  • astro.config.mjs
  • netlify.toml
  • docker-compose.yml
  • custom.css

Folders and Files Added/Modified

Added:

• public/usage-examples/graphics/draw_circle-1-example.cpp
• public/usage-examples/graphics/draw_circle-1-example-top-level.cs
• public/usage-examples/graphics/draw_circle-1-example-oop.cs
• public/usage-examples/graphics/draw_circle-1-example.py
• public/usage-examples/graphics/draw_circle-1-example.txt
• public/usage-examples/graphics/draw_circle-1-example.png

Usage Example Checks

• Code uses Splashkit functions: Demonstrates both draw_circle and fill_circle
• No non-Splashkit functions: Uses only SplashKit graphics and color functions
• No extra declarations: Minimal, focused implementation without unnecessary classes or functions (except C# OOP variant which appropriately uses a class)
• Follows style guide: Complies with Thoth Tech SplashKit Style Guide rules
• Simple demonstration: Clear, concise example showing core functionality
• Browser tested: Generated documentation pages tested in Chrome and Firefox

Additional Notes

Relationship to existing examples:

• This example complements the existing draw_circle_on_window, draw_circle_on_bitmap, and fill_circle examples
• It provides a simpler, more beginner-friendly introduction to circle drawing
• Demonstrates both outlined and filled circles in a single cohesive example

Design choices:

• Window size: 800x600 (consistent with similar shape examples like draw_ellipse)
• Display duration: 5 seconds (allows time to view the output)
• Color scheme: Uses standard SplashKit colors plus random colors for variety
• Layout: Organized pattern with center focus and corner/top elements for visual balance

Testing notes:

• All four language implementations produce identical visual output
• Example successfully integrates into the API documentation generation system
• The Algolia DocSearch warning during build is a pre-existing configuration issue unrelated to this PR

For reviewers:
To test this example locally:

# C++
g++ public/usage-examples/graphics/draw_circle-1-example.cpp -lsplashkit -o test
./test

# Python
python public/usage-examples/graphics/draw_circle-1-example.py

# Build docs
npm run setup
npm run dev

[netlify]

✅ Deploy Preview for splashkit ready!

Name	Link
🔨 Latest commit	e42da62
🔍 Latest deploy log	https://app.netlify.com/projects/splashkit/deploys/693254bc475bda0008826097
😎 Deploy Preview	https://deploy-preview-677--splashkit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Sparsh300]

The structure and readability of collections.mdx have been improved overall.
Here are some recommendations to improve the coherence with the remaining SplashKit documentation:

1. Headings: To match other MDX pages, make sure each main heading has the same spacing (one blank line before and after).
2. Formatting Style: Please confirm that the arrangement adheres to the general documentation style rule that is utilized in other sections.
3. Code Blocks: For better syntax highlighting, think about including a language tag (such as cpp/json) if there are any instances.
4. Readability: Beginners may find it easier to grasp the page's objective if a brief introduction is included at the top.

Although these are little enhancements, they aid in preserving uniformity throughout the documentation. Overall, excellent work.

[Sparsh300]

Viewed the changes and find everything works well.
Cheers