Progress to Date

I had been worrying myself as to how I was going to include examples of animations in Chunk but I think I may have been worrying unnecessarily. Looking again at Darrel's instructions, it looks as though I need to provide links to examples of animations rather than animations themselves. That should make life a lot easier. As for the Chunk, the latest version is as shown below.


Introduction

The previous chapter, Chapter 21, described the concept of a coordinating system and the use of pixels for the production of digital images. In this chapter we explain firstly, how the pixel-based approach to digital imaging is used to produce the so-called Raster graphics, and how Raster graphics differ from the other type of digital imagery known as Vector graphics. Secondly, the chapter explains how the techniques of computer imaging are further extended to achieve that more exotic type of computer graphic, - animation.

Raster Graphics

In Raster graphics, an image may be conceptualised as a grid of pixels. which coalesce together to form a smooth, continuous image.

Imagine each pixel as a single light bulb which is capable of acquiring individually, a wide range of different colours by virtue of being controlled by some clever software or some clever programmable graphics card, to which all the bulbs in the matrix are connected. If this grid of bulbs were set up to display, say, concentric red, white and blue circles on a white background, then close up, an observer may only notice different coloured light bulbs without discerning any pattern within them such as concentric circles. However, if the observer were to stand a hundred metres away, to his naked eye the bulbs will have coalesced into a smooth display of different coloured circles on a white background and he will scarcely be aware that the image that he is seeing consists in fact of a grid of individual light bulbs. A Raster image formed using a matrix of pixels works in much the same way to display an image on the computer screen (or monitor).

The term "Raster" is by no means an innovation of computer graphics. It has in the past been used widely, in the context of the television imaging technique known as "raster scanning" which forms the basis of television pictures. (for the benefit of those interested in the etymology of the word, the term "Raster" is said to have been derived from a Latin root meaning "Rake").

Raster graphics are typically used for photographic images, or images of drawings and paintings in which there is a large variation of colour and contrast. Since, as explained above, the creation of Raster graphics involves the breaking down of an image into large numbers of minute pixels, it follows that a Raster graphic file is required to hold a large amount of data, such as colour, tone and position, for each individual pixel within the image. Raster graphic files therefore tend to be very large in size and consequently, data compression has become an important factor in the file formats that are prescribed for Raster graphics, such as JEPG, PNG, BMP, TIFF and GIFF.

Quality of a Raster Image - "dots per inch" and "lines per inch"

Whilst the pixel-grid described above forms the basis of a Raster graphic, its quality is determined chiefly by two measures of pixel density. These are the "Dots per Inch" (dpi) and "Lines per Inch" (lpi).

dpi

The dpi measure refers to the number of pixels (a dot being synonymous with a pixel in this context) contained in each inch of the computer screen that displays the image (usually the computer monitor). It should be appreciated that in modern computers, the display screen is not pre-designed with a fixed number of pixels or dots per inch. The dpi value can be changed dynamically using the computer's software. Some Windows XP laptops, for example, provide an option of using either 96 dpi or 120 dpi. As may be expected, the higher the dpi value, the higher the resolution of the image and correspondingly greater its quality.

lpi

The lpi measure pertains to the quality of the printed image of a Raster graphic rather than its screen display. As with dpi, the higher the lpi value (or lpi "frequency" as it is often referred to) the better the quality of the printed image. There is however, a relationship between dpi and lpi that needs to be taken into account for high quality printing of Raster graphics. The formal mathematical expression for this relationship need not concern us here but as a general rule, for best results, the dpi value of the on-screen image should be set to be twice that of the printer's lpi frequency. Thus if the printer is operating at 200 lpi, the dpi value should be set at 400 dpi.

Raster Graphic File Formats

There is a large variety of file formats used for the storage of bit data pertaining to a Raster graphic. The more commonly used file formats include, JPEG, PNG, BMP, TIFF and GIF. All of these formats have their own special features that make each of them more suitable for some functions than others. The TIFF format, for example, is more suited for printing of Raster graphics, while JEPG is considered more appropriate for Web operations involving “continuous tone” Raster graphics. Being Raster graphics file formats, all of these are concerned with the handling of "bitmap" data (bitmap being an alternative term for a pixel-grid). However, they vary in the their file structures and the techniques that they use for organising pixel data within their file structures. The TIFF format, for example, uses tags to locate image data, whereas BMP employs indexing. All use varying levels of data compression to achieve file size reduction. Some of these formats, the JEPG, the BMP and the TIFF, are briefly described below.

JEPG

JPEG is an acronym for Joint Photographic Experts Group, a committee that produced the standard in 1992. Given its ancestry with the Joint Photographic Experts Group, it is not surprising that the JPEG format is widely used for photographic images. Raster graphic files created using the JPEG standard typically have the file extension ".jpg", although ".jepg" is also encountered. The main differentiator of the JEPG format, from the others mentioned above, lies in the technique that it uses to achieve data compression. JPEG format holds the bit information pertaining to an image in a highly compressed mode making the image file very compact and thereby improving immensely its file transfer speed. The latter is particularly significant for downloading and uploading image data to the Internet, where the bandwidth, particularly for home computers, tends to be limited (despite the advent of Broadband). The drawback of JPEG format’s high compression is that it is prone to loosing data in decompression, which in turn leads to the loss of some quality in the image that is subsequently displayed. (In computer graphics jargon, JEPG data compression is said to be "lossy"). Because of its tendency to loose bit data through compression, JEPG is not considered suitable for drawings such as maps where colours are sharply contrasted.

BMP

The BMP format (short for Bitmap) originated with Microsoft Windows but is also used by many image processing applications that are not native to the Windows operating system. The distinguishing characteristic of the BMP format has been its use of indexing for recording the colour value of the pixels, - rather than recording these values individually for each pixel. The drawback of the format however, has been its relatively inefficient compression technique, - although this can be compensated for by using the well-known ZIP data-compression facility to reduce file size.

TIFF

The Tiff (Tagged Image File Format) format is designed to be used primarily with the printing of Raster images. It first emerged as a Desktop Publishing standard and has since come under the control of Adobe Systems. Its chief notable feature is its use of “tags” to point to pixel and other image data held within the file. The tagging of image data facilitates buffering and permits easier retrieval of image data, which in turn helps achieve faster printing speeds. TIFF offers the so-called LZW (Lempel Ziv Welch) compression which, unlike the JEPG standard a "lossless" form of data compression


Examples of Raster images






Vector Graphics

Whereas in Raster graphics an image is implemented as a matrix of pixels, in Vector graphics, the image is described by a set of mathematical expressions that plot the points (or nodes), the lines and the curves that form the shape of the image, using Cartesian co-ordinates. The shape of the image thus produced, is then filled (rendered) with the required pixel detail at run time to produce the completed image.

To illustrate the difference between Raster and a Vector graphics, consider the Raster image referred to above. This image consists of three concentric red, white and blue circles on a white rectangular background. When rendering this image as a Raster graphic, the computer file that describes this image is required essentially to hold pixel data for every individual pixel that forms the pixel-grid (bitmap) for the image. This approach contrasts with that used for Vector graphics. If the same image were to be rendered as a Vector graphic, then the computer file for the image would essentially contain information about the nodes that form the four corners of the rectangle, the node that forms the centre of the concentric circles, together with the mathematical equations that plot the four lines of the rectangle, and the three concentric circles.
The mathematical equations would be of the form:

Y = mX + c for the four lines connecting the nodes of the rectangle (where m is slope of the line and c the offset (where the line meets the X-axis))

(X+a)² + (Y+b)² = r² for the three concentric circles (where r is the radius of the circle, and a and b are the co-ordinates for its centre)

Additionally, of course the graphic image file would contain information about the colour attributes of the circles.

Characteristics of Vector Graphics

The use of mathematics for the rendering of images gives Vector graphics some special characteristics that readily distinguish them from their Raster counterparts. These concern principally, the size of the image file and the capability for easy scaling.

Small Image File

Perhaps the most noticeable characteristic of a Vector Graphic, is its typically small image file. Because a vector graphic is rendered using mathematical expressions rather than large amounts of pixel data, Vector graphics tend to be contained within small image files. When, for example, the graphic referred to above (red, white and blue concentric circles on a white rectangular background) is created in MS Powerpoint and saved as a Raster graphic using JPEG file format, the image file created turns out to be 25 kbytes in size. When the same image is saved as a Vector graphic using WMF (Windows Meta File) format, the file size is reduced to 6 kbytes. This of course, is a non-rigorous experiment but its results are nevertheless, illustrative of the file size reductions that are typically achieved in Vector graphics imagery.


Scalability

A further, very useful characteristic of Vector graphics, is their easy scalability. Here too, the use of mathematical expressions, as opposed to bitmap data, facilitates scaling of the image to virtually any required size, since it merely requires the change of appropriate coefficients within the mathematical equations to achieve the desired effect. The ease with which Vector graphics can be increased or decreased in size makes them truly resolution independent, - unlike Raster graphics where enlargement of image is limited, and invariably results in the deterioration of resolution quality. The point about easy scalability also applies to image transformations, which like scaling, can be handled with comparative ease by mathematical operations on image co-ordinates.

Vector Graphic File Formats

Like many of the Raster Graphics formats, Vector graphic formats have been developed by both software vendors and vendor-independent standards bodies. One such vendor-independent body, for example, the World Wide Web Consortium (W3C) has developed the SVG (Scalable Vector Graphics) standard. Others developed by vendors of graphics software, include WMF (Windows Meta File) from Microsoft, AI from Adobe Systems and CDR from CoralDraw. The SVG and the WMF formats are briefly described below.

SVG

As mentioned above the SVG format has been developed as an open standard by the World Wide Web Consortium. The format uses XML (eXtended Markup Language) as the specification language. The standard, in common with other Vector standards, supports a wide range of shapes such as circles, ellipses and curves and is designed moreover to handle Raster type "bitmaps" which can be converted to Vector format and included in the graphic as necessary. The format also provides for image editing functions and supports such features as layer management, including grouping and ordering of graphic components (image objects). Data compression of SVG format image files is usually achieved by the use of the GZIP facility which provides for a "lossless" form of compression. The file extension used with SVG image files is ".svg".

WMF

The WMF format is native to the Windows platform and although proprietary to Microsoft, tends to acquire the attributes of an open standard, - partly because of the ready availability of its specification from Microsoft and partly, no doubt, due the market-dominance of Windows-based products in the market. A well as setting out the file structure of its associated image file, the format defines a set of "WMF objects" and "drawing records" which together make up a graphics image. "WMF objects" describe logical components such as brushes, pens, palettes, regions, and fonts which colour and annotate the image, while "drawing records" refer to the image's constituent shapes such as rectangle, ellipses, and arcs. The WMF format is additionally designed to handle Raster "bitmaps", - in both compressed and uncompressed form. The file extension used with the WMF format is ".wmf".

Animation

Animation may be defined as a rapid sequence of graphics that utilises the human brain's propensity to maintain "persistence of vision", to create the impression of an image in motion. Although the subject of some debate, the term "persistence of vision" refers to the apparent tendency of the human brain to retain momentarily, the memory of an image perceived through the eye.

Consider a series of still images, each of which describes a transitory moment in a sequence that depicts an object in motion. When the brain receives such a series if images in quick succession, the fleeting retention of each individual image by the brain, results in the entire series of images being merged incrementally into one another, thus creating an optical illusion of smooth, continuous motion, - in other words, the appearance of animation.

The rate at which the still images are received by the brain is commonly referred to as the frame rate (a cinematographical term that equates an image to a frame). It is interesting to note that even at a fairly low frame rate, the human brain can experience "persistence of vision" and therefore the optical illusion of an image in motion. This can be readily observed with the so-called flip-book comics, in which flipping over the pages, even at a relatively slow pace, creates the impression of moving pictures. Graphics animation begins at 12 fps (frames per second), and animation software is increasingly achieving fps ratings comparable to those of films and videos, which can be in excess of 30 fps. The Adobe Flash animation suite , for example, can handle fps ratings of 120 with the default set at 12 fps, which tends to be considered the norm for simple graphics animation.

As a general rule, the higher the fps rate, the smoother the animation appears to be. A high fps rate also helps produce smoother animation in slow motion. Consider an animation of one minute's duration showing, for example, a ballerina dancing on a stage. For such an animation to be of good video quality, it may be created at a frame rate of 30 fps, so that the image file would hold a total of 1800 frames. To observe the ballerina dancing in normal motion, the animation would be played back at the same frame rate of 30 fps, and would therefore have the same duration of one minute. However, if this animation were required to be played back in slow motion at a speed that is, say, three times slower, then the 1800 frames in the image file would be played back over an extended period of 3 minutes, achieving a frame rate of 10 fps, at which rate, the ballerina's movements will appear jerky. On the other hand, if the one-minute sequence were originally created at a higher rate of 90 fps, then the same slow-motion replay would achieve a frame rate of 30fps resulting a smoother picture showing the ballerina in fluid, graceful movements.

It should be noted however, that the smoothness of animation movement may also depend on the degree of change between individual frames. As a trivial example, consider a sequence of images that only depicts fog. Clearly, if this sequence were to be animated, a smooth animation would be achieved even at a rate as low as 2 fps, since there is very little change between frames.

Frame and frame rates are of course, animation techniques that have their origins in the manual world of cartoon films. The same is also true of two further techniques that are central to the creation of computer animations, - those of "key-frames", "in-betweens" (also referred to as "tweens") and timelines. When produced manually, cartoon films would typically require a master cartoonist to create the "key-frames" of the animated sequence, with apprentice cartoonists creating the "in-between" frames as required depending upon the timeline (or duration) of the sequence. The advent of computer graphics has allowed this process to be virtually automated. The graphics artist is merely required to create the "key-frames" and specify the timeline for the animation sequence, for the graphics software to then create the required "in-betweens". Graphics software suites currently on the market, also provide graphics programming languages which can be used as highly specialised tools for creating sophisticated, high performance animations.