ECE291 Lecture 12 Mode 13h Graphics. ECE 291 Lecture 12Page 2 of 27 Lecture outline Color theory Video Hardware Mode 13h Graphics File Formats

ECE291ECE291

Lecture 12Lecture 12

Mode 13h GraphicsMode 13h Graphics

ECE 291 Lecture 12ECE 291 Lecture 12

Page Page 22 of 27 of 27

Lecture outlineLecture outline

Color theoryColor theory

Video HardwareVideo Hardware

Mode 13hMode 13h

Graphics File FormatsGraphics File Formats



Color theoryColor theory

TV’s, Computer Monitors, Projectors…TV’s, Computer Monitors, Projectors…It’s all It’s all RedRed, , GreenGreen, , BlueBlue

Why RGB? These are the primary colors Why RGB? These are the primary colors for visible light. You can get all the colors for visible light. You can get all the colors by mixing them.by mixing them.

RedRed + + GreenGreen = = YellowYellow

GreenGreen + + BlueBlue = = CyanCyan

BlueBlue + + RedRed = = PurplePurple



Color Theory - BiologyColor Theory - Biology

How can mixing a How can mixing a Low FrequencyLow Frequency with with High High FrequencyFrequency make make Really High FrequencyReally High Frequency??

It can’t. Remember your ECE 210. It’s all It can’t. Remember your ECE 210. It’s all biological.biological.

Our eyes have red, green, and blue sensors. Our eyes have red, green, and blue sensors. These are the colors we can see best (ie, the These are the colors we can see best (ie, the frequencies for which we have color receptors)frequencies for which we have color receptors)

The people who invented color photography and The people who invented color photography and color TV used this fact.color TV used this fact.



Color Theory - BiologyColor Theory - Biology

If three-eyed aliens with different color If three-eyed aliens with different color receptors visited us, they’d “see” the same receptors visited us, they’d “see” the same three frequencies coming from the three frequencies coming from the monitor, but they wouldn’t be able to see monitor, but they wouldn’t be able to see any pictures.any pictures.

The same goes for your dog that wonders The same goes for your dog that wonders why you spend hours looking at a blank why you spend hours looking at a blank screen.screen.



Full Color ImagesFull Color Images

Each pixel has a Red, Green, and Blue value.Each pixel has a Red, Green, and Blue value.

24-bit color means 24-bit color means 1 red byte1 red byte, , 1 green byte1 green byte, , 1 blue byte1 blue byte. . Each determines the color intensity (0 = none, 255 = full) Each determines the color intensity (0 = none, 255 = full) of their respective color components.of their respective color components.

16-bit color means 16-bit color means 5 bits red5 bits red, , 5 bits green5 bits green, , 5 bits blue5 bits blue. . The extra bit is sometimes a green bit depending on the The extra bit is sometimes a green bit depending on the system.system.

Full color is when we use a given number of bits to Full color is when we use a given number of bits to specify the intensity of each color component.specify the intensity of each color component.



24-bit Full Color Images24-bit Full Color Images

24-bit color allows 256 different intensities 24-bit color allows 256 different intensities for each color component. This allows for for each color component. This allows for 222424 or 16,777,216 different colors. or 16,777,216 different colors.

That’s way more than our eyes can That’s way more than our eyes can distinguish.distinguish.

This 24-bit color is sometimes called This 24-bit color is sometimes called FullFull or or TrueTrue color. color.

True color requires 3 bytes for every pixel.True color requires 3 bytes for every pixel.



16-bit Full Color Images16-bit Full Color Images16-bit color allows 32 different intensities 16-bit color allows 32 different intensities for each color component. This allows for for each color component. This allows for 221515 or 32,768 different colors (assuming 5 or 32,768 different colors (assuming 5 bits green)bits green)

Not quite as good as True color, 16-bit Not quite as good as True color, 16-bit color is also referred to as High color.color is also referred to as High color.

High color requires 2 bytes for every pixel.High color requires 2 bytes for every pixel.



Full Color ImagesFull Color ImagesPositives of high and true color imagesPositives of high and true color images More colors means higher quality picturesMore colors means higher quality pictures Easier to do image manipulation (math)Easier to do image manipulation (math)

Make everything a little redderMake everything a little redder

Blur an image by averaging RGB values of adjacent pixelsBlur an image by averaging RGB values of adjacent pixels

Negatives of high and true color imagesNegatives of high and true color images Take up a lot more memoryTake up a lot more memory

Ex:Ex: A 320x200 pixel image with 24-bit color A 320x200 pixel image with 24-bit color needsneeds

320 x 200 x 3 = 192,000 bytes of memory320 x 200 x 3 = 192,000 bytes of memory



Color PalettesColor PalettesWhile we’d like to do everything in full While we’d like to do everything in full color, in real mode we need to reduce the color, in real mode we need to reduce the amount of memory our images use.amount of memory our images use.

The The color palette color palette contains the 3-byte contains the 3-byte RGB values of 256 different colors.RGB values of 256 different colors.

The image data is then just a bunch of The image data is then just a bunch of indexes into this palette. It’s a look-up indexes into this palette. It’s a look-up table!table!



Color PalettesColor PalettesPositives of palettesPositives of palettes Less memory and bandwidth needed to store and move Less memory and bandwidth needed to store and move

picturespictures You can do some cool stuff with palettesYou can do some cool stuff with palettes

Invisible pixels – assign one palette entry to be “clear” and Invisible pixels – assign one palette entry to be “clear” and when you’re copying one image over another, don’t copy the when you’re copying one image over another, don’t copy the “clear” pixels.“clear” pixels.

You can cycle the palette for 60’s psychedelic effects.You can cycle the palette for 60’s psychedelic effects.

You can fade out a screen just by subtracting from each entry You can fade out a screen just by subtracting from each entry in the palette table until they’re all zeroin the palette table until they’re all zero



Color PalettesColor PalettesNegatives of palettesNegatives of palettes Fewer colors (at most 256) mean lower quality picturesFewer colors (at most 256) mean lower quality pictures Harder to do manipulationHarder to do manipulation

Average blurring is harder because new color isn’t in paletteAverage blurring is harder because new color isn’t in palette All “real” images come in full color and have to be All “real” images come in full color and have to be

convertedconvertedThis is hard because you have to choose a good paletteThis is hard because you have to choose a good palette

For each “full color” pixel, find closest palette entryFor each “full color” pixel, find closest palette entry When you put images together, they share same When you put images together, they share same

palettepalette



Text Mode Video RevisitedText Mode Video RevisitedText mode video is kind of like a form of paletteText mode video is kind of like a form of palette

Each ASCII byte is an index into a font table with Each ASCII byte is an index into a font table with a bitmap for each charactera bitmap for each character

Each Mode Byte is an index into a type of paletteEach Mode Byte is an index into a type of palette

Or you can think of the mode byte as 3-bit full Or you can think of the mode byte as 3-bit full color (kind of)color (kind of)



Video HardwareVideo HardwareYou’ve got a chunkYou’ve got a chunkof memoryof memory

You write to theYou write to thememory throughmemory throughmemory mappedmemory mappedI/O (MP3)I/O (MP3)

In a analog RGB monitor, three electron beams sweep In a analog RGB monitor, three electron beams sweep across all rows 60 to 85 times a second to zap the across all rows 60 to 85 times a second to zap the phosphor elements to make them glowphosphor elements to make them glow

The video card adjusts the intensity of the three electron The video card adjusts the intensity of the three electron beams in real time as they are sweeping to correspond to beams in real time as they are sweeping to correspond to the intensities specified in the VRAMthe intensities specified in the VRAM



Video HardwareVideo HardwareTo do this, the To do this, the video card reads video card reads out a whole row of out a whole row of RGB values in theRGB values in theVRAM and shifts VRAM and shifts them “out” in a big them “out” in a big shift register.shift register.The byte that “falls off the edge” gets converted into an The byte that “falls off the edge” gets converted into an intensity for the electron beam.intensity for the electron beam.With a palette, there is an additional step. Before data With a palette, there is an additional step. Before data shifts out, it looks up the “real” RGB value in palette shifts out, it looks up the “real” RGB value in palette memory.memory.



Mode 13hMode 13hMode 13h is a 320 x 200 x 256-color graphics Mode 13h is a 320 x 200 x 256-color graphics display mode that was very popular for DOS display mode that was very popular for DOS programming due to its relatively high number of programming due to its relatively high number of colors (256 vs 16 for other VGA modes) and simple colors (256 vs 16 for other VGA modes) and simple addressing.addressing.

320 x 200 = 64000 pixels. With 1 byte per pixel this 320 x 200 = 64000 pixels. With 1 byte per pixel this easily fits in a single real-mode segment.easily fits in a single real-mode segment.

It’s linear just like text mode. The pixels increase in It’s linear just like text mode. The pixels increase in memory as you go from left to right, while each row memory as you go from left to right, while each row immediately follows the previous one.immediately follows the previous one.

Offset = row*320 + colOffset = row*320 + col



Mode 13h - How to get thereMode 13h - How to get thereThe following instructions get you into Mode 13h videoThe following instructions get you into Mode 13h video

mov ah, 0mov ah, 0 ; int 10h’s set mode subfunction; int 10h’s set mode subfunction

mov al, 13hmov al, 13h ; The aptly named Mode 13h; The aptly named Mode 13h

int 10hint 10h ; Call the Video BIOS interrupt; Call the Video BIOS interrupt



Mode 13hMode 13hHow to draw a pixelHow to draw a pixel

The following instructions draw a pixel on the screenThe following instructions draw a pixel on the screen

VidGrSeg equ VidGrSeg equ 0A000h0A000h

Location dwLocation dw (200/2)*320+(320/2)(200/2)*320+(320/2) ; Center; Center

Color db 98Color db 98 ; Some random palette index; Some random palette index

mov ax, VidGrSegmov ax, VidGrSeg

mov es, axmov es, ax ; Use extra segment to address VRAM; Use extra segment to address VRAM

mov bx, [Location]mov bx, [Location] ; Offset to center of screen; Offset to center of screen

mov al, [Color]mov al, [Color] ; Palette Entry Number; Palette Entry Number

mov [es:bx], almov [es:bx], al ; Write it to the screen; Write it to the screen



Mode 13hMode 13hThe Default PaletteThe Default Palette



Mode 13hMode 13hHow to change the paletteHow to change the palette

Method 1: Load an entire paletteMethod 1: Load an entire palette Write 0 to port 3C7hWrite 0 to port 3C7h Write red, green, blue bytes to port 3C9h for all 256 colorsWrite red, green, blue bytes to port 3C9h for all 256 colors

Method 2: Change just one palette entry using VBIOS callMethod 2: Change just one palette entry using VBIOS call BX = Palette Number (0 – 255)BX = Palette Number (0 – 255) CH = Green (0 – 63)CH = Green (0 – 63) CL = Blue (0 – 63)CL = Blue (0 – 63) DH = Red (0 – 63)DH = Red (0 – 63) AX = 1010hAX = 1010h ; Set VGA Palette Registers command; Set VGA Palette Registers command INT 10hINT 10h ; vBIOS call; vBIOS call



Mode 13hMode 13hHow to change the paletteHow to change the palette

; Change a palette entry to light purple; Change a palette entry to light purple

RedRed dbdb 3939

GreenGreen dbdb 00

BlueBlue dbdb 6363

MovMov bx, 0bx, 0 ; changing palette entry 0; changing palette entry 0

MovMov ch, [Green]ch, [Green]

MovMov cl, [Blue]cl, [Blue]

MovMov dh, [Red]dh, [Red]

MovMov ax, 1010hax, 1010h

IntInt 10h10h



Graphics File FormatsGraphics File Formats

Raster FormatsRaster Formats Arrays of pixels (what we’ve been talking Arrays of pixels (what we’ve been talking

about)about) Raw pixels (.bmp)Raw pixels (.bmp) Run-Length encoding (.pcx)Run-Length encoding (.pcx) LZW encoding (.gif)LZW encoding (.gif) Transform encoding (.jpg)Transform encoding (.jpg) Deflate (zip) compression (.png)Deflate (zip) compression (.png)



Graphics File FormatsGraphics File FormatsVector FormatsVector Formats Like PostScript or CorelDrawLike PostScript or CorelDraw A vector file might have something like:A vector file might have something like:

““Draw line from (24, 56) to (87, 12)”Draw line from (24, 56) to (87, 12)”

““Here’s what an ‘A’ looks like….”Here’s what an ‘A’ looks like….”

““Not draw an ‘A’ at (75, 96)”Not draw an ‘A’ at (75, 96)” Eventually converte to raster format by using a Eventually converte to raster format by using a

rasterizerrasterizerPrinters are very high resolution rasterizers (for Printers are very high resolution rasterizers (for example)example)



Graphics File FormatsGraphics File FormatsIncluded in image files…Included in image files… Header: Most file formats start out with some Header: Most file formats start out with some

kind of info about the image. For graphics files kind of info about the image. For graphics files this info could be:this info could be:

Size (horizontal and vertical pixels)Size (horizontal and vertical pixels)Color depth (bits per pixel)Color depth (bits per pixel)Version (makes life difficult…GIF89A, GIF97A, …)Version (makes life difficult…GIF89A, GIF97A, …)Compression TechniqueCompression Technique

Palette: If you’re not using true color, you must Palette: If you’re not using true color, you must include a palette for the image in the image fileinclude a palette for the image in the image file

Data: Raw or compressed, raster or vector Data: Raw or compressed, raster or vector information.information.



Graphics File FormatsGraphics File FormatsBitmap (.bmp)Bitmap (.bmp)

Included in image files…Included in image files… Header: Most file formats start out with some kind of Header: Most file formats start out with some kind of

info about the image. For graphics files this info could info about the image. For graphics files this info could be:be:

Size (horizontal and vertical pixels)Size (horizontal and vertical pixels)

Color depth (bits per pixel)Color depth (bits per pixel)

Version (makes like difficult…GIF89A, GIF97A, …)Version (makes like difficult…GIF89A, GIF97A, …)

Compression TechniqueCompression Technique

Palette: If you’re not using true color, you must include Palette: If you’re not using true color, you must include the palette for the image in the image filethe palette for the image in the image file

Data: Raw or compressed, raster or vector information.Data: Raw or compressed, raster or vector information.



Graphics File FormatsGraphics File FormatsDiscussion of various graphics file formats. Discussion of various graphics file formats.

Go toGo to

http://courses.ece.uiuc.edu/ece291/lecture/lochttp://courses.ece.uiuc.edu/ece291/lecture/lockwood/l15.htmlkwood/l15.html



AnnouncementAnnouncementSandia National Labs Visit (HKN)Sandia National Labs Visit (HKN)

For more information visitFor more information visit

www.iansteiner.com/sandia.htmlwww.iansteiner.com/sandia.html

Documents

ECE291 Lecture 12 Mode 13h Graphics. ECE 291 Lecture 12Page 2 of 27 Lecture outline Color theory Video Hardware Mode 13h Graphics File Formats