I’m still going to continue this project but have been distracted into something else that has totally adsorbed my attention, Project Euler. But I’m getting close to the end of what I can do there, so I’ll end my digression and return to this project, since all my readers are enjoying it so much.
I guess if you keep looking for these you’ll find them. This one is somewhere in Atlanta Georgia and popped up in the Google Earth backgrounds for my browser.
btw: I’m still chunking away at the Shape Compositor but have hit some snags (actually writer’s block) and so nothing to report.
I’m reading the McCullough Wright Brothers book and so looked up Kitty Hawk on Google Earth. The Memorial to the Wrights surprised me, remarkably derived shape. I’ve enhanced the contrast to make it clearer.
Someone had fun designing this!
Here’s a little more click bait, a composite shape produced in prototype “compositor”.
This could be a nice repeating element in a drawing, I think. The asymmetry (within an overall symmetry) seems to create a nice balance, not too regular and mathematical, but also clearly based on math.
I reported yesterday on my progress in getting started on the shape compositor, which takes simple shapes from the shape generator (or a few built-in shapes) and composites them, with various transformations and replications to create a more complex shape. One major todo I listed was to add the clipping process and this went smoother than I expected so I can show what this does.
But first, as usual, I’ll throw in a teaser graphic to induce you, Dear Reader, to follow the rest of the explanation.
The clipping I added (through a rather complicated set of UI controls) allows using either a simple circle or one of the shapes, positioned at the center of the mirrored shapes, and with a controllable radius. So let’s look at the simplest versions of clipping:
The first figure, on the left, shows the composite shape with the clipping circle shown in light-blue (my standard color for “construction lines”) without any clipping. Then the middle figure shows the effect of clipping the composite shape “outside” the clipping circle and the rightmost figure shows the effect of clipping “inside” the circle.
Now the effect of this clipping (either one) is to leave open shapes which won’t work in the coloring program so, at minimum, we’d want to draw the circle to close the shapes, as seen below:
So we have closed shapes now, but there is a different way we can approach drawing the clipping circle and that is letting the clip circle be clipped by the shapes, as seen below:
So in the figure above the left shape has the clipping circle drawn “outside” the shapes and on the left it’s drawn “inside” the shapes.
So with just these clip options we can make some interesting composite shapes, but we can make it a bit more interesting, with the same clipping options, but using a different shape as per a few of the examples below:
So with a few simple shapes to mirror and a few more shapes to clip we can create all sorts of compound shapes that may be more interesting to use in the coloring drawings.
So with this step, at least in experimental coding form, completed it’s time to move on to rotate and repeat shapes around a path (initially just a circle) and in conjunction with clipping. But also to truly do compositing I need to allow more combinations, i.e. one set (more than all the same) shapes to be mirrored surrounded by rotating shapes with more complex clipping.
To do that I have to first figure out how I can reduce all these options to a “language” as trying all the combinations just through UI options is going to get very complicated. I have a few ideas about the structure of that language (based on my success (and shortcomings) of tieflume as a shape generation language). So that will be a challenge to figure out but it’s the essential part of the shape compositor. And, of course, the composite shapes need to go into shape library with some consistency with the simple shapes so when it comes time to render either type of shape into a drawing that will all go smoothly.
So stay tuned, this is evolving and hopefully will get more interesting.
I’ve been preoccupied with a visit from relative and so had little time to work; I need to have lots of private/quiet time to be able to focus and so haven’t had that, but I dabbled at bit and am now getting back in the swing.
Teaser image to hold your interest to read the post about how this is produced:
I have four components to the coloring system I’m building: 1) the coloring program itself, currently fairly advanced but I only have outline drawings I find elsewhere and, most often, low resolution and so a bit troublesome to color; eventually this program will be tuned to work with my own drawings, 2) a shape “generator”, which is currently based on parametric equations and an interactive approach that allows RSE (Rapid Shape Experimentation) – the interesting shapes from this go into a shape library (now in the form of the “history” my recent posts have described), 3) a shape “compositor” which can combine the simple shapes into more complex shapes – this is what I’m beginning to explore in this post, and, 4) the actual coloring drawing that will be created from various construction paths (and symmetries) as a layout, then filled in with either the simple or composite shapes.
Underlying these components (at least three of them) is the “shape library” which is more than simple bitmaps of the shape itself, but the “language” definition of them so they can be rendered, at arbitrary resolution, to be combined into composite shapes or drawings. It’s been challenging to think of exactly what functionality the shape library requires so I’ve (recently) built a surrogate or proof-of-concept (experimental) version as the “history” in the shape generator.
So partly to begin to understand (largely through vague ideas (not fully baked designs) and experiments) the requirements for both the shape library and the compositor itself I’ve started some work on it – not quite up to the level of a POC, more just as an experimental testbed to try some ideas and then generalize these experiments into a design and actually build that. So I’ve advanced from the purely hardcoded version I previously reported (the placement of multiple shapes (specifically “stars”) around an arc) to a new program that I am calling the v0.1 of the compositor itself. I did, with a fair amount of hassles, make some headway on this during the limit work time I had during my recent guest’s visit.
The place I started with, knowing I’d want this feature in the compositor is mirroring a simple shape, either vertically or horizontal or both, and then later adding some clipping (now working on) via simple shapes or the actual shapes from the generator. Thus combining shapes together to create more complex and interesting shapes.
So here’s what I mean by this, starting with a tieflume shape (below):
which has its “canonical” rendering in this orientation (actually 90° rotated from what the parametric equations draw in standard Cartesian space). This shape is a “family” in that its basic shape is retained by it can vary across a range of:
So using this shape we can create the following “mirrors”:
(the colors are arbitrary, just to help me in programming (with many mistakes) to identify the left, right, top, bottom instances of the shapes)
You can this is a “mirror”, not a rotation when you use an asymmetric shape as shown below:
You could rotate the orange shape to the red shape, but rotating again to the blue shape’s location would put the “curlicue” on the top, not the bottom as the mirror does.
An additional option to the mirroring is to determine whether the shapes overlap or are far apart, like this:
which then allows the possibility of creating an interesting composite shape from these simple shapes.
So even with just this simple feature in compositor it should be apparent how more interesting shapes can be created.
So where do I go from here, while still just in the “experimental” mode (vs actually more careful coding of a POC or even the first version).
First I want to add clipping (hopefully a post on that some) so I create something like a “flower”, with one set of “petals” on top of a second set (and different) petals, with a “center” that looks more like a center. Clipping will be challenging since, at least in .Net graphics, it is applied when rendering the overall drawing, but, AFAIK, I can’t actually “clip” a GraphicsPath with another GraphicsPath, select the parts I want and create a new GraphicsPath, like the example below:
When I fill the left ellipse with the right ellipse as a clip region (actually the region is the entire drawing space with a “hole” inside it where the second ellipse is), thus yielding the pink region. Fine, this would render correctly but I actually want the “outline” of the pink area (in highest resolution) so I can use it as a shape. Since the shapes are arbitrary the math necessary to compute the GraphicsPath looks really hard I suspect I’ll just use some tricks, basically render the shape to small line segments in very high resolution (like 4K) and then create the path via code tricks, not math.
After clipping I want the flexibility to make a composite not just of a single shape (repeated) but different shapes and also multiple placements (not just four instances of the shape). And instead of mirror I want to do a rotation (along the simple path of a circle) with various alterations of shape (say every other “star” in a 12-fold rotation is either a six-point larger and eight-point smaller, or, say 5 equally space large 5-point stars, with three smaller five point stars in between (and probably along a different circle radius).
And, of course, a much large library of shapes to work with.
And, ???, but undoubtedly other features I’ll discover as I do my coding experiments.
And all of this, again, wants to be controlled with a “language”, not just a bunch of stuff in the UI (already getting cluttered in my “experiment”, given the significant number of options just a few compositing tricks can require), but also so the composite shape can easily be changed by a few tweaks to the “program”. But in this case, unlike my tieflume “language” I’ll need a way to express inter-relationships (like make a path for placing shapes bigger, mean other placement paths adjust accordingly).
And then as a really interesting programming challenge instead of just distributing shapes around some simple reference path (simplest being circle, but might be other regular polygons) instead use a more geometrically complex tieflume shape (like the triangle with the curlicue) and distribute shapes along its perimeter with various spacing options (not just equal angle like a rotation, but also equidistant along the perimeter, then having to deduce the tangent to determine the rotation).
IOW, even with the still-not-very-specific specifications for the shape compositor I have in my head (and wishlist in notes) this is going to be a major development effort.
So stay tuned as this progresses because I believe it will produce some interesting results that would be difficult to achieve through other means (other than the visual cleverness of a skilled illustrator, which I’m not, so I write code to make complex drawings, not actually draw them).
It’s a very small step forward but a critical one as I’ve switched gears, yet again, on the part of my system I want to develop a bit. To review I have the shape generator on one end (upstream) and the coloring program on the other end (downstream). I need to create shapes (now multiple ways), feed those into the compositor to may more interesting complex shapes, and feed those into the drawing composer so I have an original drawing to do in the coloring program (and post for you, Dear Reader, to do with as you wish).
So here it is:
Big deal, some stars in a circle. But it is a step forward to start on a POC for the shape compsitor. The stars, now filled instead of outlined, are produced from the shape selection and configuration process, in this case a “builtin” shape, but the shape process can now be applied by shapes from the shape generator tieflume programs. The stars have multiple parameters that can adjusted as you wish, then placed in a configuration, in this case wrapped around a circle with no clipping (which adds all sorts of interesting possibilities). So this test program, literally test program (not even POC) can also build something like:
(you get to figure out the contradictory symmetries in this one).
Big whoop, still nothing interesting, but the point is the compositor is going to take various objects, use them with to repeat along some figure (a circle is simple, a bit trickier to put this around a heart), then add other figures (as either clip area or drawing area) and end up with something that is far more complex than the parts, AND, hopefully visually interesting (that’s up to the user, I’ll just try to build the tools).
Now a circle of stars is not much but it’s a bigger. That’s the nice thing about code – get this to work and it’s easy to extend to something far more complex, and, hopefully, more visually interesting. For instance, what if instead of the circle to place the stars (and properly rotate them, the thing that stumped me, for a while) you use multiple shape around the perimeter of a shape that is itself complex (say a heart). Once I get more software done I’m again focusing on something you can easily change (e.g. three different shapes around an unrelated shape) to finally, with foresight plan, or by luck stumble onto that is interesting. THEN place that shape into some complex pattern of a final mandala-like drawing.
So this is a step, trivial to some readers, but eventually I hope way more complex and non-obvious and also interesting.
The math I stumbled on getting this, while simple, was a problem. Like anyone who’s had analytical geometry, we’re very oriented to to +y is “up”, -x is “left” and so forth (all of the trig in this based on that). BUT, graphics, at least in Windows is counter-intuitive (in a trivial, but to me confusing as my developed intuition has trouble recognizing) that y increases by going down (in essence the fourth quadrant of the typical math/trig notion) and thus mirrored. So what I had to do was stay in -1…+1 as long as possible, then translate to the pixel coordinates to draw the final result. If I’d never know the usual Cartesian coordinate system, then perhaps it would be simple, but I constantly finding myself having to think with a mirror image, e.g. a “positive” (counterclockwise) rotation of 18° is actually equivalent to a “negative” (clockwise rotation of -72º), or really a 90º total rotation, but in five-fold symmetry very different.
Already, with my testing of the shape generator and my history file (past couple of posts) I have 33 shapes (many of which are families) to attempt to use, like:
with this shape:
placed around its perimeter with the long axis of this shape perpendicular to the path of the first shape, (weird and uninteresting, but again people with more design sense that me might make something more interesting.)
So that something I’m looking for, plus, btw, a lot of types of “distortions” that can be applied to the shape, such as:
So stayed tuned until I’ve got some of this working so my images will be real products of the shape compositor instead partial (and simple) results produced with crude prototypes, PhotoShop, and imagination.