Chapter 2 ■ an IntroduCtIon to Content CreatIon: 2d new MedIa asset FundaMentalsSmoothing Digital Image Composites: Using Anti-aliasing to Smooth
Image Edges
Anti-aliasing is a popular digital image compositing technique, where two adjacent colors in a digital image
that are on an edge between two areas of different color are blended together along that edge. This will serve
to make this edge look smoother (less jagged) when an image is zoomed out. What this does is to “trick” the
viewer’s eye into seeing a smoother edge and gets rid of what has come to be called image jaggies. Anti-
aliasing provides an impressive result by using averaged color values using just a few colored pixels along the
edge that needs to be made smoother. By averaged color values, I mean some color range that is a portion
of the way between the two colors that are coming together along an image’s jagged edge. This takes only a
half-dozen or so intermediate colors. I created an example of this to show you what I’m talking about; see
Figure 2-3.
As you can see, I created what appears to be a razor-sharp red circle on one layer, overlaying a yellow
filling color on a background layer. I zoomed into the red circle shape’s edge and took another screenshot
and placed this to the right of the zoomed-out circle. This reveals a range of yellow-orange through orange to
red-orange anti-aliasing color values, right on the edge that is between the red and yellow colors bordering
each other at the edge of where the circle meets the background.
It is important to note that the JavaFX engine will anti-alias 2D shapes and 3D objects against the
background colors and background imagery, using the Java2D software renderer or the hardware rendered
i3D, using the Prism engine, which can use OpenGL or DirectX. You will still be responsible for correctly
compositing, that is, providing anti-aliasing for your multilayered imagery, by effectively using the alpha
channel, which we learned about earlier in this chapter.
Figure 2-3. A red circle composited on a yellow background (left) and a zoomed-in view (right) showing anti-
aliasing