ICS 2311 Computer Graphics

Karanja Mwangi PhD

Lesson objective

◼ At the end of this class you will

◼ Appreciate the difference between vector and raster graphics
◼ Identify the difference between vector and raster file formats
◼ Understand the application areas of Vector and Raster
graphics
◼ Explore the 2D graphics Primitives – More on Raster graphics
such Line drawing algorithms, Circle drawing algorithms
Images are Pixels !

◼ Images are made up of pixels

Pixels-2

◼ Pixels: we said it is a portmanteau of pix (from

"pictures", shortened to "pics") and el (for
"element") (picture elements) individual squares
on a grid that makes up an image. Each square is
made up of a color.
◼ A pixel is the smallest display element that makes
up the images seen on a computer monitor or
television
 Applications of Computer
Graphics
◼ Computer Aided Design
(CAD)
◼ Why these apps?
◼ A: Better conceptualization,
interaction, transfer of
ideas
Computer
Graphics
Applications
◼ Virtual Reality
◼ VR: User interacts
and views with a 3D
world using “more
natural” means
◼ Best VR games- Astro
bot? Tetris Effect….
◼ (multiplatform vs
Playstation like
Resident Evil7
◼ Data Visualization
◼ Scientific, Engineering,
Medical data
◼ Visualizing millions to
billions of data points
◼ See trends
◼ Different schemes
Computer
Graphics
Applications
◼ Games/Movies
◼ Disney world?
Which ones have you watched?
What impressed you about
them? Soul? Wolfwalkers?
Frozen (1 and 2) ..King Lion
Remake(2019)
◼ Why is Tangled
(2010) – the most
expensive animation
movie?... 260 M USD
Happens in a fictional Corona
kingdom !
Rapunzel(Mandy Moore) ..a girl
locked by her Protective other..but
wants to see the world
Computer
Graphics
Applications
◼ Education and
Training
◼ Models of physical,
financial, social
systems
◼ Comprehension of
complex systems
◼ Computer Art
◼ Fine and commercial
art
◼ Performance Art
◼ Aesthetic Computing
◼ SIGGRAPH
◼ Games/Movies
Computer
Graphics
Applications
◼ Image Processing
◼ Software such as
image j,
infranview etc
◼ ~Inverse of
Graphics
◼ Start with a
picture
◼ Process picture
information
Overview of Graphics Systems

◼ Images
◼ Hardware
◼ Input Systems
◼ Output Systems
◼ Software
◼ OpenGL
◼ MAYA
◼ 3D MAX etc
 Two Dimensional Images

◼ Images are two +Y

dimensional shapes.
◼ The two axes we will
label as X
(horizontal), and Y
Y
(vertical). Axis

(0,0) X Axis +X
 Hardware Pipeline

Input Computation Output

We want to draw a rectangle, how do we

describe it to a computer?
Model (n) - object
description that a
computer
understands.
 1. Define a set of
points (vertices) in (7,9) (14,9)
2D space.
2. Given a set of
vertices, draw
lines between (7,3) (14,3)
consecutive
vertices.
Bitmap - a rectangular array of bits mapped
one-to-one with pixels.
  Most common method is the VERTEX
method. Define the object as a set of points
with connectivity information.
 Why is connectivity important?

Connectivity - information that

defines which vertices are
connected to which other vertices
via edges.
Edge - connects two vertices
 vert 4 edges 4
 73
 79 (7,9) (14,9)
 14 9
 14 3
vert 4 edges 4
(7,3) (14,3)
 12
 23
 34
 41
How do we do this? What is needed?
Input Devices

◼ Locator Devices
◼ Keyboard
◼ Scanner
◼ Images
◼ Laser
◼ Cameras …..From the basic to complex
Locator Devices-1

When queried, locator devices return a position and/or

orientation.

•Mouse (2D and 3D)

•Trackball
•Joystick (2D and 3D)
 Locator Devices-2

When queried,
locator devices
return a position
and/or
orientation.
◼ Tablet
◼ Virtual Reality
Trackers
◼ Data Gloves
◼ Digitizers
Keyboard

◼ Text input
◼ List boxes, GUI
◼ CAD/CAM
◼ Modeling

◼ Can be specialized or generic use keyboards

 Scanners

◼ Image Scanners -
Flatbed, etc.
◼ What type of data is
returned? Bitmap
◼ Laser Scanners
◼ Emits a laser and does
time of flight. Returns
3D point
◼ Camera based -
research
◼ Examine camera image(s)
and try to figure out vertices
from them.
Other Input devices

◼ Light Pens
◼ Voice Systems
◼ Touch Panels
◼ Camera/Vision
Based
◼ Which is best?
◼ What factors to
look into ?
 vert 4 edges 4
 73
 79 (7,9) (14,9)
 14 9
 14 3
vert 4 edges 4
(7,3) (14,3)
 12
 23
 34
 41
 Computation Stage-1

Input Computation Output

◼ Now that we have a model of what we want to draw,

what goes on inside the computer to generate the
output?

Computation

Transformations Rasterization
Computation Stage-2

Computation

Model Output

Transformations Rasterization

Transformed
Model
Raster Images vs.
Vector Images
Raster (Bitmap) images
◼ A raster image is made up of grid of pixels.. In raster images, the more
pixels an image contains, the higher its resolution. For example, in a
raster image a square is drawn as a grid of pixels (dots) and each of
those pixels will have a specific color value.

◼ Bitmap images lose their clarity when they are increased in size
because the dots get bigger i.e cannot be scaled up without
losing quality.. (resolution dependent)

◼ A raster image is resolution-dependant because it contains a fixed

number of pixels that are used to create the image .

• Common File Formats in Raster : Joint Photographers Expert Group (.JPEG,

.JPG) Portable Network Graphics (.PNG)Graphic Interchange Format

(.GIF)…..TIFF, PSD etc

• Raster Editing Programs :AdobePhotoshop, PaintShop, and PhotoPaint all

work with pixels (raster images). Gimp (opensource)

Vector images
◼ A vector image is defined by objects which are made of lines and curves
that are defined mathematically in the computer. Vectors can have
various attributes such as line thickness, length and color. For example,
in a vector image, a square is drawn as four lines connected at the
corners. Those lines can be set to different thickness and colors..
◼ Vector graphics are resolution-independent. They can be made larger
or smaller without any loss of quality to the image. Vectors can be
printed at any size, on any output device, at any resolution, without
losing detail and without altering the resolution of the image.
◼ Vector images are the best choice for typefaces, charts and graphs,
drawings, and other graphics that must have sharp lines when scaled to
various sizes.
• Common File Formats in Raster llustrator (.AI), Encapuslated PostScript

(.EPS), PostScript (.PS), Scalable vector Graphic .SVG etc

• Vectors Editing Programs : PowerPoint, Adobe Illustrator, Inkscape (open

source) and Freehand

Why and when to use Vector or Raster

◼ solid color objects, manipulated text or many small

objects….then vector will be the choice
◼ drop shadows, or other 3D effects, texture or photographs
…then raster is the best choice

◼ Both Illustrator AI and EPS formats allow users to place

raster images within a vector file. The raster image is not
converted to vector format; rather it is simply embedded
in the vector file, and is rendered in raster format.
Why and when to use Vector or Raster -2

1) Type: does the file format store the type of image you
want to use ?
2) Portability: can other people use images in this format?
3) Color Depth: does the format support the number of
colors you need?
1) GIF supports 256 Colors (8-bit) , JPEG supports 16.7
M Colors – (24-bit), TIFF supports 16 M colors (24-bit)

4) Compression: can make the file smaller, but it takes

time to compress and decompress a file (GIF supports
Lossless compression
5) Transparency: do parts of your image need to be
transparent? Like GIF, PSD supports transparency
but JPEG do not
1. Image Data Types [24-bit color ]

• In a color 24-bit image, each pixel is represented by

three bytes, usually representing RGB.
◼ - This format supports 256 x 256 x 256 possible
combined colors, or a total of 16,777,216 possible colors.
• Many 24-bit color images are usually stored as 32-bit
images, with the extra byte of data for each pixel used
to store an alpha channel /value representing special
effect information (e.g., transparency)
◼ Images now have two parts: The image and a mask,
called the alpha channel

32
1.Image Data Types -2 [8-bit color ]

• 8 bits of color is also called ( “256 colors”)

• In such images a concept of a lookup table to store
color information is used.
◼ - Basically, the image stores not color, but instead
just a set of bytes, each of which is actually an index
into a table with 3-byte values that specify the color
for a pixel with that lookup table index.
• E.g Since humans are more sensitive to R and G than
to B, we could shrink the R range and G range 0..255
into the 3-bit range 0..7 and shrink the B range down to
the 2-bit range 0..3, thus making up a total of 8 bits.
• To shrink R and G, we could simply divide the R or G
byte value by (256/8)=32 and then truncate. Then each
pixel in the image gets replaced by its 8-bit index and
the color LUT serves to generate 24-bit color.
1.Image Data Types -3
Color Look-up Tables (LUTs)

• The idea used in 8-bit color images is to store only the

index, or code value, for each pixel. Then, e.g., if a
pixel stores the value 25, the meaning is to go to row
25 in a color look-up table (LUT).

Color LUT for 8-bit color images.

 1.Image Data Types -4
• A Color-picker consists of an array of fairly large blocks of color (or a
semi-continuous range of colors) such that a mouse-click will select the
color indicated.
- In reality, a color-picker displays the palette colors associated with index
values from 0 to 255.
- Figure below displays the concept of a color-picker: if the user selects the
color block with index value 2, then the color meant is cyan, with RGB
values (0, 255, 255).
1.Image Data Types -5

Color-picker for 8-bit color: each block of the color-picker

corresponds to one row of the color LUT
1.Image Data Types -6 [24-bit color VS 8-
bit color ]

24-bit:
◼ Each pixel is represented
8-bit:
by three bytes (e.g., ◼ One byte for each pixel
RGB) ◼ Supports 256 out of the
◼ Supports 256 x 256 x millions colors possible,
256 possible combined acceptable color quality
colors (16,777,216) ◼ Requires Color Look-Up
◼ A 640 x 480 24-bit color Tables (LUTs) -- Pallete
image would require ◼ A 640 x 480 8-bit color
921.6 KB of storage image requires 307.2 KB
◼ Many 24-bit color images of storage (the same as
are stored as 32-bit 8-bit grayscale)
images, the extra byte of
data for each pixel is
used to store an alpha
value representing
special effect information 37
3.Color Depth

◼ Image formats will only allow a certain

number of different colors for each pixel
◼ The format stores the level of each of the
three values for RGB to specify color
◼ R,G,and B are referred to as components
◼ Red Green Blue
◼ Bit depth describes the number of colors
that can be used in the image
 3.Color Depth :Monochrome vs. Grayscale

Monochrome:
Grayscale:
◼ Each pixel is stored as a
◼ Each pixel is usually
single bit (0 or 1)
stored as a byte (value
◼ A 640 x 480 between 0 to 255)
monochrome image
◼ A 640 x 480 grayscale
requires 37.5 KB of
storage. image requires over 300
KB of storage.

39
3.Color Depth :Color codes -RGB-Code

Hexadecimal RGB-code
of significant colours:
◼ Black: (0,0,0)
Black: #000000
◼ White: (255,255,255)
White: #FFFFFF
◼ Red: (255,0,0)
Red: #FF0000
◼ Green: (0,255,0)
Green: #00FF00
◼ Blue: (0,0,255)
Blue: #0000FF

0-255 ….as
intensity
increases 40
3.Color Depth -When image has more colors
than the color depth?

◼ If the color is not in the palette , the

Computer graphics software can choose a
separate, close color, or do dithering
(digital half-toning)
◼ Dithering is where the program fools
your eye by creating a pattern of pixels in
two colors which makes you see a color
between the two
◼ There are various forms of dithering and
applications such as Photoshop allows user
to select the type of dithering he wants
 3.Color Depth -Example : Dithering with Color

Dithering with only 2

Color I want to produce colors, orange and white

Dithering with all web- Zoomed View of

safe colors enabled dithering
3.Color Depth- Photoshop Dithering Example

Diffusion Pattern Noise

3.Color Depth - Bit Depth-1

◼ Refers to the number of colors that have been used

in an image.
◼ 24-bit image allows you to specify up to 224 different
colors in your image
◼ For each of the RGB values you can specify 28 different
values (256 values)
◼ 28*3 values for R, for G, and for B gives us 224 different colors
◼ The “24” in 24-bit says how many bits it takes to store a
single color
 3.Color Depth - Bit Depth-2

Storage Concept : Frame buffer

Framebuffer - A block of memory, dedicated to graphics

output, that holds the contents of what will be
displayed.

Pixel - one element of the frame

buffer
 3.Color Depth - Bit Depth-3

Framebuffer
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0
0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 0
0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Questions: How many pixels are there?

How big is the framebuffer?
 Framebuffer bit depths

◼ Remember, we are asking

“how much memory do
we allocate to store the
color at each pixel?”
◼ Common answers:
◼ 16 and 32 bits
Bit depths

◼ 16 bits per pixel (high color)

◼ 5 bits for red, 5/6 bits for green, 5 bits for blue
◼ potential of 32 reds, 32/64 green, 32 blues
◼ total colors: 65536
◼ 32 bits per pixel (true color)
◼ 8 bits for red, green, blue, and alpha
◼ potential for 256 reds, greens, and blues
◼ total colors: 16777216 (more than the eye can
distinguish)
4. Compression

◼ Compression is used to make files smaller

◼ Bitmap images, especially, can be quite large if stored
without compression
◼ Ex. A 640 x 480 pixel image with 24-bit color depth would
take:
• 640 * 480*24 bits = 7372800 bits = 900kB
◼ Windows bmp format is uncompressed not good for usage
in websites online as it takes time to load
 4. Compression: Lossy vs. Lossless
Compression

◼ There are two main types of compression:

◼ Lossy and Lossless
◼ When an image is compressed and later
uncompressed with a lossless algorithm, the
image is exactly the same
◼ Most common type
◼ No information is lost
◼ Lossy algorithms produce images which may be
slightly different before compression and after
uncompressing
◼ Some information may be lost
◼ Can produce sometimes produce much smaller files than
a lossless algorithm
◼ Can be used when the difference isn’t very noticeable
5. Transparency : Example of GIF
Transparency

•GIF with a transparent

background.
•GIF with a white •Image is the same size as
image on left
background.
•But, background shows
•Unsightly for web through

pages
GIMP and Photoshop support full transparency
The difference between Raster and Vector
Graphics

Source :https://tinyurl.com/taa5ju7 :
Resolution
◼ Resolution refers to the number of pixels in an image, and is a measurement of the
output quality of an image, usually in terms of samples, pixels, dots, or lines per
inch. Images are displayed on your computer screen at display (or screen)
resolution (72 or 96 ppi)..

◼ Resolution terminology varies according to the intended output device. PPI (pixels
per inch) refers to screen resolution (monitors), DPI (dots per inch) refers
to print resolution, SPI (samples per inch) refers to scanning resolution,
and LPI (lines per inch) refers to halftone (often newspapers) resolution.

◼ Sometimes images are referred to as high resolution (hi-res) or low resolution (lo-
res). High resolution would be an image intended for print, generally having at least
300 pixels per inch. Low resolution refers to images only intended for screen
display, generally having 72-96 pixels per inch. An image for use on the internet
should only be 72 dpi (the minimum display resolution) to minimize download time.
Graphic Card Memory

◼ How much memory is on our graphic card?

◼ 640 * 480 * 32 bits = 1,228,800 bytes?
◼ 1024 * 768 * 32 bits = 3,145,728 bytes?
◼ 1600 * 1200 * 32 bits = 7,680,000 bytes?
◼ How much memory is on your graphics card?
Raster Displays

◼ Cathode Ray Tubes (CRTs), most “tube” monitors you see.

big and bulky.
◼ Liquid Crystal Displays (LCDs), there are two types
transmissive (laptops, those snazzy new flat panel
monitors) and reflective (wrist watches).
◼ Thin Film Transistors (TFT) ….
◼ How does GPU graphics processing unit work? How do
they accelerate image processing? What are the
trends

◼ READING ON How EACH of

them works is required
Cathode Ray Tubes (CRTs)

Heating element on the yolk.

Phosphor coated screen
Electrons are boiled off the
filament and drawn to the
focusing system.
The electrons are focused into a
beam and “shot” down the
cylinder.
The deflection plates “aim” the
electrons to a specific position
on the screen.
CRT Phosphor
Screen
◼ The screen is coated with
phosphor, 3 colors for a color
monitor, 1 for monochrome.
◼ For a color monitor, three guns
light up red, green, or blue
phosphors.
◼ Intensity is controlled by the
amount of time at a specific
phosphor location.
Beam Movement
 Beam Movement
scan line - one row on the screen
interlace vs. non-interlace - Each frame is either drawn
entirely, or as two consecutively drawn fields that alternate
horizontal scan lines.
vertical sync (vertical retrace) - the motion of the beam
moving from the bottom of the image to the top, after it has
drawn a frame.
refresh rate - how many frames are drawn per second. Eye
can see 24 frames per second. TV is 30 Hz, monitors are at
least 60 Hz.
◼ Refresh rate is important, but remember it is different
than your program’s update rate.
◼ Why is higher, better?
 Vector Displays

◼ Unlike CRTs, vector displays have a

single gun that is controlled to
draw lines. Think of having a VERY
FAST drawing pen.
◼ Pros: Diagrams/only draw what
you need
◼ Cons: No fill objects/Slows with
complexity
CRTs (cont.)

◼ Strong electrical fields and high voltage

◼ Very good resolution
◼ Heavy, not flat
Liquid Crystal Displays (LCDs)

◼ Also divided into pixels, but without an electron gun firing

at a screen, LCDs have cells that either allow light to flow
through, or block it.
Liquid Crystal Displays

◼ Liquid crystal displays use small flat chips which change

their transparency properties when a voltage is applied.
◼ LCD elements are arranged in an n x m array call the LCD
matrix
◼ Level of voltage controls gray levels.
◼ LCDs elements do not emit light, use backlights behind the
LCD matrix
 2D Graphics Pipeline

Clipping
Object window to
Object Applying
subset viewport
World Coordinates world window
mapping

Simple 2D Drawing Pipeline

Object
Display Rasterization
Screen coordinates
Rasterization (Scan Conversion)

Rasterisation (or rasterization) is the task of taking an

image described shapes and converting it into series
of pixels, dots or lines, which, when displayed together,
create the image which was represented via shapes)

Viewport
Rasterization
Transformation
Rasterization (Scan Conversion)

◼ Convert high-level geometry description to pixel colors

in the frame buffer
◼ Example: given vertex x,y coordinates determine pixel
colors to draw line
◼ Two ways to create an image:
◼ Scan existing photograph
◼ Procedurally compute values (rendering)

Viewport
Rasterization
Transformation
 Rasterization

◼ A fundamental computer graphics function

◼ Determine the pixels’ colors, illuminations, textures, etc.
◼ Implemented by graphics hardware
◼ Rasterization algorithms
◼ Lines
◼ Circles
◼ Triangles
◼ Polygons
 Rasterization Operations

◼ Drawing lines on the screen

◼ Manipulating pixel maps (pixmaps): copying, scaling,
rotating, etc
◼ Compositing images, defining and modifying regions
◼ Drawing and filling polygons
◼ Aliasing and antialiasing methods
Installing OpenGL

◼ Run: GLinfo2.exe to see your graphic card

capabilities(will tell you what OpenGL version your card
supports and a list of extensions your card supports)
◼ Install Microsoft Visual Studio or your favorite
IDE (Eclipse, Intellij, Netbeans ….)
◼ Install Open GL
◼ Install Glew and Glut
◼ Set project directory settings to link Glut and the
IDE
Installing OpenGL -2

You can get online guidance such as

◼ https://www.absingh.com/opengl/
◼ https://sites.google.com/site/gsucomputergraphics
/educational/set-up-opengl
◼ https://www3.ntu.edu.sg/home/ehchua/programm
ing/opengl/HowTo_OpenGL_C.html

◼ http://cacs.usc.edu/education/cs596/OGL_Setup.p
df
◼ https://content.byui.edu/file/2315e65e-a34a-
48d3-814d-4175a2b74ed5/1/intro/165-opengl-
visualStudio2017.html
◼ http://www.cs.uky.edu/~cheng/cs633/OpenGLInst
allGuideWindows.pdf
◼END of Lecture 1