Image Transformation

Visual Assistance



These are notes for a Matrix Style image generator that I stopped working on.

The first few images pertain to creating custom text tiles.

The remainder highlight a visual methodology to aid in the debugging of complex Image Transformations.

No code is provided.

01-TextTile.png

Using imageMagicl's label command, I created the above standard ASCII text tile. Static is achieved by postitive (white) and negative (black) random point static that is put through a blur filter.

02-WallOfText.png

The above utilizes imageMagick's caption command, text was imported from a file.

03-WordVertical.png

The above is ia a proof of concept. Text tiles combined vertically.

04-WordHorizontal.png

Text Tiles combined horizontally. Notice how the blur is horizontal, as well.

05-mogWave.gif

Transform effects. I call this the Mog Wave.

06-seaSick.gif

Tranform, rocker effect.

07-VerticalRotationWallText.gif

Transform, vertical rotate. Notice the 3-D effect. However, the image rocks a little off center. The rest of this page is basically a history of my attempt to track down this bug.

08-VerticalRotateTestSheet.gif

Vertical Rotate. Any picture will do.

09-HorizontalRottaeTestSheet.gif

Horizontal rotate. I designed these complex test images. But they weren't very useful outside of an inkscape design exercise. They are too complicated to use as test patterns.

10-BrettPauflerHorizontalRotate.gif

Remember the Matrix problem? This is rotate applied to a vertical strip (without any attempt at adding in a 3D effect)

11-HorizontalRotateDistortion.gif

With 3D, the transform function garbled the image, so obviously something was up.

12-VerticalRotationDistortion.gif

Here's the vertical rotate with the 3D more distorted. Oddly, this is about where I left the Matrix problem behind.

20-CornerPull-Debug.gif

The top and bottom picture (above and below, form a set). Above is a pictorial output of the points being applied to transform the image below. If you can debug a series of numerical matrixes of these points (the X's) as they move sequentially in time, you are a better mathematician than I.

20-cornerPull.gif



21-MogWave-Debug.gif

Once again, above and below, pictorial representation of the transform being applied.

21-mogWave.gif



22-SeaSick-Debug.gif

No code. This is it. This is as far as I got on this project.

22-seaSick.gif



23-verticalRotate-Debug.gif

This is what my vertical rotate looked like when I threw it into a transform.

23-verticalRotate.gif



24-horizontalRotate-Debug.gif

This is the output for the horizontal. Or in other words, these are the functions I utilized to achieve a horizontal flip, pushed into a transform equation.

24-horizontalRotate.gif



25-pullClockwise-50-Debug.gif

The equations don't actually matter. It would have taken me hours to debug these numerically. And I won't say they do what I want them to, but getting each corner to be the appropriate mirror of the others was relatively easy once I started utilizing these pictorial diagrams. I could get one corner to work, then the next, and the next, with certainty that I'd gotten them at least equal from the visual feedback provided.

25-pullClockWise-50.gif



26-counterClockWise-50-Debug.gif

Simple side scrunch.

26-counterClockwise-50.gif



27-PushPullMandella-rE50-Debug.gif

These last two look pretty good. Nothing to do with my Matrix project. But somewhere along the lines I realized that particular project required too much effort for too little reward. I mean, hadn't someone already done something like that before?

27-pushPullMandella-rE50.gif



28-pushPullMandella25-debug.gif

Whether or not this effect would look good on a regular picture, I don't know. But it's an effect I can add on top of others. More importantly, by the time I got here, I realized that there were easier out of the box effects that I hadn't yet explored, so this is as far as I got on this project.

28-pushPullMandella25.gif

I believe the utility of these visual debugging graphics speak for itself. I export the debugging graphics into a seperate folder from the working graphics, so if there is no need to debug, they are easy to ignore.

Thanks for you time.

© 2014 Copyright Brett Paufler

Brett Code



Most of the heavy lifting in creating this page (loading the images, etc.) was done by the following Python program that I created long ago for that purpose. Placed in a folder with a bunch of pictures, it creates an raw html page with links to each. After a little jiggering with a text editor and I've got myself a perfectly serviceable (albeit static) html page.

Py2.7-Progression.py
loads a bunch of pictures into a default html quickly

Oh, and just so we're all clear,
those images above,
replace the logfile below.
The improvement should be self-evident.
lots and lots and lots of numbers, so many numbers, one would have to be and idiot savant to make any sense of them, and although I made be an idiot, the jury is still out on that whole savant thing, so let us just assume that I am not... and idiot... or savant... of forget what we were talking about, oh, yeah, a dizzing array of numbers of human mind could ever grasp hold of anything but the smallest part