Thanks to **Santiago Zubieta **(https://twitter.com/zubie7a) it has come to my attention that some of the pixel art I was making with “Quadrance” from Wildberger’s Rational Geometry is actually a pattern that has been known for some time that is called the Circles and Squares fractal.

First lets go to the link Santiago sent me at Paul Bourke’s amazing site:

http://paulbourke.net/fractals/circlesquares/

Then a search for “Circle and Squares” fractal reveals Wolfram Alfa also has info:

Weisstein, Eric W. “Circles-and-Squares Fractal.” From *MathWorld*–A Wolfram Web Resource. http://mathworld.wolfram.com/Circles-and-SquaresFractal.html

The sites above link the pattern to modular arithmetic and they point out the Moire-like patterns.

If you click the links above you can view the images that they created. The formulas on the pages above can seem slightly complicated, but they have at their heart a very simple idea.

Here is my version:

Here is the pseudo code I used to generate the above image.

create a pixel image 256 wide by 256 tall for each pixel at coordinate x,y set red, blue, and green intensity to all be x*x+y*y

Here is a C language code snippet.

for (int i=0;i<256;i++) { for (int j=0;j<256;j++) { p = (struct pixl8_t *)&pixels[j*256+i]; p->blue = p->red = p->green = i*i+j*j; } }

The full code is here:

Now the trick here is that I don’t need to use any modulo code, because it is implicit in the way that color works on most modern computer pixel graphics systems. Most modern graphics chips are built with 8-bit color channels, 8 bits of red, 8 bits of blue, and 8 bits of green. This gives the effect of ‘modulo’ because the system will just automatically chop off any numbers that are bigger than 8 bits. For example at coordinate x=13,y=12, the code will create 169+144 which is 313, but keeping only the lower 8 bits gives the effect of modulo 256, which gives us 57. So the brightness, between pure black of 0 and pure white of 256, is 57. A dark gray. This kind of implicit modulo has been a behavior of raw pixel graphics on personal computers since the late 1980s.

So in the end there is no need for modulo when dealing with raw pixel systems because the computer implicitly does it. But there is also no need for transcendental functions or even bitwise operators to generate this pattern. In fact, you may notice that this psuedo code is simply using the Quadrance from Wildberger’s Rational Trigonometry. Quadrance is basically distance squared if you are thinking in classical geometry terms.

However, Wildberger did not stop with x*x+y*y. In his ‘Chromogeometry’ lectures he describes alternative versions of quadrance,

Blue = x*x+y*y

Red = x*x-y*y

Green = 2*x*y

So what happens if you alter the pseudocode to contain Red or Green quadrance instead of just “regular” blue quadrance? Well, let’s try it. And just for fun, let’s have the colors match the version of quadrance we are using.

Pseudo code for red quadrance:

create a pixel image 256x256 for each pixel at coordinate x,y set red to be x*x-y*y

Result:

Pseudo code for green quadrance:

create a pixel image 256x256 for each pixel at coordinate x,y set green to be 2*x*y

Result:

It makes sense, because Wildberger’s lectures describe Red and Green in reference to hyperbolas.

Unfortunately googling “Hyperbolas and Squares Fractal” doesn’t seem to turn up an exact result. Perhaps someone else has found these patterns as well and simply called them something else?

But in fact Santiago had explored hyperbolas in his own artwork, which he kindly linked me to here:

If you click that link, you will see that the images in which he used x*y in fact generated hyperbola-looking patterns.

But can you go farther?

Yes, yes you can.

If you notice that x*x+y*y, x*x-y*y, and 2xy are all basically in the quadratic equation family, you can experiment with other things, like x*x+2xy+y or whatnot.

And you can do animations, because the modern computer can update 256×256 pixel grids several hundred times per second.

But that is another story for another time.

But can you go even farther?

Yes, there is an amazing post at Stack Exchange Mathematica by Simon Woods describing enhancements to the formulas, here:

http://mathematica.stackexchange.com/questions/60110/how-to-plot-a-circles-and-squares-fractal

In fact he raises the question as to whether the Circles and Squares fractal is actually a fractal at all!

Thanks for reading.

Oh and one more thing. There is a gallery of 7 basic pixel art images based on Quadrance here, at flickr, if you want to go check them out.