Principle Of Color In Multimedia Media Essay

Published Date: 23 Mar 2015

Q1. Explain the principle of color in multimedia. How many dimensions are used in the color? Explain with suitable example.

Color is a sensation produced by the human eye and nervous system. It is related to light, but an understanding of the properties of light is not sufficient to understand color, and is especially not sufficient to understand the art of color reproduction. Overwhelming experimental evidence tells us that the perception of a color is related to the strength of three signals which are transmitted along the optic nerve to the brain. Color is a phenomenon of light caused by how our eyes detect differing qualities of projected or reflected light. Because science and technology has allowed us to understand the physiology of the human eye, to measure wavelengths of light and chart energy patterns, we have come a long way in grasping the complexities of color. The importance of this is that:

It is useful to represent a color by a set of exactly three numbers. In practice, the set of three numbers must be related to some actual color reproduction process. The numbers commonly specify portions of some set of primary colors such as:

Color is the principal way the mind separates elements in space and chooses something to focus on. Thus you should use rich or bright colors like red and yellow sparingly, and generally only for items you really wish to emphasize. Use different colors rather than different shapes to distinguish features on a page. Beware of the negative effects of certain highly contrasting colors placed next to each other (such as green and red), as well as the off-putting optical illusions created, for instance, by a series of parallel lines. If navigational elements have color at all, make sure their hues don't distract viewers from focusing on the main content of the page.

Web design publications often talk about using only "web-safe" or "browser-safe" colors, meaning a limited palette that will show up roughly the same in all browsers and operating systems. But, as the web designer Lynda Weinman has noted, very few computers still display only 256 colors, their capability when the web was young. Indeed, most people view the web in millions of colors now, and so historians just starting on the web may ignore the browser-safe palette and its often garish, overly bright colors chosen for their mathematical simplicity rather than aesthetic value. Those experienced with this palette can continue to use it with no harm, but others shouldn't bother. The possible exception to this rule is if many of your anticipated users will be using very old computers, in which case you should choose something from the web-safe palette for any major swath of color on your page, as well as any colored fonts.

Dimensions of Color

   There are three dimensions to color-hue, value and intensity. This makes color multidimensional-any color appearance can be described in terms of these three dimensions.

1. Hue: 

 Hue refers to the names of the colors. It is the contrast between redness, blueness and greenness. We most typically think of hues as coming from white light divided into the visible spectrum-red, orange, yellow, green, blue and violet or as a "circle of hues" or "color wheel".

Of the three dimensions of color, hue is the simplest to identify. It is that element most often referred to as 'color'. Looking at a rainbow, we can recognize the different dominant hues: red, orange, yellow, green, blue, violet. We also realize that any hue can appear in many variations other than their spectral form. Red, for example, exhibits a broad range of appearance, running from light to dark and weak to strong. Regardless of their appearance in terms of light or dark, weak or strong, they would all belong to the hue family: red. Hues are generally arranged in a circular fashion (hue circuit) or color wheel. Red is the name of a broad color family. The popular term, pink, is a variation of that hue, as is the familiar name, maroon.

2. Value:

Value refers to the lightness or darkness of a color. It is often related to a gray scale where white is the lightest value followed by a series of grays to black, the darkest value. The hues are located somewhere in between the extremes of white and black in value. A color value scale is a hue mixed with white to form tints and with black to form shades of that hue. Red plus white makes pink. Pink is a tint or light value of the hue red. Red plus black makes brown. Brown is a shade or dark value of the hue red.

As an example, 'fire-engine red' would carry a notation of R 5/16 on this variation of a Munsell chart.

When a hue is lighter or darker that its original spectral state, the amount of light it reflects has changed: value is the dimension which refers to the lightness or darkness of a hue. Adding white to red produces a tint; adding black produces a shade. Some examples of red shades: maroon, brown, cordovan, chocolate. A 'pink shade' is an oxymoron. Values are usually displayed in a series of about ten steps, but actually are unlimited. Value steps are displayed vertically, darkest at the bottom.

3. Intensity

Intensity refers to the purity or impurity of a hue. The more pure hue a given color contains, the more intense it is. Opposing terms used to describe this contrast are intense vs. gray, saturated vs. desaturated or bright vs. dull. When a color is too bright and its intensity needs to be reduced, we will often say,"Gray that color." The most typical ways to gray a color are to add gray (black and white) or by adding some of the complementary color. The complement of a hue is the hue opposite it on the color circle. Red and green, orange and blue, and yellow and violet are examples of complementary colors.

4. Chroma

Pure red, as well as light and dark variations all belong to one hue family. When we encounter a weak red, i .e., a red that is neither lighter or darker of a sample hue, we are not dealing with value (light reflectance) but with the dimension of chroma. Synonyms for chroma: strength, purity, saturation, intensity. It is the degree to which a hue departs from full intensity and moves towards a neutral gray. A red rose and a red brick may be of the same hue and value, but the rose exhibits greater purity of saturation. Chroma steps are arranged horizontally, left to right- weakest to strongest.

Each complementary hue at the same value displaying various intensities (chroma)

Q2. How an appearance of an image on a monitor is depend on monitor resolution and monitor size?

Ans.

Imagine lying down in the grass with your nose pressed deep into the thatch. Your field of vision would not be very large, and all you would see are a few big blades of grass, some grains of dirt, and maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get up on your hands and knees, and your field of vision will improve considerably: you'll see a lot more grass. This is a 15-inch 800 x 640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand up and look at the ground. Some monitors can handle higher resolutions such as 1600 x 1200 or even 1920 x 1440-somewhat akin to a view from up in a tree.

Monitors are measured in inches, diagonally from side to side (on the screen). However, there can be a big difference between that measurement and the actual viewable area. A 14-inch monitor only has a 13.2-inch viewable area, a 15-inch sees only 13.8 inches, and a 20-inch will give you 18.8 inches (viewing 85.7% more than a 15-inch screen).

A computer monitor is made of pixels (short for "picture element"). Monitor resolution is measured in pixels, width by height. 640 x 480 resolution means that the screen is 640 pixels wide by 480 tall, an aspect ratio of 4:3. With the exception of one resolution combination (1280 x 1024 uses a ratio of 5:4), all aspect ratios are the same.

Here are some recommended resolutions for the different screen sizes:

 

14"

15"

17"

19"

21"

640x480

BEST

GOOD

TOO BIG

HUGE

TERRIBLE

800x600

GOOD

BEST

GOOD

TOO BIG

HUGE

1024x768

TOO SMALL

GOOD

BEST

GOOD

STILL GOOD

1280x1024

TINY

TOO SMALL

GOOD

BEST

GOOD

1600x1200

TERRIBLE

TINY

TOO SMALL

GOOD

BEST

SCREEN RESOLUTIONS, MONITOR SIZES AND VARIATIONS IN IMAGES SIZE

The dimensions of image on screen will often be very different to the size of the original we are scanning in. The size of the image on screen depends on monitor resolution and monitor size.

Video cards are able to display a particular set number of pixels horizontally and vertically on the screen. For example, the card may display (width and height ) 640 x 480 pixels or 800 x 600 pixels.

Physical dimension of the monitor. A large monitor set to 640 x 480 pixels uses larger pixels than a small monitor with the same setting.

1. Two monitors with the same physical dimension, fixed-size image, but different screen resolutions.

Suppose you have a monitor that displays 800 x 600 pixels and you want your image to take up 1/4 of that screen across and 1/3 down, then: 800/4 x 600/3 = 200 x 200 pixels (Figure 1). However, the same image (200 x 200 pixels) displayed on a monitor of the same size but with different resolution (e.g. 640 x 480), will look much larger as it will take up a larger proportion of the screen (Figure 2).

Figure1:

Screen Resolution 800x 600

Image Size 200 x 200

Figure 2:

Screen Resolution 640 x 480

Image Size 200 x 200

2. Two monitors with the same screen resolution, fixed-size image, but different physical dimensions.

Suppose your image size is 200 x 200 and the screen resolution of both monitors is the same (e.g. they both have a 640 x 480 screen resolution). The monitors are of different physical proportion, (e.g. one is a 21 inch monitor, the other a 15 inch monitor). In this case the image will take up the same proportion of space in both monitors, although the absolute size of the image is different (larger in the larger monitor).

Figure 3:

Monitor Size 21 inch

Screen Resolution 640 x 480

Image size 200 x 200

Figure 4:

Monitor Size 15 inch

Screen Resolution 640 x 480

Image Size 200 x 200

Q3. Discuss the physical and psychological principles as to why animation works, as well as how it is usually presented?

Ans. The 12 basic principles of animation is a set of principles of animation introduced by the Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation. Johnston and Thomas in turn based their book on the work of the leading Disney animators from the 1930s onwards, and their effort to produce more realistic animations. The main purpose of the principles was to produce an illusion of characters adhering to the basic laws of physics, but they also dealt with more abstract issues, such as emotional timing and character appeal.

The 12 principles are as follows:

Squash and stretch

Anticipation

Staging

Straight Ahead Action and Pose to Pose

Follow Through and Overlapping Action

Slow In and Slow Out

Arcs

Secondary Action

Timing

Exaggeration

Solid Drawing (same or different as Weight)

Appeal

1 SQUASH AND STRETCH

The most important principle is "squash and stretch". the purpose of which is to give a sense of weight and flexibility to drawn objects. It can be applied to simple objects, like a bouncing ball, or more complex constructions, like the musculature of a human face. Taken to an extreme point, a figure stretched or squashed to an exaggerated degree can have a comical effect. In realistic animation, however, the most important aspect of this principle is the fact that an object's volume does not change when squashed or stretched. If the length of a ball is stretched vertically, its width (in three dimensions, also its depth) needs to contract correspondingly horizontally.

Illustration of the "squash and stretch"-principle:

Example A shows a ball bouncing with a rigid, non-dynamic movement. In example B the ball is "squashed" at impact, and "stretched" during fall and rebound. The movement also accelerates during the fall, and slows down towards the apex (see "slow in and slow out").

2 ANTICIPATION

This movement prepares the audience for a major action the character is about to perform, such as, starting to run, jump or change expression. A dancer does not just leap off the floor. A backwards motion occurs before the forward action is executed. The backward motion is the anticipation. A comic effect can be done by not using anticipation after a series of gags that used anticipation. Almost all real action has major or minor anticipation such as a pitcher's wind-up or a golfers' back swing. Feature animation is often less broad than short animation unless a scene requires it to develop a characters personality.

Anticipation: A baseball player making a pitch prepares for the action by moving his arm back.

For special effect, anticipation can also be omitted in cases where it is expected. The resulting sense of anticlimax will produce a feeling of surprise in the viewer, and can often add comedy to a scene. This is often referred to as a 'surprise gag'.

3 STAGING

A pose or action should clearly communicate to the audience the attitude, mood, reaction or idea of the character as it relates to the story and continuity of the story line. The effective use of long, medium, or close up shots, as well as camera angles also helps in telling the story. There is a limited amount of time in a film, so each sequence, scene and frame of film must relate to the overall story. Do not confuse the audience with too many actions at once. Use one action clearly stated to get the idea across, unless you are animating a scene that is to depict clutter and confusion. Staging directs the audience's attention to the story or idea being told. Care must be taken in background design so it isn't obscuring the animation or competing with it due to excess detail behind the animation. Background and animation should work together as a pictorial unit in a scene.

4 STRAIGHT AHEAD AND POSE TO POSE ANIMATION

Straight ahead animation starts at the first drawing and works drawing to drawing to the end of a scene. You can lose size, volume, and proportions with this method, but it does have spontaneity and freshness. Fast, wild action scenes are done this way. Pose to Pose is more planned out and charted with key drawings done at intervals throughout the scene. Size, volumes, and proportions are controlled better this way, as is the action. The lead animator will turn charting and keys over to his assistant. An assistant can be better used with this method so that the animator doesn't have to draw every drawing in a scene. An animator can do more scenes this way and concentrate on the planning of the animation. Many scenes use a bit of both methods of animation.

Computer animation removes the problems of proportion related to "straight ahead action" drawing; however, "pose to pose" is still used for computer animation, because of the advantages it brings in composition. The use of computers facilitates this method, as computers can fill in the missing sequences in between poses automatically. It is, however, still important to oversee this process, and apply the other principles discussed.

5 FOLLOW THROUGH AND OVERLAPPING ACTION

When the main body of the character stops all other parts continue to catch up to the main mass of the character, such as arms, long hair, clothing, coat tails or a dress, floppy ears or a long tail (these follow the path of action). Nothing stops all at once. This is follow through. Overlapping action is when the character changes direction while his clothes or hair continues forward. The character is going in a new direction, to be followed, a number of frames later, by his clothes in the new direction. "DRAG," in animation, for example, would be when Goofy starts to run, but his head, ears, upper body, and clothes do not keep up with his legs. In features, this type of action is done more subtly. Example: When Snow White starts to dance, her dress does not begin to move with her immediately but catches up a few frames later. Long hair and animal tail will also be handled in the same manner. Timing becomes critical to the effectiveness of drag and the overlapping action.

6 SLOW-OUT AND SLOW-IN

As action starts, we have more drawings near the starting pose, one or two in the middle, and more drawings near the next pose. Fewer drawings make the action faster and more drawings make the action slower. Slow-ins and slow-outs soften the action, making it more life-like. For a gag action, we may omit some slow-out or slow-ins for shock appeal or the surprise element. This will give more snap to the scene.

The movement of the human body, and most other objects, needs time to accelerate and slow down. For this reason, an animation looks more realistic if it has more frames near the beginning and end of a movement, and fewer in the middle. This principle goes for characters moving between two extreme poses, such as sitting down and standing up, but also for inanimate, moving objects, like the bouncing ball in the above illustration.

7 ARCS

All actions, with few exceptions (such as the animation of a mechanical device), follow an arc or slightly circular path. This is especially true of the human figure and the action of animals. Arcs give animation a more natural action and better flow. Think of natural movements in the terms of a pendulum swinging. All arm movement, head turns and even eye movements are executed on an arcs.

8 SECONDARY ACTION

This action adds to and enriches the main action and adds more dimension to the character animation, supplementing and/or re-enforcing the main action. Example: A character is angrily walking toward another character. The walk is forceful, aggressive, and forward leaning. The leg action is just short of a stomping walk. The secondary action is a few strong gestures of the arms working with the walk. Also, the possibility of dialogue being delivered at the same time with tilts and turns of the head to accentuate the walk and dialogue, but not so much as to distract from the walk action. All of these actions should work together in support of one another. Think of the walk as the primary action and arm swings, head bounce and all other actions of the body as secondary or supporting action.

Secondary action: as the horse runs, its mane and tail follow the movement of the body.

9 TIMING

Expertise in timing comes best with experience and personal experimentation, using the trial and error method in refining technique. The basics are: more drawings between poses slow and smooth the action. Fewer drawings make the action faster and crisper. A variety of slow and fast timing within a scene adds texture and interest to the movement. Most animation is done on twos (one drawing photographed on two frames of film) or on ones (one drawing photographed on each frame of film). Twos are used most of the time, and ones are used during camera moves such as trucks, pans and occasionally for subtle and quick dialogue animation. Also, there is timing in the acting of a character to establish mood, emotion, and reaction to another character or to a situation. Studying movement of actors and performers on stage and in films is useful when animating human or animal characters. This frame by frame examination of film footage will aid you in understanding timing for animation. This is a great way to learn from the others.

10 EXAGGERATION

Exaggeration is not extreme distortion of a drawing or extremely broad, violent action all the time. It¹s like a caricature of facial features, expressions, poses, attitudes and actions. Action traced from live action film can be accurate, but stiff and mechanical. In feature animation, a character must move more broadly to look natural. The same is true of facial expressions, but the action should not be as broad as in a short cartoon style. Exaggeration in a walk or an eye movement or even a head turn will give your film more appeal. Use good taste and common sense to keep from becoming too theatrical and excessively animated

11 SOLID DRAWING

The basic principles of drawing form, weight, volume solidity and the illusion of three dimension apply to animation as it does to academic drawing. The way you draw cartoons, you draw in the classical sense, using pencil sketches and drawings for reproduction of life. You transform these into color and movement giving the characters the illusion of three-and four-dimensional life. Three dimensional is movement in space. The fourth dimension is movement in time.

12 APPEAL

A live performer has charisma. An animated character has appeal. Appealing animation does not mean just being cute and cuddly. All characters have to have appeal whether they are heroic, villainous, comic or cute. Appeal, as you will use it, includes an easy to read design, clear drawing, and personality development that will capture and involve the audience¹s interest. Early cartoons were basically a series of gags strung together on a main theme. Over the years, the artists have learned that to produce a feature there was a need for story continuity, character development and a higher quality of artwork throughout the entire production. Like all forms of storytelling, the feature has to appeal to the mind as well as to the eye.Appeal in a cartoon character corresponds to what would be called charisma in an actor. A character who is appealing is not necessarily sympathetic - villains or monsters can also be appealing - the important thing is that the viewer feels the character is real and interesting. There are several tricks for making a character connect better with the audience; for likable characters a symmetrical or particularly baby-like face tends to be effective.

Q4. What are the different color models? What is the need to use different color models?

Ans. A color model is an abstract mathematical model describing the way colors can be represented as tuples of numbers, typically as three or four values or color components. When this model is associated with a precise description of how the components are to be interpreted (viewing conditions, etc.), the resulting set of colors is called color space. This section describes ways in which human color vision can be modeled.

A color model is a 3D unique representation of a color. There are different color models and the use of one over the other is problem oriented. For instance, the color model RGB is used in hardware applications like PC monitors, cameras and scanners, the CMY color model is used in color printers, and the YIQ model in television broadcast. In color image manipulation the two models widely used are HSI and HSV.

DIFFERENT MODELS ARE AS FOLLOWS:

RGB Model

CMY Model

CMYK Model

HSV Model

HSL Model

1. RGB Color Model

In the RGB color model, we use red, green, and blue as the 3 primary colors. We don't actually specify what wavelengths these primary colors correspond to, so this will be different for different types of output media, e.g., different monitors, film, videotape, slides, etc.

This is an additive model since the phosphors are emitting light. A subtractive model would be one in which the color is the reflected light. We can represent the RGB model by using a unit cube. Each point in the cube (or vector where the other point is the origin) represents a specific color. This model is the best for setting the electron guns for a CRT.

Note that for the "complementary" colors the sum of the values equals white light (1, 1, 1). e.g.

red (1, 0, 0) + cyan (0, 1, 1) = white (1, 1, 1)

green (0, 1, 0) + magenta (1, 0, 1) = white (1, 1, 1)

blue (0, 0, 1) + yellow (1, 1, 0) = white (1, 1, 1)

Media that transmit light (such as television) use additive color mixing with primary colors of red, green, and blue, each of which stimulates one of the three types of the eye's color receptors with as little stimulation as possible of the other two. This is called "RGB" color space. Mixtures of light of these primary colors cover a large part of the human color space and thus produce a large part of human color experiences. This is why color television sets or color computer monitors need only produce mixtures of red, green and blue light.

Each color can be a point in the RGB color model cube. Red, green and blue are known as the primary colors. These colors can be added to produce secondary colors which are:

magenta = red + blue

cyan = green +blue

yellow = red + green

Other possible combinations:

white = blue (primary) + yellow (secondary)

white = green (primary) + magenta (secondary)

white = red (primary) + cyan (secondary)

RGB Color Cube Color Model

2. CMY Color Model

CRTs produce color by emission and uses the RGB model. Printers produce color by reflective light so it is a subtractive process and uses a model based on the colors: Cyan, Magenta, Yellow.

Remember that cyan = green + blue, so light reflected from a cyan pigment has no red component, i.e., the red is absorbed by cyan. Similarly magenta subtracts green and yellow subtracts blue. Printers usually use four colors: cyan, yellow, magenta and black. This is because cyan, yellow, and magenta together produce a dark gray rather than a true black.

It is possible to achieve a large range of colors seen by humans by combining cyan, magenta, and yellow transparent dyes/inks on a white substrate. These are the subtractive primary colors. Often a fourth black is added to improve reproduction of some dark colors. This is called "CMY" or "CMYK" color space.

The cyan ink will reflect all but the red light, the yellow ink will reflect all but the blue light and the magenta ink will reflect all but the green light. This is because cyan light is an equal mixture of green and blue, yellow is an equal mixture of red and green, and magenta light is an equal mixture of red and blue.

3. CMYK color model

Unlike RGB, which is an additive color model, CMYK is a subtractive color model. Typically used in printing, CMYK assumes that the background is white, and thus subtracts the assumed brightness of the white background from four colors: cyan, magenta, yellow, and black (called "key"). Black is used because the combination of the three primary colors (CMY) doesn't produce a fully saturated black.

CMYK can produce the whole spectrum of visible colors thanks to the process of half-toning, whereby each color is assigned a saturation level and miniscule dots of each of the three colors are printed in tiny patterns so that the human eye perceives a certain color.

Like RGB, CMYK is device-dependent. There's no straightforward formula to convert CMYK color to RGB colors or vice versa, so conversion is typically dependent upon color management systems. ColoRotate easily converts one system to the other.

"Still Life with Crystal Bowl,"

4. Hue, Saturation, and Value Color Model

First described by Alvy Ray Smith in 1978, HSV seeks to depict relationships between colors, and improve upon the RGB color model. Standing for hue, saturation, and value, HSV depicts three-dimensional color. If you think about HSV as a wheel of cheese, the center axis goes from white at the top to black at the bottom, with other neutral colors in between. The angle from the axis depicts the hue, the distance from the axis depicts saturation, and the distance along the axis depicts value.

The angle from the axis depicts the hue, the distance from the axis depicts saturation, and the distance along the axis depicts value.

The HSV (Hue, Saturation, and Value) color model is more intuitive than the RGB color model. The user specifies a color (hue) and then adds white or black. There are 3 color parameters: Hue, Saturation, and Value. Changing the saturation parameter corresponds to adding or subtracting white and changing the value parameter corresponds to adding or subtracting black.

5. HSL

Like HSV, HSL was described by Alvy Ray Smith and is a 3D representation of color. HSL stands for hue, saturation, and lightness. The HSL color model has distinct advantages over the HSV model, in that the saturation and lightness components span the entire range of values.

Based on the HSL color model, ColoRotate contains all the hues at different levels of saturation along its horizontal plane and with variant intensity along its vertical plane.

In the bicone or diamond of the HSL structure, all the visible colors can be seen. These are the three dimensions in which our brain analyzes the colors we see. The first dimension is brightness (a vertical slice). The hue is comprised of the second and third dimensions (corresponding to round slices through the diamond).

 HSV and HSL representations:

Need to use different color models:

We also use "color model" to indicate a model or mechanism of color vision for explaining how color signals are processed from visual cones to ganglion cells. For simplicity, we call these models color mechanism models. There are any numbers of approaches to describing colors using a mathematical model; each one qualifies as a color model. You can, for example, assign a specific hue, saturation, and brightness level to define a color (HSB color models); or a value of red, green, and blue (RGB color models); or a value of cyan, magenta, and yellow (CMY color models); or a value of cyan, magenta, yellow, and black (CMYK color models).

Within these general descriptions--HSB, RGB, CMY, CMYK, and more--any model can use any arbitrary number of steps for each parameter. Some schemes, for example, use 100 steps each. Others use 256 steps, a convenient number for the digital world because you can define 256 steps for each color by assigning 8 bits to each color.

All of these color models--and more--are widely used to describe colors, both by software and by various types of hardware like digital cameras, scanners, monitors, and printers. Unfortunately, most of these have historically been device-dependent models -- meaning that the designation for a given color applies only to the particular device. And that makes it hard to move color information between devices without introducing errors.

Two device-dependent models can share the same name, but they won't share the same descriptions for each color except by pure co-incidence. For example, some printers use CMYK color models. (Not all do. A printer can use an RGB color model, and translate the colors to the right amounts of cyan, magenta, yellow, and black ink.)

Suppose you define a color in a drawing program as cyan 120, magenta 75, and yellow 130, and then print on three printers, each of which uses a device-dependent version of a CMY or CMYK color model. You will usually find that the color prints as an obviously different color on each printer. Not only that, but each of the colors will usually be noticeably different from the color on your screen.

The issue is not that any of the printers is doing something wrong; it's just that they each depend on a different color model, despite the fact that all the models share the same name. So the same designation--cyan 120, magenta 75, and yellow 130 in this case--defines a different color for each printer.

The problem gets worse if you need to translate between one kind of device-dependent color model and another. Scanners, for example, use red, green, and blue sensors, and most report colors using an RGB color model. So if you scan an image and open it in a paint program, the image's color information is defined by an RGB model. If you want to print the image on a printer that uses a CMYK model, you have to translate the color information somewhere along the line.

Q5. What advantages does the computer provide over traditional animation practices?

Ans. The term "computer animation" itself broadly covers a wide variety of genres and applications, though the simplest way to break it down is into the categories of 2D and 3D animation. "2D", short for "two-dimensional", is sometimes also called "vector animation", and is typically done in programs like Macromedia Flash and Macromedia Director. The most familiar form of 2D animation can be found just by turning on your TV on a Saturday morning: traditional cartoons, which are progressing more and more into the digital realm. You probably see simpler animations every day just while surfing the web, in the form of advertisements, E-cards, and cartoon shorts. Vector animation is also useful in designing interactive interfaces for the web.

2D animation, true to its name, is rendered in a two-dimensional space. 3D animation, however, is rendered in a virtual three-dimensional space, using polygons captured by various virtual "cameras" to "film" the animation. 3D animation has a variety of applications, from video games to animated films; most commonly, 3D animation is used to render many of the special effects seen in live-action films, removing the need for scale model sets or staged stunts.

For decades, animation has been a trade that rested solely in the hands of the entertainment industry; the process required a great deal of time, manpower, and complex equipment to accomplish. However, with the ever-growing movement to computerize the industry, the animation process has become progressively simpler. What was once done with pencils, cels, and paint by a team of dozens of animators can now be accomplished by a single person with a powerful enough home computer and the right software.

In essence, there is truly little difference between "traditional" animation and computer animation; the primary difference is in the tools used to create these animations, the cost and effort involved in the processes, and the quality of the final output.

Traditional animation is a very hands-on process; 2D animation is accomplished by hand-drawing hundreds upon thousands of individual frames only to transfer them to clear plastic cels, hand-paint them, and then film them in sequence over a painted background image. This requires a team of artists, cleanup artists, painters, directors, background artists, and film/camera crews, along with the storyboard artists and script writers to work out the original concepts; for large-scale projects, the amount of time, labor, and equipment involved can be staggering.

Traditional 3D animation was less "3D" and more still-lifes of claymations done by use of stop-motion filming techniques; the true concept of 3D animation didn't really blossom until the use of computers in animation became more practical. Computer animation removes the need for many of the extra tools required to create an animation; all you need, in general, is a computer with enough system requirements to run the 2D or 3D software application of choice, and people capable of using that software.

Depending on the type of animation desired, sometimes the process can be wholly computerized; in other cases, such as in many 2D "cartoon" animations, the hand-penciling work is still necessary, before it is then scanned to the computer to be colored and sequenced digitally. The process is much less labor-intensive, and generally much cheaper; there is also a greater margin of error, because your digital files can allow you to undo any mistakes up to a certain number of steps.

Q6. Discuss where and how you might use animation in one of the following project? Be creative. How could it best be used to visually illustrate a concept?

a) A web site for sports car enthusiasts

b) A training CD on a printing press.

Ans.

Ans. I would use animation in the website for sports car enthusiasts. And the things which I do in that are as follows:

Planning the Site

Starting with the Title Page

Adding 3D Text

Including a 3D Background

Embedding Navigation Buttons

Adding 3D Images

Spicing Up with 3D Animations

Planning the Site:

To understand this thing, I am going to take an example and suppose the owner name is Bubsy and first of all I have to plan for the Web site and intend to include the following structure:

Home page: with logo and company name and a personal welcome from the owner.

What's New page: presenting the latest vehicles, complete with images

Vehicle Description pages: with break-downs and specifications of each car or machine in the lot

Special Sale pages: showcasing owner's sale of the week

Owner's Favorite Links: providing links to replacement parts pages and other Web resources

Each page should have icons at the bottom of the page that link to the other pages to help you move around owner's site. Now that you have a rough plan, move on to building the site by starting at the title page.

Starting with the Title Page

The title page is usually the first page the visitor sees. It's the first chance you have to show off your 3D wares. For this site, you want to include the company name in 3D text, present a 3D background, add navigation buttons, and include a rendered animation of Bubsy welcoming visitors to the site.

Adding 3D Text

Bubsy doesn't really have a logo. In fact, everywhere the name is mentioned, it looks different, so Bubsy thought it would be a good idea to present his company name as 3D text.

The size of the image needs to be rather large to get all the words in and to make it readable, but you don't want to blank out the background, so use a transparent GIF image:

The text was rendered with trueSpace and saved as a Targa image.

This image was then loaded into Paint Shop Pro, converted to a 256-color image, and saved as a transparent GIF image,

Title page for HYPERLINK "../../../../../Pending/Other/HYPERLINK /"BubsyHYPERLINK "../../../../../Pending/Other/HYPERLINK /"'HYPERLINK "../../../../../Pending/Other/HYPERLINK /"sHYPERLINK "../../../../../Pending/Other/HYPERLINK /" Sports Cars and Heavy Machinery Web site.

CAUTION: You should usually embed your 3D images as JPEG files. JPEG is better at subtle color changes, which are common for 3D images. Notice how the colors in the Bubsy title look kind of splotchy and how the edges are ragged. But if you want transparency, GIF is the only option for now

The image was then centered and placed by using standard HTML tags.

Including a 3D Background

Backgrounds are a two-edged sword. They can effectively hide some ragged edges caused by making 3D images transparent, but when they have too much detail, they can make the text on the page illegible. For the background on the title page, I did the following:

I started with a low-resolution texture image and enhanced it by using Photoshop's Extrude filter.

Then in Photoshop, I increased the brightness of the image by 35 percent. This washed the image out enough that the text is legible, but it still covers the ragged edges somewhat.

I used a standard background image tag to embed the background in my title page shown in Figure 1.2.

HYPERLINK "../../../../../Pending/Other/HYPERLINK /"Title page again, this time with a brightened background.

Embedding Navigation Buttons

Now that the title page is shaping up, you need some links to guide visitors into the site. According to the plan, there should be five buttons that appear on every page in the site.

Starting with a plain red oval in Photoshop, I used the text tool to center the text.

NOTE: I've used Photoshop throughout this example, but I could just as easily have used Paint Shop Pro or any other image-editing software.

I then selected the oval and used the Glass Lens filter from the Kai's Power Tools plug-in to add the 3D look.

I saved the buttons as GIF files. I didn't have to worry about ragged edges since I started with a simple shape. The GIF images were easily embedded into the HTML file, as Figure 1.3 shows.

HYPERLINK "../../../../../Pending/Other/HYPERLINK /"BubsyHYPERLINK "../../../../../Pending/Other/HYPERLINK /"'HYPERLINK "../../../../../Pending/Other/HYPERLINK /"sHYPERLINK "../../../../../Pending/Other/HYPERLINK /" Web site after adding 3D navigation buttons.

Embedding an Introduction Animation

One thing about Bubsy is that he has a large ego. He insisted that he be placed on the home page to personally welcome visitors to his site. However, he won't let anyone take a video of him, so I created a 3D character to do the introduction animation. It's a good thing Bubsy has a cartoon-like face.

Using Martin Hash's 3D Animation, I animated the cartoonish Bubsy and output the animation as a series of Targa images.

I then recorded Bubsy's welcome and loaded the Targa images and the sound file into Director, where I synchronized the two.

After saving the Director file, I compressed it for the Web with the Afterburner utility.

Finally, I embedded the animation as a Shockwave movie using the standard <EMBED> tag.

The note just before the animation lets visitors know where to get the Shockwave plug-in for viewing the animation.

HYPERLINK "../../../../../Pending/Other/HYPERLINK /"The final element on the title page is a personalized welcome from HYPERLINK "../../../../../Pending/Other/HYPERLINK /"BubsyHYPERLINK "../../../../../Pending/Other/HYPERLINK /" himself in a Shockwave movie.

Adding 3D Images

The core of the Web site is where you present your products. Bubsy wanted these split between three different pages: the What's New page, where the latest and greatest can be found, the Vehicle Specification pages, where the bulk of the items will go; and the Special Sales page, where discounted vehicles are highlighted.

Each of these sections has the Bubsy logo and the navigation buttons, but the new element will be the 3D images of the vehicles. Bubsy also earns some revenue by offering his customers custom-paint jobs, so you naturally want to show this to the site visitors.

Start by loading your pre-built models into a 3D package. I used both trueSpace and Ray Dream Studio.

The materials on the vehicle model can be easily changed using the material selector functions. Each image needs to be rendered separately.

Thumbnails can be created by rendering the image again at a smaller resolution or by resizing the final image.

You know how to embed images; keep in mind that they usually look best when surrounded by a border of some kind.

Using thumbnails, you can present many examples without taking up too much bandwidth, as shown in Figure 1.5. The thumbnails all link to larger images.

Spicing Up with 3D Animations

When you go into a showroom to look at cars, you usually wander around the car to view it from all sides. With animations on your site, you can simulate this experience. Rotating a 3D object to create an animation is fairly painless, but embedding it is another story.

There are many ways to embed animations in your Web site; several will be covered here. If you don't like any of these methods, then just wait-new methods are showing up all the time. For the vehicle demonstrations on Bubsy's site, I decided to use Shockwave movies. They work about the same way as Bubsy's introduction animation.

Another way to add small animations is using GIF animations, which were used on Bubsy's Special Sales page:

Create your 3D animation in the usual manner, but make sure the size is fairly small. Output the animation as a series of images.

Load the individual images into a GIF animation tool, such as the GIF Construction Kit, and save the file as a GIF file.

The GIF animation can be embedded just like any other GIF image.

When using GIF animations, it's important to remember not to place too many on one page, not to use large images, and not to use too many frames. Small files like the ones in Figure 1.6 are just about right.

And this all about a website of sports cars enthusiasts, where they can see and find out their choice of car and buy that.