Shape “compositor”

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).



About dmill96

old fat (but now getting trim and fit) guy, who used to create software in Silicon Valley (almost before it was called that), who used to go backpacking and bicycling and cross-country skiing and now geodashes, drives AWD in Wyoming, takes pictures, and writes long blog posts and does xizquvjyk.
This entry was posted in comments, design, development, experiment and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s