Programming math-based images for use in high-resolution artwork

Question

I'm interested in creating poster-sized images that contain repeating patterns, similar to the two (public domain) images below, the Flower of Life and a Penrose tiling:

My questions:

1. How do people usually create images like these on a computer? I'm hoping the answer isn't, "Open Adobe Illustrator and guess at intersection points," since such points can be defined mathematically. But I also imagine that not everyone with an interest in geometric patterns is also familiar with programming.
2. What is the best environment for creating such images? In particular, what's the best way to get high-resolution images out of Java, Python, Processing, etc? Or, is Mathematica the best tool?

Actually calculating the points and doing the math isn't the hard part, in my mind (at least, it's not the focus of this question). I'm interested in the best way to get a high-quality visual product out of a program.

Answer 1

Use a vector image format like SVG. This will scale perfectly to any resolution.

Inkscape is a great tool for creating these.

Once you have a vector image format, there are many options for using it in programming languages, depending on your language of choice.

For example -

• .NET - SvgNet
• ActionScript - svgweb
• C++ - LeadTools
• XAML for WPF/Silverlight - ViewerSVG (Converts SVG to XAML)

Answer 2

Well, #2 is going to be kind of a holy war so I'll address #1. :)

The key to images of this nature is recursion. Basically they are the same image repeated over and over in a controlled way to get an intersting result. Take the flower of life for example. You repeat the center petal six times (the method to do the petals is up to you). Then you create six more flowers using the petals tip as the center and overlapping one of the petals. You then recursively move outward. After a few "rounds" you stop and draw the containing circle. Basically the recusion simulates the stamp, move and rotate that would be required if you were doing it by hand.

When I have played around with these kinds of things I have always found that experimentation is the best way to get cool new things. Of course that could be just my lack of imagination. :)

I know I am not very math heavy in this answer but that is up to you and experimentation. Just remember that COS and SIN are your friends and there are 360 degrees in a cricle (or 2pi radians depending on your math package).

EDIT: Adding some math for the "Flower"

Starting with a center of (Xo, Yo) and a flower radius of r...

The tips of the petals (P0, P1, etc) are determined by...

X = Xo + (sin((n * pi)/3 + (pi / 6)) * r)
Y = Yo - (cos((n * pi)/3 + (pi / 6)) * r)

where n is the petal number (0..5)

Once you compute a petal tip, just draw the petal and then start a new flower at the tip. You would also set a bounding circle so that any point outside that circle would not be drawn.

Answer 3

I would try to create a PDF with iText in Java. PDF supports vector graphics, so it should scale without problems. I don't know how well iText scales w.r.t. performance when you have a really big number of graphic elements.

Answer 4

Hi

A1. You might want to look at turtle-graphics, l-systems, iterated function systems, space filling curves, and probably a lot of other approaches I'm not familiar with or haven't thought of yet.

A2. You can program any of these with any of the languages you suggest. I like Mathematica, but I know that not everyone has a copy of it and I have a copy 'cos I work in number-crunching and get to play with it for making pretty pictures. But Processing, which is free, was designed to be artist-friendly and might be a better starting point for you. Both Mathematica and Processing do the graphics right there and then, no calls to external libraries (or worrying which ones to use).

And, while I agree with everyone who says that vectors are the way to go, don't forget that the final productions step, onto paper or screen, is rendering so give some thought to how that will be done. This might, for example, lead you to Postscript or PDF for an output format.

Have fun

Mark

Answer 5

The best way to create images like these is to learn to write PostScript. It's a clean language, easy to learn, and quite powerful once you know it well.

Bill Casselman's manuals are by far the best reference for high quality mathematical illustration.

Answer 6

Well, I used to draw flowers of life with a compass, back then in junior school ... very simple actually ... but I don't think that's the answer you're looking for.

Basically it consists of drawing a circle of the same radius, from every point, until you encounter the big circle (limit).

Answer 7

I don't know how those images were created, I would guess they were scanned from a book, but, in my work with fractals, I tend to start with just using the <canvas> tag, mainly so that I can change the size of the element and see it drawn more iterations, so I can get the highest resolution.

That is the problem with something like SVG is that you would need to pick a resolution and then create it, and it will scale well up and down, but if you developed it at one resolution, then you go to a higher resolution to demo, you may see more gaps than you would like.

If you want to just do it and save it as a static image then any GUI will work, as you are saving a GIF at that point, but if you want it, for example, on a web page, and have it look as good as it can on that browser then you may want to look at using javascript.

The math part isn't hard, and so drawing the image is fairly easy, once you derive the recursive algorithm that is needed. I tend to go to the next iteration until the size is below a threshold, for example, a radius of < 3, then it exits.