# Is the circle rendering method I used a good design?

I made an algorithm that generates circles (it is also generalized to ellipses). Right away, circles of size 1 to 16 render like this: Here is how 256×256 and 256×128 ellipses render: The way this works is that I have 8 quadratic Bezier curve points on the angles 0, 45, 90, 135, 180, 225, 270, 315, like this: (in case of ellipses, trigonometric calculations are used to determine the positions of points that produce a 45° angle)

(I know that this isn't an exact circle, for example its area by radius ² is 6√2-16⁄3≈3.15194804091, but it's good enough for rendering)

However, in case of a filled circle, I round the position of the diagonal points to one of those highlighted lines; the red line and yellow background indicate an example: In case of a single pixel circle outline, I round the position of the diagonal points to one of those highlighted lines; the red line and yellow background indicate an example: So, I'm using the principles of font hinting diagonally. And when the dimensions of the ellipse are not integers, the width and height gets rounded and the horizontal/vertical points and the center are calculated based on the rounded dimensions, but the position of the diagonal points (relative to the center) is based on the original dimensions, not the rounded ones; they're rounded not to the pixel grid's horizontal or vertical lines, but to the diagonal lines.

Here is an example of how a quarter of a 10×10 circle is rendered: Here is an example of how a quarter of a 10×10 circle outline is rendered; which pixels the blue dots are in determines what pixels the output will include: It's possible to make similar constructions for a thickness like this (I don't know the name of this thickness) or this (a thickness of 2 pixels) or anything.

Is this algorithm a good design or a bad design? What do you think? Does it have any advantages or disadvantages over competing algorithms (the circle algorithms in various image editors)?

Edit: Here is a comparison of the rendering of a 256×256 circle: on the left is the result of the built-in tool in RealWorld Cursor Editor, on the right is the result of the method described in this question: Specifically focus on the parts where the circle edge is at a 45° angle. Note how this method handles this angle.

Also, I made a webpage where you can enter any parameters of size to generate an ellipse with this algorithm yourself: https://circlerenderer.netlify.com/

• For which purposes? Where is this algorithm going to be used? Why is there no anti-alias? Jul 3 '19 at 9:50
• This algorithm could be used to render circles/ellipses in image editors, in place of the existing algorithms used by various image editors in their ellipse tool. Also, if you want anti-aliasing you could oversample: generate a circle 4 or 6 times as large, then downscale (with gamma correction; with or without subpixel rendering); this is the same principle as used in anti-aliased text rendering. Jul 3 '19 at 10:00
• THis site is not for programming related things so asking for algorithmic usefulness is out of scope. Its ok, but seems like a awfully complex way of doing this. Although the molecularity may be a win when you implement other bezier tool sets steps. Altough this isn itself is pretty useless. Jul 3 '19 at 11:42
• This isn't asking for "algorithmic usefulness" at all. This question is meant for users to evaluate the OUTPUT as a graphic design, not the code itself. Jul 3 '19 at 15:15
• But then your question is too broad. As looking good is a subjective thing. But also it is somewhat dependent on hardware you look the pictures at. In anycase there is very little use for pixelated circle renders. And its not entirely trivial to just supersample either. Jul 3 '19 at 17:40