Final Version submitted

I have finally managed to complete Chunk 22 and forward it to Darrel. Hopefully it's OK. I sometimes have this horrible thought that I might have gone off at a tangent and produced something foolish but I may be worrying too much. If anything, the work might be faulted for its length, - it has exceeded the 2500 words limit. It will be interesting to see what Darrel's comments are, - if any.

The final version is set out below.

CHUNK 22
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 the 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 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 origin 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 platform. 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 is a "lossless" form of data compression


Example of a Raster image

Figure-1 below shows a Raster image before and after enlargement. The enlarged version of the image on the right of Figure-1, is beginning to reveal its underlying pixel matrix structure. The marked deterioration in quality evident in the enlarged version, also illustrates one of the key characteristics of a Raster image, - that of fixed resolution. A Raster image is made of a fixed number of pixels, which, unlike Vector graphics discussed below, cannot be scaled up to maintain the same degree of resolution in the enlarged image.







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), together with 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. As explained above, if this image were to be rendered as a Raster graphic, the computer file that described the image would be required essentially to hold pixel data for every individual pixel that forms the pixel-grid (bitmap) for the image. Rendered as Vector graphic however, the corresponding image file would merely contain information about,

- the nodes that form the four corners of the rectangle,
- the node that forms the centre of the concentric circles,
- the mathematical equations that plot the four lines of the rectangle, and
- the mathematical equations that plot the three concentric circles.

The mathematical equations could, for example, 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) (Note that this expression happens to be a special case of the expression for an ellipse)

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, a graphic consisting of, say, red, white and blue concentric circles, is created in MS Powerpoint and saved as a Raster graphic using JPEG file format, the image file created turns out to be 17 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 5 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. (see Figure – 2, image marked A)




Scalability and Transformations

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 these mathematical equations, to achieve the desired effect. This point may also be demonstrated, informally, with the aid of Powerpoint presentation as in Figure – 2 below. In Figure – 2, the Image marked B although scaled up by a factor of 2 from Image A, retains the same filesize as Image A when saved in WMF (Vector) format (i.e. 5 kbytes). The identical filesizes of the two images indicate, as expected, that no additional image data needs to be held in the image file, to facilitate the display of the scaled image. The result is also consistent with the expectation that the mathematical expressions held within the files are the same in both cases, apart from specific coefficients that are changed at run time to achieve the required scaling factor. By contrast, when Image B is saved in JEPG (Raster) format the filesize increases from 17 kbytes to 23 Kbytes to correspond to the bigger pixel grid that defines the scaled up image.

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. As 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 depicting an object in motion. When the brain receives such a series of images in quick succession, the fleeting retention of each individual image by the brain, results in successive images being merged into one another, to create an optical illusion of smooth, continuous motion, - in other words, the appearance of animation

Frame Rate

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 readily be 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 for the animation 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, albeit in slow motion.

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.

Key-Frames, In-betweens and Timelines
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 other techniques that are central to the creation of computer animations, - those of "key-frames", "in-betweens" (also referred to as "tweens") and "timelines". A timeline generally indicates the duration of an animation sequence, although it may also specify the required time interval between two key-frames. A key-frame can be regarded as a frozen image or a snapshot of an animation at a given instant in time. For smaller, simpler animations, key-frames typically define the start image and the end image of an animation sequence. Larger and more sophisticated animations, may well use key-frames at intermediate points within the sequence. In-betweens are simply the frames that occupy the timeline between key-frames.

When produced manually, old-fashioned 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, based upon the timeline (or duration) of the sequence. The advent of computer graphics has allowed this process to be largely automated. The graphics artist is now merely required to create the "key-frames" and specify the timeline for the animation sequence, to allow the graphics software then to create the required "in-betweens".

As an example, consider the trivial case of an animation that shows an arrow that is initially pointing to the right, and which rotates clockwise through 180 degrees to end up pointing to the left. Let us assume for the purposes of this illustration that the time taken for the rotation is ten seconds. For this simple animation, the graphic artist will only be required to create the start and the end key-frames. The start key-frame will show an arrow pointing to the right. Similarly, the end key-frame will show an arrow pointing to the left. The transformation of these two key-frames into an animation sequence will be effected by the animation software, which will produce the necessary in-betweens, based on the duration of the sequence (or the timeline, in animation terminology), and its own default frame-rate for animations (although this can be user-defined). In this instance, since the duration of the sequence is 10 seconds, then at a default frame-rate of, say, 12fps, the software will produce 120 in-betweens, each showing the arrow moving clockwise through 1.5 degrees. The resultant graphics image file will subsequently be played back at 12fps to show a 10 second animation of a rotating arrow.

The automatic creation of in-betweens by the animation software is, of course, facilitated by the use of vector graphics. Vector graphics, being defined as a set of mathematical expressions, are well suited for the type of image transformations that in-betweens require. In the simple example described above, the transformation required for each successive in-between is that of image rotation. Needless to say, other types of transformations such as translation, inversion and scaling are also possible with vector graphics to support the creation of sophisticated animations depicting a variety of shapes and movements.

Common Animation File Formats

File formats that are widely encountered in animation graphics include AVI, MPEG, MOV and SWF. The AVI (Audio-Video Interleaved) file format is a video movie file format that originated with Microsoft. The MPEG file format has been designed by the Moving Picture Experts Group. Initially, when published as MPEG-1, the standard concerned video and audio storage on CDs. The latest revision, MPEG-4, supports video, audio, 2D and 3D graphics, as well as texts and still images. MPEG4 compliant image files generally have the file extension of ".mp4", although application dependent variations exist. The MOV format is a creation of Apple and is designed to be used with their Quicktime product. The SWF (Shock Wave Flash) format is a well-known animation format used by Adobe Flash. The format tends to be widely encountered in web animation, possibly as result of the ready availability of the Flash plug-in with popular browsers such as the Internet Explorer.

Animation Graphics Software Available on the Market

Advances in computer technology such as faster processors and the availability of higher bandwidths for data transfer, have combined to create a growing market for sophisticated animation software. Leading vendors of animation software include Adobe, NewTek, Toon Boon and Apple. The products offered by these vendors are often directed at particular niches within the computer animation market. Thus Adobe Flash CS4 is focused on two dimensional graphics, while NewTek's Lightwave and 3D-Arsenal products are designed to be used with 3-D animation and video integration respectively. A brief description of two animation products, the Adobe Flash CS4 and the NewTek 3D-Arsenal is given below.

Flash CS4
Flash is arguably one of the better known animation suites on the market, not least because the Flash Player happens to be readily available from Adobe as a free download. The latest version of the Flash animation suite is the CS4 Professional. The development tools offered with this version include pre-built animations, a Motion Editor and transformation and rotation tools. The creation of animation in-betweens is simplified by techniques such as automatic generation of motion paths and the use of so-called "motion tweens". The latter feature effectively eliminates the need for manual creation of fixed-frames. Flash also provides a graphics programming language, ActionScript, which can optionally be used as a precision tool for creating more sophisticated, high quality and high performance animations.

3D-Arsenal
3D-Arsenal, as the name indicates, is principally a graphics tool for creating three dimensional animations. However, it is also used as a video editing tool to combine user defined texts and logos with video content and where required, with the tool's own pre-built animation templates, to create high quality video animations. 3D-Arsenal markets itself as a highly customisable tool. The pre-built templates and functions provided by the tool may be modified with ease to meet user requirements or suit artistic taste.

Animation Examples

Computer animations have grown significantly in sophistication and quality since their first appearance as simple moving cartoons. The different types of computer animations that are now routinely encountered, include 2D and 3D cartoons, as well as multimedia, video quality animations. The full range of computer animations now encompasses simple figures in motion, two and three dimensional objects moving in three dimensional space, as well as multi-media animations of video quality. The list of web links below offers a selection of the different types of animations that graphics technologies are currently capable of producing.

(a) http://www.characteranimationin3d.com/movies.htm - The web page at this link shows a series of animations. Some of the animations may be considered as being at the lower end of computer graphics technology. They show simple 2D and 3D animations in motion. However, the series also includes some examples that illustrate the more advanced graphics technology of video animation.

(b) http://www.duboismeetsfugger.com - This link, like the one at (a) above, shows a simple cartoon style animation in 2D with sound. Although a comparatively low-technology graphic, the animation has much artistic merit.

(c) http://www.instinct.ru/flash.html - The animation displayed by this link has used graphics technologies of a more recent vintage. The animation is approaching video quality and the inclusion of sound also makes it “multi-media”.

(d) http://www.cell-action.com/einstein/einstein.html - This graphic is a tutorial on Einstein’s Theory of Relativity. It is a high quality 2D cartoon animation with sound. It is also an interesting presentation on the subject of relativity, albeit at an elementary level.

(e) http://www.cell-action.com/pdr/pdr.html - This is another tutorial from the same graphic artist as the one at (d) above. It is on the rather esoteric subject of “Pleiotropic Drug Resistance”. However, its interest here lies in the high quality of its animation and its multi-media aspect, such as the inclusion of photographic material.

(f) http://www.youtube.com/watch?v=rBQOLiFto6Q&feature=related - This is an educational animation that explains the workings of a human heart. It contains two and three dimensional images, together with a sound commentary.

(g) The link below connects to the Adobe Flash HD Gallery. This is a high definition video showing a surfer in slow motion Although videos historically have followed a separate path of technological development, they like their audio counterpart, have converged to become a part of the multi-media graphics technology that is used to create quality animations.

http://www.adobe.com/products/hdvideo/hdgallery/assets/hdplayer.html?w=848&h=520&vid=http%3A//hdgallery.adobe.com/media/getty656-20_480c.flv&n=Surfing%20in%20Slow%20Motion&f=480p



References

(1) Processing, Creative Coding and Computational Art, Ira Greenberg, 2007, pages 116 – 118.

(2) JEPG File Format - ISO/IEC IS 10918-1 | ITU-T Recommendation T.81, (also JPEG JFIF) Specification in PDF format at “http://www.w3.org/Graphics/JPEG/jfif3.pdf”

(3) BMP File Format - File format description at the links below: http://www.fileformat.info/format/bmp/egff.htm http://www.fileformat.info/format/bmp/spec/e27073c25463436f8a64fa789c886d9c/view.htm

(4) TIFF File Format – TIFF Revision 6.0 from Adobe Systems Inc. Specification in PDF format at “http://partners.adobe.com/public/developer/en/tiff/TIFF6.pdf”

(5) SVG File Format – World Wide Web Consortium (W3C) recommended, Scalable Vector Graphics (SVG) 1.1 Specification, (http://www.w3.org/TR/SVG11/)

(6) WMF File Format – Microsoft Developer Network (MSDN) Windows Metafile Format Specification Revision 4. (http://msdn.microsoft.com/en-us/library/cc215212.aspx)

(7) MPEG File Format - ISO/IEC JTC1/SC29/WG11, Overview of the MPEG-4 Standard, (http://www.chiariglione.org/mpeg/standards/MPEG-4/MPEG-4.htm)

(8) Flash CS4 – Adobe Flash CS4 Professional (http://www.adobe.com/products/flash/)

(9) 3D-Arsenal – NewTek 3D Arsenal (http://www.newtek.com/3DA/)

(10) New Frontiers of Learning, Electronic Edition, Peter Davies, Tim Brailsford, University of Nottingham, April 1994, Section 6.2.2.4, Vector File Formats, Section 6.2.2, Graphics (http://ibis.nott.ac.uk/guidelines/ch62/chap6-2-6.2.2.4.html)

(11) University of Surrey, School of Electronic and Physical Sciences, Kevin Hughes' HyperMedia tutorial, November 1998. (http://info.eps.surrey.ac.uk/FAQ/standards.html)

(12) European Commission Information Provider’s Guide, September 2008, (http://ec.europa.eu/ipg/standards/image/standard_gif_en.htm)

(13) Computer Data Formats, Version 2, 2002, Craig L. Scanlon, Department of Interdisciplinary Studies, University of Medicine and Dentistry, New Jersey, “Graphics”, “Animation and 3-D”. (http://www.umdnj.edu/idsweb/idst3400/graphics.htm)

(14) The Bitmap Standards - BMP, TIFF, GIF and JPEG, Tom Arah, 2005,
http://designer-info.com/Web/bmp_tiff_jpeg_gif.htm

(15) Raster Images versus Vector Images, Jay Busselle, Digital Art Solutions, http://www.signindustry.com/computers/articles/2004-11-30-DASvector_v_raster.php3
(16) Facts About Vector Images, By Sue Chastain, About.com. 2009.
http://graphicssoft.about.com/od/aboutgraphics/a/bitmapvector_2.htm
(17) The Myth Of Persistence Of Vision Revisited, By Joseph and Barbara Anderson, University of Central Arkansas, Center for Cognitive Studies of the Moving Image.
http://www.uca.edu/org/ccsmi/ccsmi/classicwork/myth%20revisited.htm

(18) Persistence of Vision, MediaCollge.com Educational Website, http://www.mediacollege.com/glossary/p/persistence-of-vision.html