Search code examples
calgorithmdrawingsdl-2

Draw good circle with SDL that is not as pixelated

I want to draw a circle.

This is my code and my output (SDL_SetRenderDrawHexColor is my own function that gives hex and converts that to rgba and SDL_SetRenderDrawColor.)

vscode ide

Why is my output some pixely? I use this algorithm in canvas(js) and that was good, but in SDL it's bad. I think pixels are big, is that true?

(For some reason I can't use SDL_gfx.)

Solution

  • The arguments to trigonometric functions such as SDL_Cos() are in radians and a floating point type (a double in this case). You are passing them in degrees, as integers.

    By looping over the angle (the range should be 0 <= i < 2 * pi) you will draw more points than are needed for small radius circles and a discontinuous line for larger ones. Because sin(x) and cos(x) are periodic functions, using degrees rather than radians means you still move round the circle, but not in the way you wanted.

    The Midpoint circle algorithm is one way to do this correctly. This exploits symmetry to only calculate points in one 1/8th of circumference and then project them round to the other 8 ways.

    I concur with other answers that you probably have sub-pixel antialiasing (more strictly, it's down oversampled, then downsampled with a low-pass filter) in HTML canvas. This is a very different proposition to drawing concentric rings with a gradient as you are attempting here.