I think a post with more images and less text is probably more interesting so that’s what I’ll focus on in this post and return later to the software issues and my project. So here’s a couple of teasers:
Now before I get into main topic of this thread (what produces these figures) I’ll do a small digression of image quality. In order to put these images into posts I have to use Photoshop to create the file (my app put the image into the clipboard). And I do a couple of things to (slightly) improve their appearance. I’m just using standard Microsoft .Net drawing routines (System.Drawing.Graphics.Drawline) and it doesn’t do anti-aliasing so the lines are “jaggy”. This has two effects as shown in an enlargement below:
You can see the “jags” and when scaled back down the lines look rough, so in Photoshop I first resample the image at 300% (using bicubic interpolation), then do a blur filter, then resample back to the original resolution (512×512) and convert to GIF and save and post here. That manipulation is Photoshop does a pseudo anti-aliasing that somewhat improves the appearance (at 100% size, as I’m doing in these post).
But the second problem (an issue for me as the programmer) is all those “gaps” in the lines (not sure what’s causing that (roundoff from double to integer, perhaps). But the gaps are going to kill my coloring program which will use a “flood fill” to color each region. The flood fill (a simple recursive algorithm is going to “leak” through those gaps into adjacent areas. You can see this problem in the purple area, selecting the “inside” region flooded into the tip.
Now for the next image (below) I was a bit more extreme in Photoshop:
I did the same steps, resample to 300%, blur (a bit more than others), resample back to 100% – BUT, then I also did thresholding (which converts most of the anti-aliased pixel back to pure black). So this looks a bit more like a coloring shape but notice the small regions have run together, a problem both using this shape and the image processing tricks I did.
Note: I’m using Photoshop for these things because it’s quick but as I had developed most of the algorithms in Photoshop before it ever existed I can, after some prototyping, just build those algorithms into my own code and skip Photoshop; including “choke and spread”, a very useful, but tricky algorithm I learned about, as an optical trick in old manual prepress days and then implemented digitally. But since that’s old stuff to me it’s not interesting at the moment, but I’ll need to incorporate that in my final “product” (plus it will save me time not having to go do all this stuff in another application.
Back the the main subject: What is making these figures. Well it turns out it’s these parametric equations, which I found, naturally, on the Net and played with.
And you can see an interactive online demonstration at this site (cool way they did it)
x = cos(Aθ) + 1/2 cos(Bθ) + 1/3 sin(Cθ)
y = sin(Aθ) + 1/2 sin(Bθ) + 1/3 cos(Cθ)
and its implementation in my “language”
x fourier(T 1 90 1 A 90 0.5 B 0 0.333333) y fourier(T 1 0 1 A 0 0.5 B 90 0.333333)
Clue, each triplet of numbers is frequency, phase and amplitude; my ‘fourier’ function (paralleling Fourier analysis) is just a set of sine’s added together, but when phase=90 they become cosines). And unlike the article I chose to user parameters only for the last two terms.
With quite large values of A and B (105, 100) you get more complex curves like this, interesting to look at but too complex for coloring books:
So having found this parametric equation now I can play to my heart’s content, but given there are around 10,000 combinations (and having three parameters would make it really huge set) I quickly found it difficult to see what was going on. That’s when I invented my other iteration mechanics (the “constants” (now not some constant)) and my “montage” where I could generate an entire set of curves all at once and view them, as we’ll see in the next figure.
Note: I boosted the contrast a lot in order to make the curves more visible in this seriously downsampled montage.
Now with these low values of A and B (1…5 if you can’t see the labels) the curves are rather simple, mostly not very interesting, although a couple of them might be good candidates to use in a mandala. So let’s make them a bit more complex.
Here we get a chance to spot a pattern emerging, what I’m calling a family. Note that the curves on the diagonal have the same symmetry and also the curves in a column have an increasing symmetry. I can expand these into strips, but with bigger skips.
Note: WordPress won’t let me scale these properly so they’re sharp but you get the idea. Or one of the columns
And there you can see the increase in degree of symmetry.
Now I could fill up pages with just this one equation but I think this gets across the general idea, but wait a moment – there is more I can play with, i.e. change one to six functions to its partner (sine ↔ cosine, just change the phase in my “program”), and, instead of adding terms I can subtract (just change sign of the amplitude in my “program”), so let’s see what that might do:
Whoa, those are ugly. Let’s try something different.
A couple of those are a bit more interesting but still pretty ugly. So try something different.
Those are a bit more interesting (changed add to subtract in the third term of x equation, note the huge difference, but that same progression of symmetry.
So I’ll end with this one and you get to try to guess the parameters:
Hint: both A and B are odd numbers. Not enough. B is the product of 13 and 5. A is the second prime just past 40. Come on, you can do that math.
And this one looks a lot like a mandala but a bit too messy to color (hint, it’s from two Fibonacci numbers, A=89, B=21.
Oh I can’t quite quit yet, here’s a 1D plot of the x equation for the figure above:
and the first 96° degrees of this full period wave to see the detail a bit better.
So that’s probably enough lesson for the day and to present the idea about how curves are generated. But what next?