How to plot concentric circles (or other patterns?) on a grid of pixels, ensuring every pixel is occupied

Question

A hobbyist programmer asks...

Let's say a "pixelMap" is an array of x,y coordinates in a square region at which to render each color that's read from a separate array (in order from start to finish)

The purpose is to help "animate" the rendering of an image by defining an "interesting" path along which the image's pixels are rendered one pixel at a time over some duration.

E.g. the order of pixels rendered may follow a path that traces increasingly large circles emanating from the middle of the grid.

My difficulty is that the pixelMap's path must cover every pixel in the grid exactly once (the pixelMap and color Array are the same length, and every pixel must receive a colour.

So, I turned up the "Midpoint circle algorithm", but can't discern an application of it to help with my concentric circles pattern.

So...

Q1. Is there a relatively straightforward algorithm that will render the expanding concentric circles pattern, using every pixel once only?

Q2. Is anyone aware of any other algorithms or formula that produce pretty or amazing or interesting paths that could be fit for my purpose? I need a few different pixelMaps for variety. (And thanks, but I managed to work out concentric squares by myself ;-)

Thank you.

Answer 1

You have a challenge coming from the conflict between circles and the square grid of pixels. If we call the pixels $(n,m)$ measured from come center $(0,0)$ you could compute all the distances, sort them, and color the pixels in increasing order of distance $\sqrt {m^2+n^2}$ with the same color. The problem with this is that many of your "circles" will only have a small number of pixels, so they won't look like circles. For example, the circle at radius $\sqrt {2081}$ will only have the pixels $(\pm 20, \pm 41)$ and $(\pm 41, \pm 20)$ colored. An idea would be to take a range of distances and color all the pixels in that range some color. Choose your ranges so the number of points per circle is to your liking. You might like a range from $\sqrt 2$ through $2$ to give the eight points $(\pm 1, \pm 1), (0,\pm 2), (\pm 2,0)$ as one circle.