Graphics

1
Graphics
2
Graphics

• Can be immersive and capture imaginations.

3
Graphics

• Graphics file types fall into two main
  categories Bitmap Graphics and Vector Graphics.

Bitmap Vector
Referred to as paint graphics Can show color or black and white photographs/clipart Non-scalable without loss of quality Every pixel in the image adds to the overall file size Referred to as draw graphics Can show color or black and white solid fill/gradient image. Scalable without loss of quality File size is calculated by storing the positional points of the image and a generic fill color/pattern
4
Bitmaps
Width 11 Pixels

• GIF 8 bit (lets you choose from 256 colors that
  are premixed)
• JPG 24 bits (essentially mixes custom colors for
  each pixel on the fly!)
• PNG Portable Network Graphic supports true color
  16 million colors.
• BMP Large uncompressed Windows universal file
  format
• Higher in Quality Higher in File Size

1 1 1 0 0 0 0 0 1 1 1
1 1 1 0 1 1 1 0 1 1 1
1 0 0 0 0 0 0 0 0 0 1
1 1 1 0 1 1 1 0 1 1 1
1 1 1 0 0 1 1 0 1 1 1
1 0 0 1 1 1 1 0 1 1 1
1 1 1 0 1 1 1 0 1 1 1
1 1 1 0 0 1 1 0 1 1 1
1 1 1 0 1 1 1 0 1 1 1
1 1 1 1 0 0 0 1 1 1 1
1 1 1 1 1 0 0 1 1 1 1
Height 11 Pixels
5
Bitmaps - Animated GIF

• An animated GIF is a sequence of GIF files all
  bonded together and displayed one after the
  other.
• With enough panes, you can get very realistic
  animations. A minimum of 3 frames is necessary to
  create animation.
• The total file size of an animated gif is the sum
  of the GIF files used to create the sequence, and
  that can add up quickly.

• Sample http//computer.howstuffworks.com/web-ani
  mation2.htm
• Create your own online http//gickr.com/

6
Bitmaps - JPEGs

• It has good compression characteristics on
  photographic data.
• It lets you adjust the amount of compression.

• Sample
• http//computer.howstuffworks.com/question289.htm
• For safe searches always look in trusted sites
• Flickr
• Alberta Education Online Reference Centre

7
Bitmaps - MPEG Compression

• An MPEG file tries to eliminate repetition
  between frames to significantly compress video
  information.
• In addition it allows a soundtrack (which
  animated GIFs do not). Because a typical sequence
  has hundreds or thousands of frames, file sizes
  can still get quite large.

8
Vectors Flexible and Overlapping
Bezier curve needs only four points!
position 3.123 48.52
position 10.03 52.6
position 2.95 86.52
position 11.04 102.6
9
Vectors Shockwave/Flash

• Shockwave/Flash provides a vector-based animation
  capability. Instead of specifying the color of
  every pixel, a Shockwave file specifies the
  coordinates of shapes (things like lines,
  rectangles, circles, etc.) as well as the color
  of each shape.
• Shockwave/Flash files can be extremely small.
  They allow animation and sound. The images are
  also scalable -- because they are vector-based,
  you can enlarge the image and it will still look
  like a fluid animation.

http//computer.howstuffworks.com/web-animation1.h
tm
10
Image Compression
Lossless compression reduce file size as much as
possible without losing image quality. Larger
file size than images saved with lossy
compression. This technique focuses on image
quality as the main goal. Lossy compression
Takes advantage of the limitations of the human
eye and discard invisible information. Allows for
variable quality levels (compression) and as
these levels are increased, file size is reduced.
11
Fun with Graphics

• Blabberize.com
• 3D animation
• What did you see?
• Free Online Paint And Draw Tools
• 3D-PC Games