25. CHAPTER
5 Color Palettes RGB COLOUR
Figure 5.6. Images and their palettes
pots of paint of a particular colour.When we use indexed colour, pixels don’t store a 24-bit colour
value, but instead store a small number that identifies a 24-bit colour from the palette associated
with the image. Just as each painting by numbers outfit includes only those paints that are needed
to colour in one picture, so each palette includes only the 24-bit RGB values for the colours used 16
26. Color Palettes
166 COLOUR
1A 1C 20 21 1F 1E If the palettes were interchanged, the
0D 16 17 1B 22 23 dark blue of the sea would turn maroon,
0A 13 09 15 18 1D and the maroon areas of the flower would
03 10 08 01 00 07 turn blue. The result of exchanging the
05 02 11 0E 04 06
entire colour tables between these two
10 14 0B 0C 12 09
images is shown in Figure 5.8. By swap-
stored values
ping the two tables we have in effect
assigned an arbitrary palette to each
00 99141B
image, which produces a visual incoher-
01 A0191C
02 A23E1A ence more pronounced than you would
03 A51B1C perhaps have expected. This illustrates
04 A51D1C just how important colour values are
05 A65619 in the representation and interpretation
06 A9191C of coloured images. It also shows why
07 A92E1C
it is usually unwise to use an arbitrary
08 AB201C
09 AC111C colour palette, of course.
0A AC191D
displayed pixels
0B AC4C1A If indexed colour is to be used, an
0C AC5219 image file needs to store the colour
0D AD111D table along with the actual image data,
0E AD331C
but the image data itself can be smaller
0F AD401B Colour Lookup Table
etc by a factor of three, since it only needs
8 bits per pixel. For any reasonably
Figure 5.7. Using a colour table sized image there will therefore be a
net saving of space. This saving may be
increased further if the file format allows tables with fewer than 256 entries to be stored with
images that have fewer colours, and uses the minimum number of bits required to index the
17
palette for each colour value.
27. CHAPTER
5 Color Palettes RGB COLOUR 165
CHAPTER
Figure 5.6. Images and their palettes
5 RGB COLOUR 167
pots of paint of a particular colour.When we use indexed colour, pixels don’t store a 24-bit colour
value, but instead storeWhat can be that identifies a the areas offrom the palette associated
a small number done with 24-bit colour
with the image. Just as the image that should be includes onlyin
each painting by numbers outfit displayed those paints that are needed
to colour in one picture, so each palettewhich is not available invalues for the colours used
some colour includes only the 24-bit RGB
in one particular image. When the image is displayed, the colour from the palette corresponding
the reduced palette?
to each single-byte value stored at each pixel, is used as the colour of that pixel. Figure 5.6 shows
two images with different colour characteristics, together with the palettes used when they are
Obviously, any missing colour must be
stored using indexed colour.
replaced by one of those that is in the
The mapping from stored values to colours can be efficiently implemented using a table. Hence,
palette. There are two popular ways
instead of trying to use 8 bits to hold an RGB value, we use it to hold an index into a table with
256 entries, each of which doing full 24-bit RGB colourto replace
of holds a this. The first is value. For example, if a particular pixel
was to be displayed as the colour whose 24-bit RGB value was #A23E1A, instead of storing that
the colour value of each individual
value in the image, wepixel store anthe colour table index of in which it was stored.
could with index identifying the table location
Supposing #A23E1A was held in the third entry of the table, the pixel would hold the offset 2 (see
the colour closest to it. This can have
Figure 5.7). Such an indexed table of colour values is called a colour table.The colours represented
in the colour table make up the image’s palette,notthe colour table itself is Figure 5.8. called a
undesirable effects: so only may the often loosely Exchanging the colour tables
palette too. colours be distorted, but detail may
be lost when two similar colours are
With indexing, a colour value does not identify a colour absolutely, but only relative to a palette.
replaced by the same one, and banding and other visible artefacts may appear where gradations
It may help you to understand what is going on if you consider what would happen if the
of colour are replaced by sharp boundaries. As we noted previously, these effects are collectively 18
43. density is specified in pixels per inch, the physical dimension will be in inches, and so on.)
It follows that if two images seem to be the same physical size on devices with different resolu-
Image Resolution
tions, the images must have different pixel dimensions. Since the pixels on the two devices are of
different sizes, the images will display different amounts of detail. This is illustrated in Figure 4.2.
72 dpi, 198 × 149 px
600 dpi, 1654 × 1240 px
Figure 4.2. Resolution and pixel dimensions
33
46. 108 BITMAPPED IMAGES
Figure 4.3. Scaling pixels
the enlarged image undefined. This emphasizes that, in constructing a scaled-up image, we must
use some interpolation method to compute values for some pixels.
An alternative approach to performing the scaling is to compute the transformed image by finding
a corresponding pixel in the original image for each pixel in the new image. The advantage
36
47. CHAPTER
4 RESOLUTION 109
Figure 4.4. Scaling pixels using a reverse mapping
of course, we combine the reconstruction and resampling into a single operation, because we can
only work with discrete representations.
We know that, for general images which may contain arbitrarily high frequencies because of
sharp edges, the reconstruction cannot be done perfectly.We also know from sampling theory that 37
48. CHAPTER
4 RESOLUTION 111
Figure 4.7. Nearest-neighbour (left), bilinear (middle) and bicubic (right) interpolation
assumed to lie along a Bézier curve connecting the stored pixels, instead of a straight line. These
are used for the same reason they are used for drawing curves: they join together smoothly. As a
result, the resampled image is smooth as well.
38
63. Image Compression
ion i s the
omp ress
Ima ge c data
“
l icatio n of ages.
app digi tal im
ssio n on is to
co mpre obje ctive
n effe ct , the f the
I nda ncy o
d uce redu to be able
re in o rder
ge da ta data in an
ima tran smit
sto re or m....”
to
effi cien t for
45
109. JPEG vs RAW
• Normally, digital cameras save their images in
the JPEG format.
• Automatically adjusts: white-balance and all.
• RAW format is exactly what the camera sees
when it takes the picture; NO adjustments
have been made to the images. BUT, the file is
a lot bigger in size...
73
110. Type of image Min resolution Camera Spec.
Web images 640x480 1 megapixel +
5”x7” 2048x1536 3 megapixels +
8”x10” 2272x1704 4 megapixels +
16”x20” 3072x2048 6 megapixels +
74
111. Editing Raster Images
• Selecting an Area
• Cropping
• Image resizing & canvas size
• Rotating
• Adjusting the balance
75
112. Editing Raster Images
• Sharping the contrast
• Adjusting the resolution
• Saving and exporting
76
114. Vector Graphics ?
• An elegant way of constructing digital images
whose representation is:
• compact
• scalable
• resolution-independent
• easy to edit
78
121. Adobe Illustrator Scaleable Vector
format Graphics format
standard web vector
graphics
82
122. Fundamental
• images are built up using shapes that can easily
be described mathematically
• therefore, reviewing the basic concepts are
needed
83
124. Vectors
FUNDAMENTALS 63
t only to define points, but x2 − x1
ement. For example, to get P
1
move 4 units to the right
er way, −4 units down (the
y2 − y1
P
). So we can specify the 2 −
P
r (4,−4). In general, for any 1
= (x2,y2), the displacement
hich we write as (P2 − P1) P2
values is used to specify a
two-dimensional vector. A Figure 3.3. A vector
a magnitude (length). The
− P2, since moving from P1 to P2 is different from moving in
1. They have the same length but opposite directions.
85
126. VECTOR OBJECTS 67
Vector Objects
program allows you to work with shapes is a reflection
presented in graphics files. For example, in Illustrator you
clicking the mouse or pressure-sensitive pen at each end
ented by the coordinates of its end points. In SVG, which
ram, a line can be represented by a line element, with the
uch as <line x1="300" y1="0" x2="0" y2="300"/>.
rograms provide
(x1, y1)
d in much the
e different ways w = x2 − x1 68 V E C TO R G R A P H I C S
nce, a rectangle
an be drawn by h = y2 − y1
(x1, y1)
own the mouse
dragging to the
ly be completely dra ry = (y2−y1)/2
(x2, y2) g rx = (x2−x1)/2
pposite corners,
and where it is c = (x1+rx, y1+ry)
s a rect element, M x1, y1 H x2 − x1
inates of the top dra
(x2, y2) g
which can easily V y1 − y2
he bottom right
ple in Chapter 2 Figure 3.8. Drawing an ellipse
ed as a sequence Squares and circles are special cases of rectangles and ellipses, respectively, and so do not need any
ure 3.7.) As well V y2 − y1 special representation of their own. It is helpful when drawing to be able to ask the program to
restrict rectangles and ellipses to squares and circles. In Illustrator this is done by holding down
ent in SVG, this H x1 − x2 the shift key while using the rectangle or ellipse tool.
gles in PDF and
necessary values Figure 3.7. Drawing a rectangle Curves
can be deduced Lines, rectangles and ellipses are sufficient for drawing many sorts of technical diagrams (particu-
larly when your lines can be decorated with arrowheads, as they can be in all professional drawing
programs). Less constrained drawing and illustration requires more versatile shapes, which are
supplied by Bézier curves.
appropriate tool and dragging from one point on the
87
127. Curves
CHAPTER
3 V E C TO R O B J E C T S 69
P2 P3
P4
P1
Figure 3.9. A cubic Bézier curve
Bézier curves of degree 3, commonly called “cubic Bézier curves”, are the type most commonly
found in vector graphics. They have just four control points: as always, two are the end points.
The other two, which do not usually lie on the curve itself, are called direction points. The name
indicates the purpose of these points: being on tangents to the curve, they show the direction in
which it sets off from each end point. This is shown in Figure 3.9: P1 and P4 are the end points of
88
128. hics. They have just four control points: as always, two are the end points.
h do not usually lie on the curve itself, are called direction points. The name
of these points: being on tangents to the curve, they show the direction in
Curves
each end point. This is shown in Figure 3.9: P1 and P4 are the end points of
re its direction points, and you can see that the curve is accurately described
s at P1, setting off towards P2, and curving round so that it arrives at P4 from
aying within the quadrilateral convex hull P1P2P3P4 throughout.
ines from each end point to its neigh-
direction
oint determine how wide a sweep the lines
n think of the lengths of these lines as
g
d with which the curve sets off towards
dra
he faster it goes, the further out it will
of the curve is the basis for the way
wn interactively. After selecting the appro-
pen), you click at the first end point and end points
ds the first control point, as if you were
dra
ards it.You will usually see a direction line
g
you have pulled. In most applications, for
explained in the next section, the direc-
Figure 3.10. Drawing a curve with the pen
nds away from the end point both in the tool
d symmetrically in the opposite direction.
89
129. Curves
70 VECTOR GRAPHICS
P2 P3 P2 P3 P2 P3
P4 P4 P4
P1 P1 P1
Figure 3.11. P1, P2, P4, P3 Figure 3.12. P2, P1, P4, P3 Figure 3.13. P3, P1, P4, P2
Once you have the first one right, you click at the point where you want the curve to end, and
drag away from the direction point (see Figure 3.10).You will see the curve being formed as you
move the cursor. If you do not like the result when you have finished, you can subsequently select
any of the control points and drag it around to change the shape and extent of your curve. For
more information on drawing Bézier curves, consult our book Digital Media Tools.
You can construct a cubic Bézier curve using any set of four control points, but the result is not
necessarily going to be useful or lovely. Nor is it always obvious (until you have acquired some
90
130. You can construct a cubic Bézier curve using any
Curves
necessarily going to be useful or lovely. Nor is it
experience using these curves) exactly what the c
to look like. Figures 3.11 to 3.13 show curves pro
in Figure 3.9, but in different orders.
P2 Bézier curves of degr
only use one directio
shown in Figure 3.14
cubic ones so they are
P1 one fewer control po
P3 are preferred in some
to download are wan
Figure 3.14. A quadratic Bézier curve curves – even though
SWF graphics lets yo
tool, these are approximated by quadratic curves
curves are also used in TrueType fonts (see Chapt
91
133. As we noted earlier, som
natural media, such as ch
as ribbons and Celtic d
Strokes Figure 3.19. Dashed effects
line, though, not by app
As well as applying a stroke to a path, you c
only fill a closed path, but most drawing pro
74 VECTOR GRAPHICS
operation implicitly closes the path with a
Combining different line caps with dash patterns provides a range of effects,
The simplest fill is a sing
as shown in Figure 3.19.
fill (or, indeed, a stroke)
Joins at corner points also need consideration, because wide lines can only This applies to a whit
it.
meet cleanly if they do so at 90°; when they meet at any other angle an
Mitre shape on a white backgr
unsightly gap or overlap will result. This can be removed in several ways. The
three styles of line join provided by Illustrator are a mitre – as in a picture if it overlaps any oth
but
frame, the outside edges of the lines are extended to meet at a point; round – a
you must explicitly set i
circular arc is used to produce a rounded corner; and bevel – the segments are
finished off square where they join, and the resulting notch is filled in with
a triangle to produce a flat ended joint. If mitred joins are used on segments
Rounded spikes will result. To avoid Normally, there is no
that meet at a very narrow angle, long projecting
you were using waterc
this, a limit can be specified, and if the ratio of the spike’s length to the stroke
width exceeds it, mitres will be replaced by bevels. Figure 3.20 illustrates the other possibilities, you c
different joining styles.
knock out areas of obje
Bevel
As we noted earlier, some drawing programs can apply strokes that simulate programs have allowed
anything beneath it to
natural media, such as charcoal or painted brush-strokes, or special effects, such
as ribbons and Celtic designs. This is done by stretching an image along the
Figure 3.19. Dashed effects Figure 3.20. Joining styles
line, though, not by applying a stroke to it directly.
sense to consider combi
As well as applying a stroke to a path, you can use it as an outline and fill it. In principle you can
only fill a closed path, but most drawing programsEx Librisyou to fill an open path – the filling
also allow apisake@gmail.com............................
operation implicitly closes the path with a straight line between its end points.
94
134. PTER
3 Fills VECTOR OBJECTS 75
ways, using blending modes – an established technique in bitmapped images, as discussed
er 4. SWF, SVG and PDF all support transparency, with PDF having the most elaborate
or blending modes.
eresting and sometimes more attrac-
ts than those permitted by solid or
sparent colours can be produced by
dient fills and patterns. Figure 3.21
me basic examples of gradient fills.
e of fill is characterized by a gradual
between colours or tones. In the
case – a linear gradient – the colours
end of a region are specified, and a
lend of intermediate colours is gener-
etween.
provides controls to let you specify
iate colours, adjust the midpoint of Figure 3.21. Linear (top) and radial (bottom) gradient fills
ent (where the two colours being
re of equal intensity) and the line along which the gradient varies, to get more compli-
, such as the ones on the right of Figure 3.21. An alternative form of blending, shown
ttom of Figure 3.21, has the colour varying outwards from a centre point to the outside
. This is called a radial gradient. 95
135. Fills
76 VECTOR GRAPHICS
Figure 3.22. Gradient mesh
made using the facilities provided by your drawing program (possibly including the facility to
import bitmaps as objects, as described later).The name embodies the analogy normally employed
for describing how an area is filled with a pattern. Imagine that the artwork is rendered onto a
rectangular ceramic tile, such as you might use in your bathroom. Copies of the tile are arranged 96
138. the y direction by sy, (x,y) must be changed to (sx x, sy y). (Valu
object to shrink in the corresponding direction.) Thus, to do
coordinates must be multiplied by two. However, this has the
Transformation
the object. (For example, if a unit square has its corners at
moves them to (2,4) and (4,2), which are the corners of a squ
is now in the wrong place.) To scale an object in place, the m
suitable, easily computed displacement to restore it to its orig
Rotation about the origin a
y simple to achieve. To rotate a
clockwise direction by an angl
(x cos − y sin , x sin + y cos
trigonometry if you wish).
To reflect it in the x-axis, simp
to (−x,y).
When an object is sheared, it is
x
it upwards, through an angle ,
an angle (see Figure 3.26). Yo
Figure 3.26. Skewed axes
can be achieved by moving (x, y
Applying these operations to all the points of an object will tr
general operations of rotation about an arbitrary point and99re
141. 3D Graphics
84 VECTOR GRAPHICS
Figure 3.28. Different two-dimensional views of a three-dimensional model
3-D graphics – as we call vector graphics based on three-dimensional models – is a complicated
subject, though, requiring tools that are hard to master, and it should be left to specialists most of
the time. Here, we can only outline the main features of 3-D technology, in order to provide an
appreciation of the difficulties it presents and the opportunities it has to offer.
In abstract mathematical terms, generalizing coordinate geometry from two dimensions to three
is straightforward. The x- and y-axes of a two-dimensional coordinate system are perpendicular to 102
144. The simplest path is a straight line. A shape
creates an object with a uniform cross-section
as it travels along a straight line. For example, a
circle creates a cylinder in this way. Figure 3.33
3D Models
shows a slightly more elaborate example. This
process is known as extrusion, since the objects
it produces resemble those that can be made by
industrial processes in which plastic or metal is
forced out through an opening. Extruded text is
one application of 3-D GRAPHICS been
this technique that has 89
so widely used in producing corporate logos as Figure 3.33. Extrusion
to have become a cliché.
-dimensional
ine a volume To produce more elaborate objects, a curved
ong a path. path can be used, and the size of the cross-
section can be altered as it moves along it. If
ine. A shape
the path is a conventional Bézier path, organic
cross-section
shapes can be generated.
or example, a
. Figure 3.33 If the path is a circle, the resulting objects
xample. This exhibit radial symmetry. This special case is
e the objects often called lathing because of the resemblance
n be made by of the resulting objects to traditional turned
artefacts. If a suitable shape is chosen, circular
c or metal is
paths can be used to generate many types of
truded text is
drinking vessel and vase, as well as mechanical
hat has been components and, as Figure 3.34 shows, some
orate logos as Figure 3.33. Extrusionhat.
styles of Figure 3.34. Lathing
The third approach to modelling is procedural modelling. Here, instead of using models that can
cts, a curved be described by equations, and storing only the constants that define a particular instance, we use
objects that are described by an algorithm or procedure. Thus, returning to two dimensions for a
of the cross-
moment, instead of defining a circle by the equation x2+y2 = r2, we could define it by some
s along it. If
procedure such as “draw a curve that maintains a constant distance r from the origin”. In this case, 105
145. 3D Models
90 V E C TO R G R A P H I C S
Figure 3.35. Constructing a well-known fractal curve
tractable structure, algorithms may provide a description where equations cannot.The best known
procedural modelling techniques are based on fractals. These are often described as shapes that
exhibit the same structure at all levels of detail. Figure 3.35 shows a famous example of such a
shape, and its construction.
IN DETAIL 106
146. 3D Models
92 V E C TO R G R A P H I C S
Figure 3.39. Fractal terrain
arbitrarily fine detail with the irregular appearance of natural terrain, as exhibited by the land-
scapes in Figures 3.39 and 3.40.
Rendering
107
147. 3D Rendering
CHAPTER
3 3-D GRAPHICS 93
Figure 3.40. Photo-realistic rendering
Wire frames are often used as preview images in modelling programs. They can also be useful
in computer-aided design systems, since they contain enough information to provide answers to
questions such as “Does the door provide adequate clearance for the piano when it is fully open?”. 108
149. 3D Rendering
94 VECTOR GRAPHICS
Figure 3.42. Wire frame, flat, Gouraud and Phong shading
In order to show the surfaces of objects, it is necessary to determine which of them are visible.The
far sides of objects are considered hidden in perspective views, as are surfaces, or parts of surfaces,
with other objects in front of them. Determining which surfaces are visible, starting only from
110
![Êส‹‹Çว¹น»ปÃรÐะ¡กÍอºบÁมÑัÅลµตÔิÁมÕีàเ´ดÕีÂย
[ÃรÙู»ปÀภÒา¾พ]
2 ¡กÃร¡ก®ฎÒา¤คÁม 2555
1](https://image.slidesharecdn.com/04-imageandgraphicsusethis-120702011749-phpapp02/85/04-image-andgraphics-1-320.jpg)
![ia Systems
520251: Multimed
Êส‹‹Çว¹น»ปÃรÐะ¡กÍอºบÁมÑัÅลµตÔิÁมÕีàเ´ดÕีÂย
[ÃรÙู»ปÀภÒา¾พ]
2 ¡กÃร¡ก®ฎÒา¤คÁม 2555
1](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)