Draw dynamically sized circles with pixels in P5.JS

I'm working in [login to view URL] and looking for someone to draw dynamically sized circles with pixels. I have attached a [login to view URL] code example that draws square shaped diamonds using pixels. I need the circles to be drawn in the same manner the square shaped diamonds are being drawn, but with the proper logic to draw the circles instead of square shaped diamonds. Requirements: A finished project will render and look, down to the pixel, just as the attached example code does but with circles instead. The circles need to be dynamic in size as the square shaped diamond code shows. The size of the circles in pixels will always be odd so there is a single pixel in the center of the circle. The circle must have the same width and same height and perfectly fit into the bounds of a square. The circle must be drawn in one draw cycle, i.e. single draw for a single circle shape. The circle logic cannot be a hard coded map that takes care of each size; theoretically the circle size can be infinite, so a map of the circle logic is not feasible. There must be an algorithm of some manner that takes care of each odd sized circle. Here is a link of different sized circles being drawn with pixels. This is just an example of what pixel circles look like and how each circle has to be drawn differently. [login to view URL]