Monthly Archives: March 2014

Playing with Maya: Rendering Tests

hill_model_test_geo blessyou_backgrounmodelling_lighttest blessyou_backgrounmodelling_lighttest2 blessyou_backgrounmodelling_lighttest4 blessyou_backgrounmodelling_lighttest blessyou_backgrounmodelling_lighttest2

Above are some sample tests of the lighting source that will be used in the animation. Some were unsuccessful as they look like interior lighting rather than exterior. What I am trying to achieve/figure out is how the scenes’ objects will react to the light positions. Where will shadows’ positions within the scene be, and how much light should be used… how much is needed? We want the staging for the scene to look believable, and to explain the scene, and light the characters well within the scene.

These images are not the actual staging, I have been collaborating with another team member who is setting up the staging within the scene.

Actual Stage Set Up Scene

stagelight_scene1

stagelight_scene2 stagelight_scene5

 

Arranging the lighting of the scene by placing the main source of light behind the objects, this gives the scene a better sense of form; side light needs to be rearranged to the same position of the sun. We planned to have the light coming in from stage right. I think I am liking how these shadows and the light source are forming the scene, though, I would like to balance it a little better.

Notes: (info taken from What is Rendering?)

When an artist is working on a 3D scene, the model he manipulates are actually a mathematical representation of points and surfaces (more specifically actually a mathematical representation of points and surfaces (more specifically vertices and polygons) in three-dimensional space.

The term rendering refers to the calculations performed by a 3D software package’s render engine to the scene from mathematical approximation to a finalized 2D image. During the process, the entire scene’s spatial, textural, and lighting information are combined to determine the colour value of each pixel in the flattened image.

Two Types of Rendering

1. Real-Time Rendering: Real-Time Rendering is used most prominently in gaming and interactive graphics, where images must be computed from 3D information at an incredibly rapid pace.

  • Interactivity: Because it is impossible to predict exactly how a player will interact with the game environment, images must be rendered in “real-time” as the action unfolds.
  • Speed Matters: In order for motion to appear fluid, a minimum of 18-20 frames per second must be rendered to the screen. Anything less than this and action will appear choppy.
  • The Methods: Real-Time Rendering is drastically improved by dedicated graphics hardware. (GPUs) Graphic Processing Units, and by pre-compiling as much information a possible. A great deal of a game environment’s lighting information is pre-computed and “baked” directly into the environment’s texture files to improve render speed.

2. Offline or Pre-Rendering: offline rendering is used in situations where speed is less of an issue, with calculations typically performed using multi-core CPUs (Central Processing Units) rather than dedicated graphic hardware.

  • Predictability: Offline rendering is seen most frequently in animation and effects work where visual complexity and Photorealism are held to a much higher standard. Since there is no unpredictability as to what will appear in each frame, large studios have been known to dedicate up to 90 hrs render time to individual frames.
  • Rending Techniques: There are three major computational techniques used for most rendering. Each has its own set of advantages and disadvantages, making all three viable options in certain situations.
  • Scanline (or rasterization): Scanline rendering is used when speed is a necessity, which makes it the technique of choice for real-time rendering and interactive graphics. Instead of rendering an image pixel by pixel, scanline renders compute on a polygon by polygon basis. Scanline techniques used in conjunction with recomputed (baked) lighting can achieve speeds of 60 frames per second or better on a high-end graphics card.
  • Raytracing: In raytracing, for every pixel in the scene, one (or more) ray(s) of light are traced from the camera to the nearest 3D object. The light ray is then passed through a set of number of “bounces”, which can include reflections or refraction depending on the materials in the 3D scene. The colour of each pixel is computed algorithmically based raytracing is capable of greater photorealism than scanline, but is exponentially slower.
  • Radiosity: Unlike raytracing is calculated independent of the camera, and is surface oriented rather than pixel by pixel. The primary function of radiosity is to more accurately simulate surface colouring by accounting for direct illumination (bounced diffuse light). Radiosity is typically characterized by soft graduated shadows and colour onto nearby surfaces.

In practice, raytracings are often used in conjunction with one another, using the advantages of each system to achieve impressive levels of photorealism.

Laugh-O-Gram Films

File:Laugh-o-gram 2010.JPG

Discovering Walt

(Isobouts J,P. 2001. The Magical Life of Walt Disney: Discovering Walt. New York: Roundabout Press, Inc.)

Walt’s First Job

When Walt returned to his family in Chicago, Elias found a job for his son at the O-Zell factory. But Walt informed his father that he didn’t want a factory job; he wanted to become an artist. Elias didn’t approve. He had supported Walt’s art education, but getting a job as an artist sounded like a crazy idea.

Still, Walt had made up his mind. So he left his parents’ home in Chicago and went back to Kansas City. There, he moved in with his brother Herbert, Herbert’s wife, Louise, and their little daughter, Dorothy, in the old Disney house on Bellefontaine Avenue. Roy, who has just been discharged from the navy, joined them as well.

First, Walt tried to get work as an artist for the Kansas City Star, but they wouldn’t even hire him as a truck driver. Big brother Roy came through, though, with the suggestion that he try to get a job at the Pesman- Rubin Commercial Art studio. Pesman-Rubin made advertisements, and Walt was asked to bring in samples of his work. So he showed them some sketches he’d made and was hired on the spot. At Pesman-Rubin, Walt met a quiet young man named Ub Iwerks, who would become very important to Walt as the years rolled on. In the meantime, both Ub and Walt were put to work, making catalogues for farm equipment.

When he got the job, he rushed to tell his aunt Margaret the good news – that he was being paid to draw pictures. Sadly, Aunt Margaret was ill at the time and didn’t get as excited as Walt thought she would.

Shortly before Christmas, business got bad, and Walt and his friend Ub were both laid off. So they decided to go into business together. They called their company Iwerks-Disney, because Disney-Iwerks sounded like a comapny that made glasses. Unfortunately, they couldn’t make enough money to stay in business for very long. So when Walt was offered a job in February 1920 at the Kansas City Film Ad Company for $40 a week (a good salary in those days), they agreed he should take it. Ub joined him there a few weeks later.

UB IWERKS

Kansas City was just the first stop in a long, productive friendship and working relationship between Ub Iwerks and Walt. In 1924, Ub followed Walt to Hollywood, where he became a partner in the Disney Bros. Studios. 

Ub’s strengths were artistic. He was an extraordinary gifted (and speedy) animator. Ub was able to turn out some seven hundred drawings a day. Today, a skilled animator usually produces around one hundred drawings in a week.

In 1930, Ub would take a chance to start his own studio, producing a series called Flip the Frog. Although Ub’s shorts were well animated, he didn’t have Walt’s gift for storytelling and humour. Flip the Frog never became as popular as Walt’s cartoons.

In 1940, Ub would return to the Disney studio. Walt’s old friend eventually became an expert in special effects. Ub won two Academy Awards for his inventions, one of which made it easier for studios to put live actors and animated characters in one scene.

Walt’s First Cartoons

It was at Kansas City Film Ad that Walt was first introduced to animated films – cartoons. They were still very primitive. Walt was told to put small, pinned cutouts of a character on a board, under a film camera. He would move the limbs slightly, shoot a frame, move the limbs again, and so forth. When you ran the film, this would create the illusion of real movement – just like a flip book. Walt had seen animated cartoons made in New York that used a series of drawings – rather than cutouts – each in a slightly different position than the last. To him, these animated drawings were much more lifelike.

To learn more about animation, Walt went to the Kansas City Library and read every book he could find on the subject. He then borrowed a camera from his employer and created a makeshift studio in the garage Elias had built behind the Disney home.

In time, he began to produce real cartoons by drawing a series of characters in different positions. And his characters would perform some of the funny gags Walt remembered from the vaudeville shows he’d seen in high school.

After he’d finished several short cartoons (“shorts”), he showed the reel to the owner of the local Newman Theatre, who ordered a new cartoon for every week. Walt called his shorts “Newman Laugh-O-grams.” Each reel was intended to carry advertisements, but Walt always tried to make them funny.

While Walt was having a great time learning new ways to create cartoons, things were not going so well for Elias. The O-Zell Company went bankrupt. Elias moved back to Kansas City with Flora and Ruth. The Disney house now held eight people. And though it wasn’t a big place, it was a reasonably happy time. Walt enjoyed being surrounded by family.

Within months of Elias’ return in 1921, Roy fell ill with tuberculosis. That disease was very fearsome at the time – and very contagious. So Roy was sent away to a special hospital in Arizona for tuberculosis patients. Then Herbert got notice from the postal service, where he worked, that he and his family were being transferred to Portland, Oregon. Elias and Flora decided to sell the house – so full of family only weeks before – was drained of loving sounds to which Walt had become accustomed.

Walt’s sister, Ruth, remembered that, on the day he took his family to the train for a tearful good-bye, “he couldn’t keep his face straight. He suddenly turned and left. He was upset. He realized, I know, that he was going to be alone then.”

Walt found a room in a rooming house, and he made up his mind to start his own animation company . He raised some $15,000 from investors, quit his job, and on May 23, 1922, founded the Laugh-O-gram Films.

He was only twenty years old. Soon, Ub Iwerks and five  other animators joined him. 

Laugh-O-gram was a fun place to work. Walt and his team felt that they were at the forefront of a new form of entertainment. As his first project, he decided to make series of cartoons based on classic fairy tales. He made a deal with a company called Pictorial Clubs, which promised to distribute the films to theatres. At the same time, Walt also became the Kansas City correspondent for Universal Films, shooting newsreel footage of news events that took place in the area.

Gag photo No. 1

Gag photo No. 2

Swope Park photo No. 2

Roy’s Helping Hand

Unfortunately, Pictorial Clubs went out of business before it could pay Walt for the cartoons he had made, and Walt had nobody to distribute the cartoons he’d completed. Since he had used up his investors’ money to make the cartoons, Walt had nothing left to pay the rent. As he recalled, “I moved into the studio. I slept on a bunch of old canvas and cushions on the chairs. And there was no bath there, so once a week I’d go to the union Station and go in; for a dime, I could get a bath.”

Fortunately, Roy hadn’t forgotten about his little brother. Every now and then, Walt would received a letter which said, “Kid, I haven’t heard from you, but I just have a suspicion you could use a little money. I am enclosing a check. Fill it out in any amount up to $30 on the check.” And so, Walt said, “I’d always write $30 on the check.”

Even when he was living on canned beans, Walt didn’t give up. He got a job making a film about dental hygiene for a local dentist, who gave him the grand sum of $500. Did Walt save the money? No. Did he move back into a real apartment or start to eat well? No. Instead, he decided to create a whole new kind of cartoon, which cost him every penny he had.

His idea was to put a real, Live person in an animated world. He named the new cartoon Alice’s Wonderland, and he asked a local four year-old, Virginia Davis, to play the part. Walt filmed the little girl in her parent’s home and against a big white screen, and later he and his animators added the animated characters. But before Walt could finish the film, he ran out of money again.

By July of 1923, Laugh-O-gram was out of business and Walt had sold his movie camera. All he had left was a cardboard suitcase, a change of clothes, and an unfinished film reel of Alice’s Wonderland. But rather than giving up, Walt decided to go where all the movie-makers go: Hollywood.

(Links: Walt Disney Essay Kansas City 1922Walt Disney: How He Did It)

Image and Data Visualisation: Fundamentals of Digital Typography

(Reference taken from: Steane, J. 2014, The Principles & Process of Interactive Design. London, Bloomsbury)

To understand and appreciate the application of typography, it is essential to first become familiar with the basic characteristics and features of letterforms. Through their understanding, you can diagnose issues with a particular typeface and communicate what characteristics you are looking for when discussing typeface selection with fellow designers.

Two important terms to begin with are ‘typeface’ and ‘font’. These common terms are not strictly interchangeable and have different meanings. A typeface is a set of one or more fonts that share a stylistic unity and form part of a type family. A font is a single character set of a particular typeface and size. Letters, numbers and other symbols that make up a character set are individually known as ‘glyphs’.

Measuring Type

Type size is traditionally measured in points (pt), with 72 points equivalent to an inch (2.54 cm). For screen-based design, type is increasingly measured in pixels (px) and in ’ems’. Although a point is a fixed measurement, two fonts can appear to be of different proportions when they share the same point size. This is due to differences in fonts’ relative ‘x’ heights and widths.

Type size is measured from the lowest descender of a font’s letterforms to just above the highest ascender, and a font’s x-height is measured from its baseline to the height of the lower-case x. Therefore, those fonts with short ascenders and descenders, or tall x-height, will appear relatively larger than others. Similarly, fonts with less height variation between its upper-case and lower-case letters will also appear larger.

The width of letterforms will also affect a font’s relative size. A font’s point size relates to its height only and not its width, so condensed fonts will visually appear smaller than those with broader widths. The width of a font is normally expressed in character per pica and this measurement is used to estimate how much text will fit into an allotted space.

An Anatomy of Type

Type Measuring

X-Height

Old Style, Transitional and Modern Stresses

Ligatures

Kerning, Leading and Tracking

Stress

The Stress refers to the angle of the thin stroke in rounded letterforms. Historically, ‘old style’ serif typefaces, such as Caslon, have inclined or ‘oblique’ stresses whereas ‘modern’ serifs, such as Bodoni, have vertical. Typefaces of the ‘transitional’ period have semi-oblique stresses, for example, Baskerville.

Ligatures

A ligature is the joining of two or more characters to create a single glyph. Ligatures have their origins in ancient manuscripts and were designed to stop letter shapes colliding. he most prominent ligature is the joining of ‘f’ and ‘i’ to make ‘fi’.

Letter Spacing – Tracking and Kerning

Letter spacing is measured in ems. An em is a relative measurement and is traditionally based on the width of the widest capital letter of an alphabet, namely the letter ‘M’. General letter spacing is known as ‘tracking’ whereas individual spacing between two letters is called ‘kerning’. Note: an em is now commonly used to describe the relative height of letterforms too, where 1 em = the point size of the font.

Leading

The spacing between lines of type is known as ‘leading’. This historical term comes from the days of movable metal type when different thickness of lead were placed between lines of type to aid readability. Leading of lead is expressed in points, too. For example, 10/12pt is 10pt type on 12pt leading.

Styles and weights

Versatile typefaces come in a series of styles known as ‘weights’. For example, the Neue Helvetica typeface family show not only the standard regular, bold and italic, but also a whole range of different stroke weights.

In the past 25 years, we have also seen the growth of ‘super families’, which include Serif, Sans Serif and Slab Officina and Thesis. These super families are designed to work harmoniously together and give a visual consistency to a design across a variety of uses.

Serif

Roman inscriptions inspired serif typefaces. The term ‘serif’ describes the angular details at the ends of letter strokes. Old-style serifs date back to the fifteenth century and serifs today are associated with traditional book and newspaper publishing.

Sans Serif

Sans Serifs are ‘Grotesks’ came into prominence at the end of the eighteenth century, partly as an aesthetic reaction to the over ornamentation of serifs and, more practically, as a need for typefaces with greater legibility. Sans Serifs are commonly used for signage and information graphics, and work well on screen.

Slab Serif

Slab Serifs are characterized by thick block-like serifs. they first came into use at the beginning of the nineteenth authoritative nature. For this reason, heavy slab serifs are used sparingly as they are uncomfortable to read for more than a few lines of continuous reading.

 

 

Image and Date Visualisation: Using Colour Systems

(Reference taken from: Steane, J. 2014, The Principles & Process of Interactive Design. London, Bloomsbury)

Colour can both harmonize and organize graphic elements and information. Using colours based on a working knowledge of the colour wheel will provide your design with balance, harmony and organization. The basic colour schemes are explained below.

Monochromatic schemes are created by taking a single colour and adding neutral colours to create shades. Monochromatic schemes are harmonious and easy on the eye, but are weaker at highlighting areas of interest. Analogous schemes are harmonious in the same way as monochromatic, but they have the benefit of being to accent the highlight areas of interest.

Complementary schemes use pairs of colour that are opposite each other in the colour wheel. they are good for highlighting features, and work best when one colour is more dominant than the other where the less dominant colour is used as the accent colour.

Split complementary schemes are made from three colours. Choose a colour then select colours from either side of its natural complementary colour. Split commentary schemes create impact, but are often hard to balance. Triadic schemes are created by choosing three colours complementary, triadic schemes are dynamic, but difficult to balance, and often work best when one colour is dominant.

Adjacent Colours

Although colour values can be set, their appearance will change depending on their surroundings, in particular adjacent colours. In general, colours appear brighter on dark backgrounds and are more muted when placed next to a colour of a similar hue.

Colour Scheme Creation 

In Adobe Illustrator, you can use the ‘Colour Guide’ panel (accessible from the Window menu) to help you find colour schemes based on you current fill colour. Alternatively, use online resources to find or create colour schemes:

Colour Scheme Designer

Kuler Adobe

Pictaculous

Colour Guide Adobe Illustrator

The Tommy Portfolio Site