How monitors display computer graphics

• Monitors
  • Screen is 2-D grid of pixels
  • Pixel is “picture element”
  • Screen as discrete Cartesean coordinate system
  • Each pixel has (x,y) address.
  • How many pixels on the screen?  Depends on resolution, which is number of pixel rows and columns
  • Checking and setting resolution in Windows XP: (right-click on desktop, select properties then settings)
  • Display device (CRT, LCD) itself has maximum resolution.
  • Displaying bits on CRT screen:
    • The program generating image to be displayed writes it in memory on “graphics card”.
    • CRT controller reads graphics memory and translates value into pixel color.
    • pixel-by-pixel and row-by-row until whole screen is covered, then repeat
    • refresh rate is number of repetitions per second.  If less than 30, eye will detect flicker
  • LCD (Liquid Crystal Display) monitors (flat monitors, laptops, cell phones, iPod) do not have the flicker problem.
• Binary representation of each pixel stored in graphics memory (separate RAM module)
• Amount of required graphics memory depends on
  • resolution
  • number of allowable colors
  • special graphics instructions and their performance requirements
• Binary representation of color
  • Value stored in memory represents color.
  • How many colors if 1 bit per pixel?  what if 8 bits per pixel? 16?  24?  32?
  • Bits per pixel is called color depth.
  •  Screens use RGB color model
    • RGB = Red Green Blue
    • these are “additive primary colors”
    • baseline is black
    • assign intensity value to each of the 3 primaries
    • intensities of primaries are added to yield resulting color
    • Black is zero intensity for all 3 primaries, white is full intensity of all 3.
    • The binary value for a color encodes the 3 intensity values.
    • Monitors typically offer 16 bit or 32 bit depth. 32 bit depth is really 24 bits, 8 pits per primary color.
    • 8 bits per primary yields 256 intensity levels, and 256 x 256 x 256 = 16.7 million combinations ("true color").
  • Color printers based on CMY color model
    • CMY = Cyan, Magenta, Yellow
    • these are “subtractive primary colors”
    • baseline is white
    • assign intensity value to each of the 3 primaries
    • intensities of primaries are subtracted to yield result.
    • Printers really use CMYK, K for black (black ink cartridge rather than using up the three colors to make black).
  • There is a nice demo of these at http://www.phy.ntnu.edu.tw/java/image/rgbColor.html
  • There is another demo that shows both additive and subtractive color systems at http://personal.uncc.edu/lagaro/cwg/Colors/colorBox1.html
  • Most web browsers use a "web-safe" palette of 216 colors.
    • There are 6 intensity levels for each of Red, Green, and Blue (6 x 6 x 6=216),
    • values for each primary are expressed in Hexadecimal (00,33,66,99,CC,FF).
    • See http://www.immigration-usa.com/html_colors.html
• Screen or printer resolution is dpi (dots per inch).
• Will screen resolution usually match printer resolution? No. Most printers are at least 300 dpi. Monitors usually less than 100 dpi.

Digital Image Processing

• There are two fundamentally different ways of storing graphics images:
  • Bitmapped (Raster) graphics
    • Image considered collection of bits
    • all digital photos are stored this way
    • illustrate using Microsoft Paint (Accessories menu)
  • Object-oriented (Vector) graphics
    • Image components you apply can be manipulated individually w/o affecting other objects in the image
    • Illustrate using Microsoft Word, Drawing toolbar
• Click here for an explanation and examples that clearly distinguish bitmapped and O-O graphics
• Image has to be rendered as pixels regardless, because CRT is pixel-oriented
• Example showing advantage of O-O graphics: if you type textual label in bitmapped, it cannot be altered w/o messing up the background.  With object-oriented you can select and modify the text.
• Example showing advantage of O-O graphics: object specification stored internally as mathematical formulae, thus can be drawn at any scale.  Good for printing.
• Example showing disadvantage of O-O graphics: how to do shading and other special effects with O-O graphics?  These are pixel-level effects.
• Printer has higher resolution than screen but granularity of artist limited by screen resolution.
• Paint Shop Pro as example

Common Graphics Applications

• Image and Photo processing and manipulation
  • Adobe PhotoShop
  • Paint Shop Pro (upcoming project)
  • can you name some others?
• Presentation Graphics
  • PowerPoint is well-known example.
  • PowerPoint WBT course highly recommended
• Desktop Publishing
• CAD/CAM
  • Computer-aided design / computer-aided manufacturing
• Word Processors
  • Used in WYSIWYG word processing
  • Essential for "scalable fonts" -- letter represented by mathematical formulae (font size is formula's variable) instead of bit map.
  • Word processor drawing tools

Digital Audio

focus on audio CDs (Compact Discs)

• recall that data on CDs is stored in binary (0's and 1's)
• recall that 0's and 1's are physically recorded by burning, or not burning, pits into reflective metallic surface using a laser
• recall that bits are read from the CD using laser that shines a beam to the CD surface plus a photo receptor that records how the beam reflects back (to detect pits).
• how does the music get into digital (binary) format?
  • original sound is analog - vibrating air.
  • Let's do a simple example
  • assume a pure sound, the A above middle C, plucked on a guitar
  • the reference note A above middle C vibrates as a 440 Hz (Hertz, cycles per second) sine wave
  • See http://www.planetoftunes.com/sound/waveform.html for diagrams illustrating Hertz and sine waves
  • See http://www.eminent-tech.com/music/multimediatest.html to play some test tones.
  • the sine wave is digitized by measuring its amplitude (strength) as an electrical signal at regular time intervals then converting the amplitude to a number using an analog-to-digital converter (ADC).
  • Each measurement is called a sample
  • It has to be sampled at least two times per cycle to convert back to correct frequency at playback
  • To capture a 440 Hz signal requires at least 880 samples per second
  • Have to decide how precise each sample should be. How many intervals to define on the y (vertical) axis of the signal.
  • The more precise each sample is, the more bits are required to store its value.
  • 256 intervals on vertical axis leads to 8 bits for each sample (can store range 0-255).
• real music is much more complex; waveform represents many different frequencies and signal strengths combined so it is very "craggy"
• this example, from Roxio Easy CD Creator (roxio.com), shows a clip from OutKast's "Hey Ya". Top waveform is left stereo channel; right channel below it. The highlighted section is the phrase "hey ya" from the chorus
• Music on CDs is typically sampled:
  • 44,100 samples per second. Can capture signals up to about 22 KHz (kilohertz)
  • each sample is 16 bits (2 bytes) long, corresponding to 65536 intervals on the vertical axis
  • this means that each second of music generates 88,200 bytes of data per channel
  • stereo requires 2 channels, so double that to 176,400 bytes per second, or 10,584,000 bytes per minute of sound (10MB).
  • audio CDs can hold up to 80 minutes of audio. This should require about 10 MB x 80 = 800 MB (megabytes).
  • each song on standard CD is stored in CDA (CD Audio) format. On a Windows system, you can discover that their filenames end in ".CDA" (can find this, using command prompt). It is not compressed.
• By sampling faster, higher frequencies can be recorded but humans cannot hear them.
• By increasing the number of bits per sample, the signal accuracy can be improved.
• Windows WAV format is another uncompressed audio format.
• When I make mix CDs on my computer using Easy CD Creator, it "rips" the original CDA file from the CD and stores it as a WAV on my hard drive then "burns" the WAV back to a CDA on the CD-R.
• at playback time, the bits are read using a laser as described previously. Each sample then goes through a digital-to-analog converter (DAC) to convert it back into an electrical signal which is then amplified and sent through speakers to your ears.

In audio and video, concurrent technology development by multiple companies and groups have lead to format wars. Such wars have been going on for centuries. Examples:

• French versus British telegraph systems (early 1800s)
• Thomas Edison's cylinder versus Alexander Graham Bell's platter for sound recordings (late 1800s).
• More recent and most famously, Sony's Beta tape versus JVC's VHS tape for video cassette recordings.
• The current (2005) hot format war is over competing and incompatible technology for high definition DVD (HD-DVD).

Data Compression

• Why is this of interest?
• a couple simple data compression techniques
  • assign codes to data values. For data values that occur more frequently, assign a shorter code. Morse code does this. Huffman codes do this.
  • long sequences of 0's or long sequences of 1's can be replaced by the sequence length (encoded in binary).
• image compression. Here is an interesting demo you can do with Paint Shop Pro:
  • Start with image and save in several different formats - bmp, tiff, gif, jpeg will all yield different sized files
• animation compression: save only the frame-to-frame difference.
• audio compression: What is MP3?  What does the MP stand for?
• the name itself is a compression of MPEG audio layer 3. MPEG=motion picture experts group
• compresses by about a factor of 11! 32MB compresses to 3MB. It is pretty complex, though.
• uses perceptual noise shaping, or psychoacoustics, which means it uses characteristics of the human ear and its interactions with the brain which results in how we perceive sound. Examples:
  • if a sound contains both loud and soft components then we usually hear only the loud one. MP3 will remove the soft one, simplifying the signal.
  • If the sound contains two notes that are very close together we will hear only one of them. So remove the other.
  • Very low frequencies are non-directional (that's why you only have one subwoofer), so do not encode them into both channels.
• After applying psychoacoustic principles, traditional data compression techniques are applied.
• Result is "near CD quality". In other words, does not sound quite as good as CD (which is not quite as good as the original), but the space savings are tremendous.

Hypermedia

• Vannevar Bush article “as we may think” 1945 Atlantic Monthly.
  • http://www.theatlantic.com/doc/194507/bush
  • describes device called MEMEX (MEMory EXtender)
  • Excerpts (section 6):

“When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome. Having found one item, moreover, one has to emerge from the system and re-enter on a new path.

The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain.

Selection by association, rather than by indexing, may yet be mechanized. …

Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and to coin one at random, "memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.”

• Ted Nelson coined the term “hypertext” in early 1960's.
  • “Everything is deeply intertwingled.”
  • See Computer Lib / Dream Machines 1974.
  • Dream Machines page 44, “non-sequential writing”
  • non-hierarchical, too
  • Xanadu (never fully realized)
• Tim Berners-Lee developed World Wide Web around 1990.
  • note that Internet already existed and was being used for email and file transfer
  • WWW was his realization of Bush/Nelson hypertext concepts on existing Internet