Вы находитесь на странице: 1из 7

different pair of values at x', y'.

THE The linear graphics transform is


often shown in this form…

GURU’S LAIR x' = A x + B y + C


y' = D y + E x + F

Constant A sets your horizontal


size. B sets the amount of lean. C the
Don Lancaster x offset. D the vertical size. E is your
climb and F sets the y offset.
Three popular transforms include
translation, scaling, and rotation. To

Nonlinear Graphic reposition, pick a non-zero value for


C to shift left or right. Or a non-zero

Transforms
value for F to move up or down.
To scale an image, change A and
D to non-unity values. Parameter A
sets the horizontal scale. D sets the
Short Cuts to Stunning Graphics vertical scale factor. Often, your A
and D values will be identical. If not,
you’ll get anamorphic scaling.
Changing your sign on A should
create a mirror image. Changing the

o ne of the key
tools needed for
stunning graphics is
the ability to select any
sign on D will create an upside down
image. Or redefine directions.
Rotation is a tad obscure. Let θ
be your angle of rotation. To rotate
something, use these values…
image and then suitably bend, twist,
A = cos θ
squash, or stretch the image to make
B = sin θ
Fancy visual mappings it conform to other visual surfaces.
C=0
The linear graphics transform is
D = cos θ
onto a distorted surface the industry standard tool used to do
E = –sin θ
most simple graphics mappings. But
F =0
can end up quite simple for really exotic stuff, you may need
more elegant tools which use higher Translation, rotation, scaling, or
and rapid whenever you level nonlinear techniques. other alterations of A-F could create
lots of different special effects.
understand all the key LINEAR GRAPHIC TRANSFORMS Changing the sequence of your
A digital transform is simply any operations changes the results!
secrets involved. method of taking an existing pile of Rotating and then translating is
numbers and then following specific vastly different than translating and
math rules to create another pile of then rotating. As first multiplying
numbers. This new pile of numbers and then adding differs from adding
will hopefully turn out to be "better" and then multiplying.
in some specified way. One subtle but super important
The linear graphical transform is use of the linear graphics transform
the stock method to change the size, is to move you from math space to a
direction, or final position of a visual device space. It is usually a good idea
image. Matrix techniques usually get to keep "the set of plans" in a totally
used. Since my eyes gloss over when device independent form. Having an
I see any matrix concatenation, we’ll arbitrary accuracy that’s subject only
substitute ordinary algebra here. to word size limits. When it comes
We’ll also limit ourselves to flat time to put the image on a screen, a
or "two dimensional" images. piece of film, or a sheet of paper, the
The object of a linear transform linear graphics transform gets done
is to accept some pair of data values to convert your device-independent
x,y and change them into a new and math space data into numeric values

48 Issue #61 September 1995 Circuit Cellar INK


matching your pixel size, resolution,
and any media limits.
Another subtle use for the linear

IS
O
graphics transform is in microsizing.

M
E
T
R
Most paper swells and shrinks. Print

IC
engines drift. Flexographic printing ISO
plates distort when they get wrapped ME IC
TR E TR
around a press drum. IC
IS OM
Microsizing is simply providing
very small changes in a scale factor.
Such as A = 1.005 or D = 0.996.

ISOMETRIC
One useful linear transform is
figure one’s isometric transform. The linear isometric transform is given by…

Isometric drawings are often used x' = x cos (30) - y cos (30)
y' = x sin (30) + y cos (30) + z
for assembly diagrams. The original
which simplifies to…
vertical or z axis remains vertical on
the page in the y' direction. And the x' = 0.866 x - 0.866 y
y' = 0.500 x + 0.500 y + z
original x axis slants up the page at
an angle of +30 degrees.
Figure 1 – The "isometric" linear graphics transform.
And the original y axis will slant
"backwards" up the page at an angle collapsed into a single point. Images every time the transform is used.
of 150 degrees. Typical circles end up can also be repeated. Or flipped, even Ferinstance, the A constant value
as 35.27 degree ellipses. reversed. But a linear transformation in a linear transform could become a
Advantages of isometric drawing can not convert a square into the odd calculated value in a nlt. This value
are that they were reasonably easy to trapezoid useful for 2-D architectural may depend upon the x or y location
draw using pen and ink, and that you perspective. Or into the quadrilateral on the page, involve trig, or invoke a
could easily measure any value along required for full 3-D perspective. random number or two.
any axis. One big negative is that the A nonlinear graphics transform, To do a nonlinear transform, you
rear corners of boxy objects all seem or nlt takes a group of numbers and calculate the immediately required
"too big". Because your eye wants to applies some rule or rules to it. Some values for A-F. And then do a linear
see perspective instead. new pile of numbers is created that transform for these "local" values.
The isometric linear transform looks graphically "different".
looks like this… The key difference is that values GRAPHICAL PRIMITIVES
A-F in a linear transformation will be In theory, you can take each and
x' = x cos(30) – y cos(30)
constants that remain the same over every pel or minimim resolvable data
y' = x sin(30) + y sin(30) + z
the entire current working area. In a value in the original image and carry
Which simplifies to… nonlinear transformation, the values out some non-linear transform on it.
A-F become calculated values which Which generates a new image having
x' = 0.866 x – 0.866 y
may have to be recomputed each and the desired change or distortion you
y' = 0.500 x + 0.500 y + z

These days, genuine perspective


ends up nearly as simple to do. And
looks far better. But isometric is still
useful whenever you purposely seek
some "drafting 101" effect. Or might
need to scale dimensions.

NONLINEAR TRANSFORMATIONS
Linear graphical transformations Select a tilt angle θ with 0° = flat and 90° = vertical.
often end up powerful, flexible, and Predefine a tilt factor geometric constant k…
computationally cheap. But there are k = fullheight tan θ
many things they cannot do. The nonlinear transform is then…
For instance, a square might get
x' = x k / (k + y)
changed into any other square of any y' = y k / (k + y)
size at any angle. Or to a rectangle, a
parallelogram, into a line, or perhaps Figure 2 – The "starwars" nonlinear graphics transform.

Circuit Cellar INK Issue #61 September 1995 49


with t. Look down through the top to
see how x varies with t.
Cubic splines can draw most any
straight line, lots of graceful curves,
and certain restricted curves having
single loops, single cusps, or a single
inflection point in them. For fancier
curves, any number of cubic splines
can get linked end to end.
Let xo, y o, and zo be the distances from the observer to the 0,0,0 A cubic spline needs a mere eight
perspective origin. x is left-right; y is in-out; and z is up-down. data points. Two of these will be the
The basic 2-point perspective transform is… already known x0,y0 initial position
x' = yo (x - xo ) / (y + yo ) information. A second pair at x1,y1
y' = yo (z - zo ) / (y + yo ) defines the location of a magic point
called the first influence point. Your
Figure 3 – The "architect" nonlinear graphics transform. third pair x2,y2 defines the location
are after. Working pel by pel may in The second primitive appends a of the second influence point. And a
fact be the only way to go when you line to your existing path. This will final pair sets an x3,y3 endpoint.
are rectifying aerial photographs. assume a previous pairing of initial Those endpoints of a cubic spline
Or are stuck with bitmap data. location values and accepts a newer will obviously set where the curve is
Obviously, taking each point in a pair of x and y end points. Note the to start or finish. The first influence
high resolution image and then doing efficiency here. Only four values are point sets both the direction and the
fancy calculations on all those points needed to specify a line which might enthusiasm with which the curve is
is computationally expensive. What end up thousands of pels in its total to launch itself away from its initial
you try to do instead is work with a length. Call this a lineto. point. Two alternate names for the
sparse data set which needs far fewer The third primitive tries to draw enthusiasm are a tension or maybe a
nonlinear transforms. a smooth curve. While many routes velocity. The second influence point
Graphical primitives do offer one exist, the use of cubic splines might forces the direction and enthusiasm
route towards sparse data sets. These end up a very good choice. Certain with which the curve is to enter into
are simply operators which cause an cubic splines are also known as its final point. Influence points are
image path to get built up. Ideally, Bezier Curves. A cubic spline is just usually well off the actual curve.
these operators will demand rather a pair of x(t) and y(t) polynomonials. We can call a graphics primitive
little in the way of input data. They t is a parameter which precisely that uses two previous and six new
then apply algorithms to generate far changes from zero to one along the data values a curveto.
more detailed results. length of your generated curve. You A final primitive can convey the
A mere four graphical primitives can think of t as time. You can also optional information needed to close
is all you need for image buildups. visualize a cubic spline as a certain the path back upon itself. Such info
The first is a simple positioner. three dimensional "snake" boxed into might be needed to make sure that
Given a pair of x and y values, this xyt space. Look into the end of your each "joint" in the path gets treated
moves you to that new location. In box, and you see the x-y spline curve equally. The path closure can create
deference to PostScript, we will call in two dimensions. Look into the sparse data at its best. Zero new data
this positioner a moveto. box side and you’ll see how y varies values are needed for a closure! We’ll
call this a closepath.
Once you apply your four graphic
primitives to define a path, you can
build the path by a suitable stroking,
filling, shading, painting, tiling, or a
clipping. You can also have hundreds
of high level graphical operators. But
all of these should internally reduce
themselves to your four absolutely
Define a tilt constant k based on the can diameter D and a tilt
angle θ. A tilt angle of 15 degrees is shown above … positioned moveto, lineto, curveto,
k = (D/2) sin θ
or closepath primitives.
To do a nonlinear transformation
The transform is then…
with graphics primitives, you simply
x' = (D/2) sin (114.591 x / D)
y' = y - k cos (114.591 x / D)
redefine your primitives to intercept
and then transform your needed data
Figure 4 – The "tunacan" nonlinear graphics transform. values. The new primitives might be

50 Issue #61 September 1995 Circuit Cellar INK


definied as mt, li, ct, and cp.
An mt starts with two values,
nonlinearly transforms them, and
calls moveto. An li takes two data
values, nonlinearly transforms them,
and calls lineto. A ct accepts six new
data values, nonlinearly transforms
these values, and then calls your
stock curveto primitive.
Nonlinearly transformed sparse
data may or may not end up totally
accurate everywhere. In general, if
your nonlinear transformation maps
a straight line into any other straight
For a longitude x and a latitude y in degrees and a unit
line, sparse data will be accurate. radius sphere…
On the other hand, when your nlt x' = sin(x) cos (y)
maps a straight line into some newer y' = sin(y)
curved line, your sparse data could
Figure 5 – The "spherical" nonlinear graphics transform.
miss badly along the middle.
Let’s look at two simple and very slanted. Instead, a special two-point a pair of new ones, some redundancy
useful nonlinear transforms that end perspective is applied. In which all of and ambiguity will be inherent in
up accurate everywhere… the z axis lines remain vertical, but x any perspective transformation.
and y values should proportionally There is one refinement you can
STARWARS diminish out towards a pair of left or add that makes your transform faster
Surely one of the most popular right vanishing points. and more convenient. You create a
image distortions is the old Starwars Figure three shows an example. local transform that maps any "flat"
effect shown in figure two. You can Once again, our transform ends up plane into a designated "card" that is
view this as drawing on a panel and surprisingly simple… pre-positioned in perspective space.
then tilting the panel down. For instance, a roof full of shingles is
x' = yo (x - xo )/(y + yo )
You start by defining a tilt angle first drawn. The entire roof will then
y' = yo (z - zo )/(y + yo )
θ such that zero degrees will end up get picked up and rotated.
"lying down" and ninety degrees is Those xo, yo, and zo values are the Like building up a model railroad
"sitting up". You then find a constant distance from observer to the 0,0,0 structure out of card stock parts.
k called the tilt factor… perspective origin. The basic nlt will If you study the perspective math
work point by point, transforming enough, one profound simplification
k = fullheight tan θ
3-D points into 2-D ones. Since you pops out. Most perspective mapping
Your starwars transform is … are now collapsing three values into can be done by a linear transform!

x' = xk/(k + y)
y' = yk/(k + y)

Note that your zero x axis routes


on down the center as shown. Offset
values can get added to pick up an x
"slant left" or "slant right".
All your lettering and typography
could get handled in the same way as
lines or curves. Each letter is broken
up into the moveto, lineto, curveto,
and closepath primitives and is then Precalculate y0, the vertical distance from the bottom of the
translated accordingly. Typography cup to the 0,0 or the "point of conic" origin…

based on sparse path descriptions is y0 = (height)(bottom) / (top - bottom)


very much preferable to bitmapped Find a current transformation angle θ …
characters on all counts. θ = 57.2958 x /(y + y 0)
Then nonlinearly transform…
ARCHITECTURAL PERSPECTIVE x' = (y + y0) sin θ
Architects do not often use true y' = (y + y0 ) cos θ
perspective, because buildings appear
"wrong" if their vertical lines end up Figure 6 – The "rootbeer" nonlinear graphics transform.

Circuit Cellar INK Issue #61 September 1995 51


for many other nlt mappings.
In your tunacan, only a perfectly
vertical line will end up as a straight
line. Horizontal or slanted lines are
supposed to go around the can, not
through it! If you throw any old art
at your tunacan nlt, objectionable
corner cutting will happen.
A corner cutting results because
we are trying to use sparse data. We
spec only four lineto end points and
Use successive approximation to find a t 0 + ∆t value for your x only eight curveto control points. All
along the path. Then find your current on-path position… the intermediate points are catch-as-
xpath = At 3 + Bt 2 + Ct + D catch-can. Since your computational
ypath = Et 3 + Ft 2 + Gt + H
penalties for not using sparse data
Next, find a the angle for the vector normal to the path…
are so severe, we’ll usually want to
θ = 90 + arctan ((3Et 2 + 2Ft + G ) / (3At 2 + 2Bt + C)) find tolerable workarounds instead of
Finally, your nonlinear transform is… remapping each and every point.
x' = xpath + y(cos θ) Other nonlinear transformations
y' = ypath + y(sin θ) may create corner cutting problems.
These problems will occur any time
Figure 7 – The "glyphpath" nonlinear graphics transform.
a straight line ends up as curved on
The only nonlinear parts will divide your final mapping.
k = (D/2) sin θ
by two identical (1 + y/yo ) factors. There are several tricks to avoid
As a general rule, you want to do The tunacan transform is… any corner cutting. Yes, these can be
as much with a linear transform as easily automated to handle typical
x' = (D/2) sin (114.591 x/ D)
possible, and only what is genuinely input art. On the other hand, each
y' = y - k cos (114.591 x/ D)
neccessary with your nlt. corner cutting avoidance trick will
While the tunacan transform can cost you in computing time and may
TUNACAN be used in an isometric drawing, the increase your file length. In general,
The tunacan nonlinear transform use of a more shallow tilt angle often you’ll want to use minimum repairs
of figure four is especially useful for gives you more pleasing results. consistent with an acceptable final
grocery store ads or paint cans. What image. If any cut corner is small and
you do is "paste" a flat label onto an DON’T CUT CORNERS! doesn’t "look too bad", then you will
isometric or other tilted cylinder. With the starwars or perspective probably want to use it as is.
Define a tilt constant k based on nlt’s, all straight lines still end up as There is no corner cutting with
diameter D and tilt angle θ… straight lines. This is also often true moveto. Position is position.
The worst corner cutting often
will be the closepath primitive. If
you use closepath to complete, say,
the fourth side of a large square, you
might get severe corner cutting.
There are two ways to deal with
closepath corner cutting. You can
create your original artwork in such
a way that closepath never extends
over a significant distance. Or you
can intercept all input closepaths
and replace them with a new lineto
Reduce the path to short line segments of acceptable accuracy.
Subdivide each line segment to n resolvable steps. For each step, followed by a closepath.
calculate a rattiness factor… Otherwise known as the "Now it
newrat = (oldrat + random bipolar offset) (homing instinct) ain’t muh problem" ploy.
and then plot a short line segment offset normally by the new Short lineto primitives will often
ratticity value. give you acceptable results. Medium
The homing instinct is typically slightly less than unity to minimize ones might need some repairs, while
long term wanderings. This acts as a "high pass" filter. long ones definitely need mods.
Your first defense against lineto
Figure 8 – The "scribble" nonlinear graphics transform. corner cutting is to replace a lineto

52 Issue #61 September 1995 Circuit Cellar INK


with a single curveto. A spline that closepath operators.
For "bottom" or "top" you can use
has its first influence point one-third Your final compiled code can be
radius, circumference, or a diameter.
along its straight line path, and the linearly transformed for changes in
So long as you are consistent. Next,
second influence point two-thirds of size, rotation, or repetition. Or might
find a current angle θ …
the way along its path. get exported elsewhere. Any need to
Giving you a smooth curve that tow along custom or oddball fonts is θ = 57.2958 x/(y + y0)
at least starts off and ends up going eliminated when all of your fonts are
Which is just a cleverly disguised
in the correct directions. replaced by equivalent nlt paths.
plain old s = r θ arc in degrees.
But the replacement spline still
Finally…
may miss in the middle. Possibly by SPHERICAL MAPPINGS
bunches. Your way around this is to Figure five shows you a spherical x' = (y + y0) sin θ
first split a lineto into a grouping of nlt. Use this one to paint any image y' = (y + y0) cos θ
sequential lineto primitives aligned onto a globe. For world maps, fisheye
One gotcha: That y0 value to the
end to end. Then you convert each of effects, volleyballs, or balloons.
origin could end up as a rather large
these shorter lineto primitives into a It is probably most convenient to
number. Thus, your origin might end
"one-third, two-third" cubic spline. use latitude and longitude, having 90
up well off your page.
As few as four of the subsplines degrees west longitude define the left
should minimize the worst corner circle side, 90 degrees east longitude
GLYPHS ALONG A PATH
cutting. For a larger mapping, more set the right side, a 90 degrees north
Border artwork needs methods to
subsplines are better. Penalties do latitude being the top, and 90 degrees
cleanly handle corners and closures.
include higher computation times south ending up at the bottom.
As the border elements go round any
and much longer file lengths. In We’ll use the convention of north
curve, the individual glyphs should
general, for a given nlt which has and east defined positive and south
compress on the inside of the curve
potential corner cutting problems, and west being negative. We’ll also
and stretch on the outside.
you will set up an error tolerance assume that we will clip or truncate
The glyphpath transform appears
that depends on the length and the any larger values that would end up
in figure seven. Besides lots of fancy
direction of the lineto in use. on the "back side" of our sphere.
borders, this one can be used for rope
Long curveto primitives can also Here’s the spherical nlt…
effects (including knots and even for
cut corners. But these usually should
x' = sin(longitude) cos(latitude) rope signatures), for model railroad
not be nearly as objectionable as the
y' = sin(latitude) layouts, chains, cords, braiding, and
lineto or closepath hassles. If needed,
paths on board games.
a long curveto could be split up into That’s for a sphere of unit radius,
Your nonlinearly transformed x
several smaller splines. The simplest given inputs in degrees. Such results
values go along the underlying path,
way to handle this is to replace your can be easily scaled. Major defenses
while your y values sit normal to the
long curveto with several sequential against corner cutting will certainly
path. Thus, the x values should walk
lineto approximations. Then, you’ll be needed, replacing any long lineto
along the path with you. The y
replace all the shorter linetos with primitives with shorter end-to-end
values will always be at your side,
"one-third, two-third" splines. curveto primitives.
having positive y on your left and
To recap, some of the nonlinear
negative y on your right.
transforms might map straight lines THE ROOTBEER TRANSFORM
We’ll assume that your original
into curved ones. To avoid a corner On your next soda break, take a
path is a single cubic spline. Longer
cutting at plot time, pick only very close look at the paper cup. Observe
paths can use multiple splines.
short closepath primitives, and then how their artwork has to get "fatter"
Each position on any cubic spline
replace your lineto primitives with as the diameter increases. Take the
has an underlying value t associated
one or more curveto primitives. In cup apart and flatten it out. Note the
with it. Your t value will range from
extreme cases, any long curveto may truncated conical shape.
zero to one along the spline. Sadly, t
also have to be subdivided. The rootbeer transform of figure
is not linearly proportional to spline
six can be used to design paper drink
position. t values tend to run "faster"
COMPILING FOR SPEED cups and megaphones. Your x values
along the "more bent" portions of the
Note that extensive calculations will map tangentally along an arc set
curve. A successive approximation is
and any corner cutting routines need by the current diameter. y values
used to find an initial t value for the
only be done once at image creation plot radially along the vertical line
origin of your current glyph. The big
time. You can easily apply compiling set by the present angular position.
assumption is made that t is nearly
techniques to save only the results of The transform first finds y0, the
linear with the length inside of any
your nonlinear transformations for a vertical distance from the bottom of
given glyph. Thus, all your glyph x
later reuse. The compiled or distilled the cup to your origin point…
values are scaled to an initial t plus a
code will simply be a bunch of fast
y0 = (height)(bottom)/(top - bottom) fraction ∆t proportional to glyph
running moveto, lineto, curveto, and

Circuit Cellar INK Issue #61 September 1995 53


width. A linear delta is assumed. A random bipolar offset is gotten
Fortunately, you only have to do by centering and adjusting a random
a successive approximation once for number. For instance, values in the
each glyph position. range of -3.45 to +3.45 might end up
To do the transform, you’ll first suitable. The scale factors selected
find the t value that corresponds to set the violence of the variations.
your x. Then you’ll calculate your One problem with random walks
current on-path position… is that they might end up wandering
further and further astray from their
x path = At3 + Bt2 + Ct + D
intended path. As time goes on. The
ypath = Et3 + Ft2 + Gt + H
solution is to add a homing instinct
Values A-H above are related to that multiples the accumulated error
the spline control points. You next by some value slightly less than one.
find the slope of your curve and the This gives you a software high pass
angle of a normal slope vector… filter. One that stomps on long term
variations, while freely passing the
θ = 90 + tan-1 ((3Et2 +2Ft+ G)/
desired shorter ones.
(3At2 +2Bt+ C))
Still, the scribble transform can’t
The glyph transform is… guarantee you a total path closure. If
a path must close, select a different
x’ = x path + y(cosθ)
random seed. Until you get one that
y’ = ypath + y(sinθ)
gives a tight enough closure.
Your glyphpath transform works
best with "fairly narrow" glyphs. If FOR MORE INFORMATION…
you venture too far away from your The nonlinear graphic transforms
underlying path, a glyph could turn I have just shown you can be done in
itself "inside out" on any sharp turns. nearly any language on virtually any
With often horrible results. Do strive platform. Naturally, I have found the
for a balance between glyph sizes and PostScript general purpose computer
how tightly they have to turn. language to be a quite fast, powerful,
To get fancy, you could alternate fun, and friendly tool for exploring
glyphs along your path. Which is one all graphical transforms.
way to do multicolor braiding. In particular, you can zero in on
the transforms themselves and their
THE SCRIBBLE TRANSFORM visual results. Once again, several
One big complaint of computer files have been posted to the Circuit
art is that it looks as if a computer Cellar BBS and to GEnie PSRT that
did it. There is often some need to give detailed nlg utilities. Including
introduce randomness and variation lots more cubic spline info.
into an image. The scribble nlt of To pick up ten free trial hours of
figure eight replaces solid lines with GEnie access, have your modem dial
"fuzzy" lines. You can set your fuzz (800) 638-8369. On the prompt, enter
factor from a slight hint of rattiness JOINGENIE. When you are asked for
to a drunken wandering. a keyword, enter DMD524.
To apply your scribble transform, Let’s hear from you.
you first reduce all elements in your
path to short line segments of usable Microcomputer pioneer and guru
accuracy. You’ll then subdivide each Don Lancaster is the author of 33
line segment into n resolvable steps. books and countless articles. Don
For each step, you’ll calculate your offers a no-charge technical helpline
current rattiness factor… you’ll find at (520) 428-4073, besides
offering all his own books, reprints,
newrat = (oldrat + random bipolar
and various services. Don has a free
offset)(homing instinct)
new catalog crammed full of all his
Next, plot a short line segment latest insider secrets waiting for you.
from your last value to a new point Your best calling times are from 8-5
offset normally from the "true" line weekdays, MST. Internet email:
by your new ratticity value. SYNERGETICS@GENIE.GEIS.COM

54 Issue #61 September 1995 Circuit Cellar INK