Vess Cola, Part 4.

I started writing a post on how I was arrive at the 4**9 calculation. I wanted a way to illustrate the 4x pattern of the puzzle pieces.

My original drawings were done with OmniGraffle. OmniGraffle is an amazing piece of software. Its ease-of-use gives me something to strive for in my own software.

However, OmniGraffle is quite good at diagramming, drawing squares, shapes, connecting them, etc, but I wanted a nicely colored red/green/yellow/blue square. Flood fill isn't something in OmniGraffle's design.

So how to draw a puzzle piece? I don't want to use my Tkinter GUI app yet (saving that for a future post) but I needed a way to get a simple puzzle piece into a post. And taking a screen shot felt like cheating. Too easy. Yes, I like to find the hard way to do things. I learn a lot that way.

Several years ago, I wrote a little Python+ImageMagick script to do the familiar "Forbidden!" red crossed-out circle. ImageMagick has some very nice drawing primitives. (I'll post the cross.py at some point. I'd like to stay remotely close to the Vess Cola topic for a while.)

First shot was something like:

% convert -size 100x100 xc:gray -fill white -stroke black -draw "rectangle 10,10 90,90" -draw "line 10,10 90,90" -draw "line 90,10 10,90" puzzlepiece.png

Well. It's square with a cross through it. Missing color. Needs some fill. Needs some flood fill. Easy with a paint program. But what's the fun in that? ImageMagick can do flood fill.


% convert -size 100x100 xc:gray -fill white -stroke black \
    -draw "rectangle 10,10 90,90" \
    -draw "line 10,10 90,90" \
    -draw "line 90,10 10,90" \
    -fill blue -draw 'color 20,50 floodfill' \
    -fill red -draw 'color 50,20 floodfill' \
    -fill green -draw 'color 75,50 floodfill' \
    -fill yellow -draw 'color 50,75 floodfill' puzzlepiece2.png

Flood fill is a bit tricky. There can be strange effects around the edges. I'm getting weird white borders. The diagonals are because of anti-aliasing (ImageMagick's web page warns about this). Not sure what's causing the white along the red, green, and blue triangles. Not the yellow, though.

Zooming in on the image via an ImageMagick scaling operation:

% convert -resize 500% -filter Point puzzlepiece2.png p3.png

 

I'm using the 'point' filter to avoid interpolating the result. I didn't want a soft scaled up image. I wanted to see pixel-by-pixel.

(I could have scaled up with OSX's Preview which does a good job of not interpolating pixels. I would have had to take a dreaded screen shot. Nothing against screen shots but I'm having fun looking for a good way to create these images programatically.)

My Tkinter app I used filled triangles. I wonder how that would look in ImageMagick? Could I do it even as an SVG to avoid the jaggies?