Computer Graphics 2004

Computer Graphics Lecture notes Copyright Sanjay Goel, JIIT, 2004

Computer Graphics
Sanjay Goel, JIIT, 2004

Course Description

Course Code: CI 041 (2-0-2)
Prerequisite : A. Essential
i. CI 031 - Data Structures
ii. CI 021 - Computer System Organisation
iii. Programming experience of at least 5000 lines in C/C++.
iv. Sufficient familiarity with vector algebra.
B. Desirable
v. CI 023 – Multimedia Laboratory (familiarity with 2D graphics
creation and editing workflow using tools like Illustrator and
Photoshop)
vi. CI 034 – 2D Animation Workshop (familiarity with animation
workflow using tools like Flash / Animo)
Post Courses : Multi-dimensional Data Structures, Advanced Computer
Graphics, Digital Image Processing, Computer Games,
Physics based modeling and simulation,
Multimedia Systems, Visual Computing,
Image based Modeling and Rendering
Objectives

- Broaden the understanding of Computer Science and initiate learning of
Systems Engineering.
- Strengthen higher-level cognitive skills of analysis, creation and evaluation.
- Strengthen ability of data abstraction and problem solving using programming.
- Strengthen ability to identify and define problems and also express their
solutions clearly and precisely.
- Understand concepts, algorithms, and design principles underlying modern
computer graphics.
- Strengthen ability to design and analyse algorithms with a clear focus on
problem domain of image synthesis.
- Gain practical experience in graphics programming.

Learning Outcomes

The students shall develop the basic generic skills to design, implement, evaluate and
reuse data structures and algorithms for digital image synthesis for a broad-based set
of computing problems in various domains.

Method

Teaching in this course is designed to engage the students in active and experiential
learning by taking a problem solving and design-oriented approach with special
emphasis on real world applications. Lectures will be highly interactive and work
oriented. Students will have to work individually as well as in groups inside as well


as outside the class. A large proportion of the course will focus on the design,
analysis, implementation, integration and applications of data structures and
algorithms for digital image synthesis. Students are expected to carry out lot of
design and programming oriented project work. Each student is expected to write
minimum 3000 lines of documented program code as part of this course. Students
are encouraged to learn and use Graphics Libraries like OpenGL for project
implemention. Each student is also expected to do literature survey making use of the
library and web resources (including Digital Libraries) to identify, understand,
summarise and present at least one research paper on science or application of
computer graphics.

Evaluation Scheme
Evaluation scheme is designed to promote and test higher-level thinking skills
through holistic and continuous evaluation and de-emphasis rote learning. Written
exams will be designed and conducted as open book(s), open notes tests. One of the
minor tests may be designed and conducted as a take home test. Evaluation scheme
will have following components:

Minor test 1 15
Minor test 2 15
Tutorials, Self study and home assignments 30
Class exercises and quizzes 15
Major test 40
Laboratory Assignments 30
Implementation Projects and Viva 55
Total 200

Recommended Reference Books:
1. Foley, van Dam, Feiner and Hughes, Computer Graphics
2. Computer Graphics Using OpenGL, by F.S. Hill, Jr.
3. D Hearn and P M Baker, Computer Graphics
4. D F Rogers, Mathematical Elements for Computer Graphics
5. M. Woo et al, The OpenGL Programming Guide
6. J. Hartmen, J. Werneke, The VRML 2.0 Handbook
7. Angel, Interactive Computer Graphics: A Top-Down Approach Using
OpenGL
8. A. Watt, 3D Computer Graphics


Lecture Notes
7.01.04

2hr.

1. CG has picture description as input and picture as output.
2. Science : output = fn (input)
3. Engineering : Required input = fn (desired output)
4. Output picture taxonomy for CG
i. static vs dynamic picture (degree of dynamism)
ii. colour vs B&W (colouredness in the whole spectrum from binary
to true color)
iii. interactive vs non-interactive (degree of interactivity)
iv. realistic vs symbolic (degree of realism)
v. objects vs abstract (degree of abstraction)
vi. geometric objects vs natural objects

5. In class Task: identify some static and b&w picture and describe it in a m/c
readable format. Get your description critiqued by your partner and rewrite
your description.
6. Discussion on graphics.h, initgraph and closegraph functions.
7. Lab Practice assignment : Practice these and also develop competence to use
other functions of graphics.h
8. Design and Programming Assignment No. 1: Develop a description
scheme for encoding a tree description in m/c readable format on a text file.
Create this file. Write a program to read this file and create a tree on the
screen.
9. Solution classes proposed by students :
i. Row major 1/0
ii. List of points for which colour is 1. (assumption : all others are 0)
iii. Vectorised information

14.01.04 ( 2 hr.)

1. Mouse Programming by Ritul
2. Project demos by Ritul, Aditya and Bakul
3. Familiarisation with OpenGL by Anjali Gupta

23.01.04 (2 hr.)

i. static vs dynamic picture (degree of dynamism)
ii. colour vs B&W (colouredness in the whole spectrum from binary to
true color)
iii. interactive vs non-interactive (degree of interactivity)
iv. realistic vs symbolic (degree of realism)
v. objects vs abstract (degree of abstraction)
vi. geometric objects vs natural objects (degree of naturalism)
vii. synthetic vs captured (degree of synthesis)


viii. soundless vs sound (degree of sound capability)

2. Taxonomy of picture drawing techniques
i. Stored
i. Vector
a. Uncompressed
b. Compressed
ii. Raster
a. Uncompressed
b. Compressed
ii. Procedural

3. Case study on procedural drawing of tree by Sidhartha Bakshi.
4. Add dynamism to your tree keeping your original format (raster/ vector/
procedural)
5. Design and Programming Assignment No. 2 (Group Assignment):
Enhance your graphics data encoding scheme to add dynamism to static
graphics. Specifically work with your earlier design for enriching your static
tree with several fluttering symbolic birds of varying sizes, colours, fluttering
speeds, fluttering styles and so on. Consider adding sound(s).
Create some different data files. Write a program to read these files and create
an animation on the screen.
6. Think about the different file storage techniques that may be useful for storing
animations created using tools like Flash and Animo.
7. Discussion on Group and individual projects.

30.01.04 ( 2 hr.)


i. colour vs B&W (colouredness in the whole spectrum from binary
to true color)
ii. soundless vs sound (degree of sound quality)
iii. objectless vs object oriented (object population)
iv. synthetic vs photographed objects (degree of synthesis)
v. realistic vs symbolic objects (degree of realism)
vi. geometric objects vs natural objects (degree of naturalism)
vii. static vs dynamic objects (degree of dynamism)
viii. interactive vs non-interactive objects (degree of interactivity)
ix. passive objects vs reactive objects vs active objects (degree of
behaviour)
x. Single picture vs picture sequence (duration for single picture,
transition event, transition style)

2. Design and Programming Assignment No. 3 (Group Assignment):

A. Design an Game Engine (Scriptor and Player) for children of 4-7 years of
age. Using this tool, the children should be able to create and play simple


animations having some trees and fluttering and flying birds. The initial
requirements of the engine are as follows:

a. Game Scriptor:
i. The scriptor should offer two readymade object templates i.e.
tree and symbolic bird and a collection of bird singing tones.
ii. The users should be able to position any number of objects of
the type of the given templates at any position in different sizes.
The birds should have following optional variable parameters:
a. Colour
b. Fluttering speed
c. Singing tone
d. Flying trajectory
iii. The user should be able to specify the colour of the background.
iv. The graphically inputted script should be stored as a structured
data file.

b. Game Player:
v. It should read the script data file, render the initial static
graphics and start the bird fluttering and flying as per the script.
vi. It should allow the user to activate any flying/fluttering bird to
make it sing in its predefined tone.
vii. It should also allow the user to kill any bird.

B. Write a design story around these basic ideas to develop more interesting
games for the same user group.
C. Start creating an animated Concept map of your Game Engine.

6.2.04 ( 2 hrs.)

1. Demonstration and code analysis of raster image based animation of a flying bird
using three BMP files of three frames in a cycling manner by Abhishek.
2. Discussion on opening BMP files
2.1 It is essentially a row major matrix of Pixel colour codes.
2.2 Be careful about the codes used for the colour. If you just skip the header
information, sometimes you will find that the Colour code in TC is different
from the code in BMP File. Hence your program will show some pixels in
colours different from the display colours by paintbrush.
3. Group Assignment : Find out the details in BMP header and write a program to
interpret the rest of the data in BMP file in the light of header information.
4. Group Assignment : Learn about some vector file format (ils, cdr, dxf, and so
on) supported by Illustrator so that you can use your existing Illustrator graphics
in this course. Write a program to open your existing illustrator files. Limit
yourself to the limited set of most essential features potentially useful for
drawing some objects for your games.
5. Demonstration of Game engine by Pavani.
6. Identification of some main problems in implementing the Game engine project
by each group.


7. Discussion on algorithm design for achieving ‘simultaneous’ rendering of
multiple game objects without using parallel processing or multi-tasking
environment
7.1 The game objects could be visual or aural and their rendering may require
you to sequentially display static stages of the visual object or sequentially
play sections of the sound.
7.2 Let us call these stages and sections as object states and object rendering
should mean iterative and may be cyclic rendering of each object state.
7.3 Achieve ‘simultaneity’ by achieving a well-crafted effective illusion of it
by switching your logic’s attention through different states of different
objects.
7.4 Assuming you have an array of N objects.
7.5 Each object has Si states : i = 1..N
7.6 If the Si for each object is same then you can render as follows:
for statecount = 1 to max
for object-no = 1 to N
render_object-state (object-no, statecount) ;

7.7 If the Si for each object is not same then you can follow one or mix of the
following approaches:
7.7.1 The object cycles can overlap and different states of different objects
may be rendered in the inner loop of above logic :
{
statenumber = fn(objectno, statecount);
render_object-state (object-no, statenumber);
}
7.7.2 The object cycles can have the same legth but some objects do not
do any state rendering in some outer loops
{
render-or-not = fn(objectno, statecount)
if (render-or-not = true)
{
statenumber = fn2 (objectno, statecount)
render_object-state (object-no, statenumber)
}
}
7.8 Our ear is more sensitive to the gaps in in sound so try and adjust the
visual data during the required delays of sound object.

8. Context is the lawful framework within which knowledge and experience occur.
Context is the setting and the rules of the game. Context is the stage on which
this drama unfolds.
9. Group Assignments:
9.1 Design one Game context per group member. For the time being, understand
Game context as object set for developing games.
9.2 Design one story per game context.


9.3 Develop animated concept maps for each story.
9.4 Extend your game engine to offer all your game contexts to the game designers.
9.5 Extend your game engine to create new game contexts using predefined objects.

13.02.04 (2 hr.)

1. Layered Architecture of Graphics Application
a. Applications using Graphics functions of a Graphics Library
b. Graphics Library using basic Graphics functions like putpixel and
so on
c. Hardware/Software for realisation of basic Graphics functions like
putpixel and so on.
2. Common Shape drawing functions : Line, circle, arc, ellipse, rectangle and so
on.
All these shapes can be drawn using the following ideas:
a. It is like cross-stitching
b. On CRT/LCD based computer monitors, we can not draw ‘continuous’
shapes, we can only create good quality illusion of continuity by
creating ‘discrete appproximations’.
c. Try to create an illusion of continuous geometry by ‘selective
illumination’ of ‘chosen’ set of discrete points on the monitor using
following strategy:

Repeat
apply some selection criteria for filtering the points that satisfy the
geometrical constraints

if selected(x,y) putpixel (x,y)

Until enough points are selected

3. This process is called Rasterisation.
4. Good Quality rasterisation for solid line/circle/ellipse/arc/rectangle or any
other curve will be achieved if pixel selection for discrete approximation
through spatial sampling is done at the “highest possible sampling rate” which
is determined by the monitor resolution. In other words, member pixels of any
pair of two nearest illuminated pixels in this discrete approximation are
adjacent to each other in any of the following 8 possible ways shown below
with blue lines.

Repeat


- apply some selection criteria for filtering the points that satisfy the
geometrical constraints
- if selected(x,y) putpixel (x,y)
Until enough points are selected
5. Line is a locus of points that satisfy the equation y = mx +b.
6. Our Options:
a. Find yi(xi) for a required set of appropriately chosen xi for lines having
–1<=m<=1 or xi(yi) for a required set of appropriately chosen for yi for
lines having slope <-1 or >1.
b. Find xi+1(xi,yi) and yi+1(xi,yi) for a required number of N points such
that either xi+1 = xi++ or xi-- for lines having –1<=m<=1 OR yi+1 =
yi++ or yi-- for lines having slope <-1 or >1.
This is called DDA algorithm (Digital Differential Analyser) and it
draws a line as a sequence of small horizontal or vertical steps and on
an average, tries to approximate the required slope.

7. Programming Assignment:
Write and efficient draw-line function using the putpixel function to draw
good quality lines (without unnecessary gaps) in various styles. Write a
program to measure the performance of your draw-line function in lines
per minute by repeatedly calling your function to draw lines between
randomly generated endpoints in random styles on your monitor. Compare
the performance of your function with readymade function of your library.

27.02.04 (2 hr.)

1. Layered Architecture of Graphics Application
a. Applications using Graphics functions of a Graphics Library
b. Graphics Library using basic Graphics functions like putpixel and so
on
c. Hardware/Software for realisation of basic Graphics functions like
putpixel and so on.


.
2. Response of ‘putpixel’ illuminated point on the monitor screen
3. Monitor is usually a CRT based simple system.

Intensity builds and decays slowly in response to electron gun swithing
on/off.

Electron Gun switch status

Photon Photon Output
Intensity

Time


4.

5.

6a. Design issues of a single point temporally continuous dot on a CRT type
bilevel display system:
- A focused electron gun with a switch to fire electrons or not at a certain
switching (refreshing) frequency.
- For an illusion of continuous dot, the dot needs to be refreshed before it
‘disappears’. The image of the refreshed dot gets mixed with the image of
dying dot and the illusion of continuous dot is created.
- The refreshing frequency is a function of decay time of the phosphor and
human vision limitations.
6b. Design issues of a single point temporally blinking dot on a CRT type
bilevel display system:
- The excited phosphor must decay down to the level of ‘blank’, if
refreshing has not been done.
- Engineering Task : To strike a proper balance in the two requirements.
Choose a phosphor with following criteria:
i. ‘Acceptable’ level of Photon output per strike of the gun , to
be determined by the viewing conditions such as viewing
distance, ambient light, required wavelength of the light.
TV monitor is designed for long distance while computer
monitor is designed for short distance viewing.
ii. Decay time (Phosphor must have sufficient persistence)
iii. Maximum blinking rate of the application within human
vision limitations (Phosphor must not persist for longer than
required).
8. Design issue of single linear array of temporally continuous/blinking dots on a
CRT based bilevel display system:
- All dots must get refreshed within each cycle.


- For temporal continuity, Phosphor cells must have sufficient persistent to
allow the refreshing of all other cells between two refreshing excitations.
- For avoiding ghost effect (unwanted persistence resulting in multiple ‘on’
dots at the same time while one is trying to have a illusion of single
moving dot), persistence must be not be longer than time of one refreshing
cycle time (T).
Forward Trace
T x x x x x
cell1

cell2 Very fast Retrace

cell3

cell4

cell5

9. Design issue of 2D array of temporally continuous/blinking dots on a CRT
based bilevel display system:
- All dots must get refreshed within each refresh cycle.
- For temporal continuity, Phosphor cells must have sufficient persistence
to allow the refreshing of all other cells between two refreshing
excitations.
- For avoiding ghost effect (unwanted persistence resulting in multiple ‘on’
dots at the same time while one is trying to have an illusion of single
moving dot in this 2D array), persistence must not be longer than time of
one refreshing cycle time (T).
- Cells are organised as lines of 1D array of cells. All cells on all lines need
to refresh in one refresh cycle.
- Excitation/Refreshing starts at the top left side, scans the first horizontal
line, makes a fast horizontal retrace of reaching the end of the line and
starts scanning the next line. The process continues till all lines get
scanned. Electron gun then makes a vertical retrace to start another refresh
cycle at the top left corner. Hence the top left corner is number as (0,0).

-


10. The aspect ratio (horizontal length : vertical length of the display area) of
computer screen is 4:3; CGA 320 :240;
VGA : 640 : 480; 800 :600; 1024 :768
16.03.04 (1 hr.)

2. Vector monitors: Computer controls the movement as well as firing of the
electron gun. From a limited perspective of interface between computer and
output device, Vector monitors worked almost like the plotters. Computer
sends the X,Y and colour information and the Gun like plotter pen moved to the
desired location. Vector monitors, also referred to by Atari and others as "XY"
or "Quadrascan" monitors, are available in black & white or color.
3. Plotters : In plotter, Pen is given 2d relative movement over the surface of the
paper. This is achieved with the help of two motors independent motors. In
Flatbed plotters the paper is stationary and both the movements are given to
pen. The pen arm moves up or down over the paper with the set boundaries
giving Y movement to the pen and the pen holder moves within the length of
the pen arm and gives X movement to the pen. Select Pen, Pen Up and Pen
Down are realised through required mechnical components that are controlled
by the electronic hardware on the plotter which is under the command of the
plotters firmware which is controlled by the user’s program on computer.

User’s Program using plotter’s vector graphics library
(e.g. HPGL/DMPL)

Plotter’s Firmware

Plotter’s Electronic Circuit

Plotter’s Mechanical Assemblies

The firmware keeps a track of the current location of the pen which set to 0,0
at plotter initialisation. Movement to given X,Y point is achived by
translating the delta X to direction (+/-) degree of rotation of motor
connected to pen holder and similary delta_y to direction (+/-) degree of
rotation of motor connected to pen arm. The speed (degree/sec) and
resolution (minimum degree) of these motors are important distinguishing
factors in this design.


In alternate option of Drum Plotter, the X movement is given to pen and Y
movement is given to paper, which is rotated over a drum with the help of a
another motor. Logical principles remain same.

4. Vector monitors: Vector monitors worked on the same model and point
coordinates & colour code was required to be sent to monitor which had
interpreting hardware/ firmware for creating garphic. The electron guns in the
neck of the tube emit a stream of electrons that bombard the face of the tube that
would hit dead center if not for the deflection magnets on the neck of the tube.
There are two deflection coils. One for horizontal deflection (X) and one for
vertical deflection (Y) of the electron beam. Consider the center of the screen to
be (0,0) volts to the deflection magnets. If you want to move the beam to the
right you put a positive voltage on the horizontal deflection "X" coil (+,0). A
negative voltage moves it to the left. Up and down are accomplished with
positive or negative voltages to the vertical deflection (Y) coil. The third
portion of a vector monitor is what (at least by Atari) is called the "Z" amplifier,
whichcontrols the brightness. There is a "Z" amplifier for each electron gun,
which means that black and white monitors have only one "Z" amp and color
monitors have three. There were more than 30 vector based games made in the
80's. Each monitor had different specs and run at different speeds, making them
incompatible between different gaming hardware. Vector monitors in general
are less reliable than raster monitors.


Raster Monitors : The computer works in synchronisation with the electron gun of
the monitor. Colour monitors have three guns moving simultaneosly and computer
sends HSYNC and VSYNC signals to maintain the synchronised deflection of
electonic beams as per the Video_out signal from the Computer. If the monitor
resolution is 640 x 480 then, the vertical sync signal tells the monitor to start
displaying a New image or frame, and the monitor starts in the upper left corner with
pixel (0,0). The horizontal sync signal tells monitor to refresh another row of 640

.
pixel After 480 rows of pixels are refreshed with 480 horizontal sync signals, a
vertical sync signal resets the monitor to the upper left
corner and the process continues. During the time when pixel data is not being
displayed and the beam is returning to the left column to start another horizontal
scan, the RGB signals should all be set to black color ( all zero ).


Depending on the display quality, there are approx. 240-1280 pixels per row,
approx. 240-1024 pixel per column and approx. 25/30/60 frames per second to
ensure flicker free display. Hence, the the vertical frequency of row per second
is in KHz and horizontal frequency of Pixel per sec is in MHz.

Vertical frequency = f (frame rate, rows per frame)
Hoizontal freqncy = fn(vertical frequency, pixel per row)

Computer does not have to send pixel coordinate information to the monitor, it
only send the colour information for ordered set of pixels in a predefined
sequence such that

X = f1 (delta_T, rows per sec, pixels per row)
Y = f2 (delta_T, rows per sec, pixels per row)

Where, delta_T is the time elapsed since the beginning of scanning. Hence, for
using monitor as a display device, the computer has to generate and send the
following :

a. R value for the current pixel
b. G value for the current pixel
c. B value for the current pixel
d. Hsync
e. Vsync

This is very high bandwidth communication. Depending on the monitor type
(digital/analog) different encoding options (with suitable connector type) are
used for connecting computer with monitor. DB15 Type for VGA/SVGA for
connecting to Analog monitors.

FEMALE connector at the videocard MALE connector at the monitor cable


PIN Details

Pin Name Dir Description
1 RED Red Video (75 ohm, 0.7 V p-p)
2 GREEN Green Video (75 ohm, 0.7 V p-p)
3 BLUE Blue Video (75 ohm, 0.7 V p-p)
4 ID2 Monitor ID Bit 2
5 GND Ground
6 RGND Red Ground
7 GGND Green Ground
8 BGND Blue Ground
9 KEY - Key (No pin)
10 SGND Sync Ground
11 ID0 Monitor ID Bit 0
12 ID1 or SDA Monitor ID Bit 1
HSYNC or Horizontal Sync (or Composite
13
CSYNC Sync)
14 VSYNC Vertical Sync
15 ID3 or SCL Monitor ID Bit 3

6. Study Assignment : Find out different type of display connectors and cables
and their salient features for connecting different kind of display monitors
{CRT (Analog, Digital) , LCD, and so on} .

19.03.04 (2 hr.)

1. Game demonstration by Siddharth Jain, Esha and Bakul.
3. Response to ‘putpixel’ Colour signals RGB at appropriate time
4. If pixel rate is HF (Horizontal Frenqiency)
i.e. time gap t between two horizontally neighbour pixel = 1/HF,
we need a subsystem to convert 2D spatial signal of colour (a function of x,y)
into a 1D temporal signal and place the signal at appropriate pins of the
connector on video board as colour(a function of T) and colourcode for pixel
(x=0,y=0) is sent at T = 0 then colourcode for (x=1,y=0) is required to be sent
at t, for (x=2,y=0) at 2t, and so on. The process is required to continuously
repeated frame after frame with a particular frame rate.
5. This task is carried out by DPU (Display Processor Unit) which reads the
digital colour codes in an ordered manners, converts it into analog version and
output the signal on video port for controlling analog monitor.
6. The colour codes for every point are stored in a reserved location in the address
space. This portion of the RAM is called Frame Buffer /Video RAM.
7. Putpixel(x,y) is realised by making CPU write required colour code at memory
location corresponding to (x,y) using Direct addressing mechnism.
8. Getpixel(x,y) is realised by making CPU read exsiting value of colour code at
memory location corresponding to (x,y) using Direct addressing mechnism.


9. For Colour display, the colour code is a structure (R,G,B) rather than a single
value.
10. Animation can be created using extra video pages through set-active-page and
set-visual-page constructs. Each slide of the visual story board is constructed
and stored on a different page. Generally, the slide content is not displayed
during construction and constructed graphics of a slide is displayed while the
CPU is directed to construct the next slide on the nonvisual(active) page.
Example, following two shapes are constructed on two pages and these pages
alternately become the visual pages. This creates an illusion of a rotating hand.

Slide 0 on page 0 Slide 1 on page 1

11. These extra pages can also be used to store temporary graphical objects without
showing these objects on the screen. These objects can be used by constructs
like Getpixel for constructing the some graphics on the visual page. Example,
you can store some text on nonvisual page, scan this page for nonbackground
pixels, display a pattern at a mapping location in the visual page. Another
example, you can store a trajectory in nonvisual page, on the visual page, the
moving objects is displayed at different points of this trajectory without
shopwing the trajectory.
12. These extra pages require extra Video RAM. Set-active-page establishes the
connection of CPU with the chosen page, set-visual-page connects DPU with the
chosen frame buffer.

12. Graphics Pipeline

a. Putpixel
Program calls Putpixel (randomly) {image is a 2D digital spatial signal in 2D
logical space }

CPU writes (randomly) colour code in the chosen page (area) of the frame
buffer at appropriate location through direct addressing {Now image is a 2D
digital spatial signal that is mapped on 1D Array of Physical RAM}

DPU reads it (sequentially) and gives it to DAC {Now image is digital
temporal signal}

DAC converts it into analog value and put it on the connector at required time
{Now Image is an analog temporal signal}

Cable picks up the signal through its connector and carries the signal to
Monitor. {Now Image is an analog temporal signal}


Monitor reads is and creates illuminated point on the monitor screen. {Now
Image is 2D spatial signal on Physical screen}

b. Getpixel
Program calls getpixel (randomly) {image is a 2D digital spatial signal in 2D
logical space }

CPU read (randomly) colour code from the chosen page (area) of the frame
buffer at appropriate location through direct addressing {Now image is a 2D
digital spatial signal that is mapped on 1D Array of Physical RAM}

13. Assignment : Examine the design options of creating large size frame buffers
without using much of address space.

26.03.04 (2 hr.)

1. Program demonstrations by Vikas, Ritul and Lomesh.
2. Review of Graphics Pipeline for Puitpixel and getpixel.

3. The original PC design was based upon the capabilities of the 8086/8088, which
allowed for only 1 MB of memory, of which a small range (128K: A0000 to
BFFFF) was allotted for graphics memory. Hence, several framebuffer design
approaches have been developed to enable the CPU to address large frame
buffer with small address space.
4. Frame Buffer design approaches : Packed Vs. Planer.
5. Planer Frame Buffer : CPU assigns only one bit of address space to every
pixel rather than one full or more bytes. It is parallely connected to n memory
blocks (called planes) for n bit pixels. For example, if 24 bit pixels are needed
to achieve 256 shades of reds, greens and also blues; then 24 memory blocks
(planes) will be parallely connected to CPU. Each of this plane will have only
one of the bits (0-23) of the 24 bit colour code for every pixel in the frame
buffer. Hence the address space requirement for frame buffer is made
independent of the colour resolution. It only depends on the spatial resolution.
Through appropriate in-between circuitry (to be discussed once again) on the
video controller card, CPU simultaneously accesses these meomory blocks (on
the video controller card)) for reading/writing 1 bit in each plane during
getpixel/putpixel.Uisng this scheme, 640x 480 x 256 colours will require only
(640 x 480)/8 of address space rather than (640 x 480). Though the framebuffer


will still need 640 x 480 byte of video memory. This means 8 pixels share the
same address at the level of the byte addressing. The exact pixel adressing is
achieved by extracting/changing the required bit . Hence, (x,y) coordinates of
the pixel are mapped to Byte offset and Bit number at the time of putpixel
and getpixel.

Block Diagram showing parts and interface for a generic Display
controller for analog monitor using planer frame buffer

Colour Code bits of a pixel
0123 n
Plane 0
CPU
Address Bus
Plane 1

Plane 2

Data Bus Plane 3

CLUT D Analog
Colour Code bits of a pixel A
(Optional) Monitor
C
Plane n

All the planes of the framebuffer share the same address space and get
simultaneously activated. However different bits of the colourcode of a pixel
go to (or get pickedup) corresponding planes in the frame buffer. Each
plane has one bit for every pixel. The number of planes equal the number of
bits per pixel.

6. Colour Look Up Table (CLUT): When this is used, the framebuffer stores the
colour number rather than the colour code. The colour number from the
framebuffer is used to read the corresponding colour code in the colour look up
table. Setcolorpallete/getcolorpallet functions in TurboC give the access to this
look up table. If we need to display only 16 simultaneous colours on the screen
we need only 16 entries in the Colour Look up Table. Hence the framebuffer
needs to to only 4 bit per pixel in order to give colour number (0..15). The
corresponding colour code in the CLUT can have much larger bits. In VGA, it
is 6 bit for Red,Green and Blue each making 18 bit colour code. Hence, any 16
out of 218 colours can be simultaneously created on monitor. This helps in
economising the framebuffer size at the cost of large number of simulatneous
colours. Indexed BMP file format also corresponds to this scheme.


7. Creating Animation using CLUT manipulation : If we need very fast
animation of otherwise complex shapes without many colours we can use
CLUT for creating animation effect suing following strategy:

i. Model the animation as a slide show in different slides of the object
keeping the background as it is.

Slide 0 Slide 1 Slide 2 Slide 3



Slide 12 Slide 13 Slide 14

ii. In the above slide show, the object (it may have very complex shape
within the constrain that it does not require more colours) moves
along the periphery and then towards the centre. There are only two
colours , one for the background and one for the object.
iii. Initialise the CLUT as follows:

INDEX RED GREEN BLUE
0 255 255 0
1 255 255 0
2 255 255 0
3 255 255 0
4 255 255 0


5 255 255 0
6 255 255 0
7 255 255 0
8 255 255 0
9 255 255 0
10 255 255 0
11 255 255 0
12 255 255 0
13 255 255 0
14 255 255 0
15 255 255 0

iv. Draw object at all the non-overlapping 15 positions using different
colour index (1-15). No object will be visible on the screen as all
colours are mapped to background colour only.

In this figure each colour represents a colour number in the CLUT.
It is not the actual colour. On the screen only yellow colour will be
visible at every point on the screen as the colour codes for every
colour number is YELLOW.

v. Now start changing the CLUT entries in such a manner that in the
beginning only entry number 1 is given RED colour keeping all other
as YELLOW only. Then after a delay entry number 2 is give RED
code while all other 1-15 are made YELLOW. This is continued in
this manner by making onle one entry in the CLUT correspond to
RED while all others are YELLOW. We get an illusion of moving
RED ball as we see only one (at non overlapping different positions)
at a time.

CLUT for selective display of Slide 1

0 255 255 0
1 255 0 0
2 255 255 0
3 255 255 0
4 255 255 0
5 255 255 0
6 255 255 0


7 255 255 0
8 255 255 0
9 255 255 0
10 255 255 0
11 255 255 0
12 255 255 0
13 255 255 0
14 255 255 0
15 255 255 0


0 255 255 0
1 255 255 0
2 255 0 0
3 255 255 0
4 255 255 0
5 255 255 0
6 255 255 0
7 255 255 0
8 255 255 0
9 255 255 0
10 255 255 0
11 255 255 0
12 255 255 0
13 255 255 0
14 255 255 0
15 255 255 0


0 255 255 0
1 255 255 0
2 255 255 0
3 255 0 0
4 255 255 0
5 255 255 0
6 255 255 0
7 255 255 0
8 255 255 0
9 255 255 0
10 255 255 0
11 255 255 0
12 255 255 0
13 255 255 0


14 255 255 0
15 255 255 0


0 255 255 0
1 255 255 0
2 255 255 0
3 255 255 0
4 255 0 0
5 255 255 0
6 255 255 0
7 255 255 0
8 255 255 0
9 255 255 0
10 255 255 0
11 255 255 0
12 255 255 0
13 255 255 0
14 255 255 0
15 255 255 0

This process continues in the similar manner. Hence, this scheme allows us
to first create all the slides (in invisible mode) and then make their content
visible selectively just by changing two entries in the CLUT.

16.04.04 (2 hr.)

1. In order to relieve CPU from doing graphics processing, GPU, (Graphics
Processing Unit) a dedicated processor is integrated into the system. The CPU does
not have to execute many graphics algorithms in detail as it uses GPU as a slave
processor that has its own RAM and ROM and works on behalf of the CPU.
Standard Graphics operations like line, circle, area fill, polygon and many others
are available to the CPU as GPU commands. Hence CPU can pay more attentions
to other parts of the application like simulation, database retrieval and so on.


Block Diagram showing parts and interface for a generic Display
controller (with Graphics Accelerator) for analog monitor using
planer frame buffer

Plane 0
CPU
Address Bus
Plane 1

GPU Plane 2

Plane 3

Data Bus

CLUT D Analog
(Optional) A Monitor
C

Plane n

2. Rovolving an object around a point along the circumference of a circle:
Two options : Object may be defined as a raster (Bitmap) or as a vector
image. Revolving Raster based object will be computationally more expensive
as it would require trigonometric operations for every point in the raster.
Vector definitions are more suitable for animation pupose because only the
end points of lines need to be revolved and lines can be drawn between new
endpoints using simple linbe function.
3. The revolution is obtained by drawing realigned object at new positions on the
circumference of the circle. In order to achieve illusion of smooth movement,
these positions should be as close as possible . If the object is a simple dot,
you get a circular movement of a dot usinf folowing formulation:

for (θ :=0 , θ < 2 Π, θ = θ + ∆θ)
{draw dot;
delay;
erase dot }

4. What is the ideal value of ∆θ ?
The number of steps in which revolution should be completed α r, 1/∆θ


∆θ α (object width) ;
5. For a dot, the object width = 1 pixel
We need to place the dot at 2 Π r pixel positions for continuous and
smooth movement thru an angular movement of 2 Π.
Hence, in one step, ∆θ = 1/r
6. For wider objects, we can increase ∆θ to some extent without any visible
difference in smoothness of the movement.
8. Assignments :
Study Assignment (Group Project) : Find out the details of the API for a
GPU.
Programming Assignment (Individual Assignment) :
Write a program to display a revolving object (e.g. bird,man and so on) along
the circumference of a circle. The circle’s centre and radius should be allowed
to be specified by the user. Define your data structucture and algorithm such
that the same program can be used to revolve different kind of objects with
different speed. Please pick up some objects from your ongoing games.
Members of the same group should revolve different objects. If possible,
incorporate some kind of revolution in your game story.

23.04.04 (2 hr.)

1. Geometrc Operations like Translation, Rotation, Scaling, Shear on graphical
objects.
2. Comparison of the algorithmic complexity of performing these operations on
raster Vs vector definitions of graphical objects.
3. Usually vector definitions will be more efficient.
4. Data Structure for modeling vector based graphics :
i. Scene Description Table : List of Objects with geometric dispplay
parameters
Object Basic Geometric display parameters
No Object Position Orientation Size Shear
id parameters to parameters parameters parameters
specify the with respect to with respect with respect
position of the basic shape to the basic to the basic
origin of the definition shape shape
basic shape {Axis of definition definition
definition rotation, Angle { Sx,Sy,Sz} {Shx,Shy,Shz}
{X,Y,Z} of rotation}
1 A
2 B
3 A
4 A
5 D

Notice that any basic shape may be reused several time for creating many
objects in a scene by varying its one or more geometric parameters.

ii. Object shape description : Description of the basic shape of every vector
object


Basic Object Basic Shape description using the vector primitives
id
A L P1, P2; L P1,P3; L P2,P4….., ;C P10,R, A P10,R2, θ1,θ2;....
B C P1, R1
C

The above example uses a vocabulary which is to be interpreted as
follows:
L indicates a line between two points
C indicated a circle at given centre and or given radius
A indicates an arc at a given centre, of a given radius and between
two angles
and so on…

Different Vocabulary may be followed by different systems.

iii. Vertex List : coordinates of every vertex in the basic shape.

Basic Object id Vertex Coordinates with respect to the
No. local coordinate system of the
given object i.e. there need not be
any relationship between the
vertices of object A and Object B
(X,Y,Z)
A P1 (0,0,0)
P2 (10,5,6)
… ..
B P1 (0,0,0)

5. Alternatively, if the objects are defined using polygonal faces (Wire Mesh
Modeling) only, the basic shape description can be changed as follows:

i. Object description : List of Polygonal faces that define an object.
Basic Basic Shape description using the
Object Polygonal Face ids.
id
A F1, F2, F3, F5, F6
B F1, F2, F3, F4
C


ii. Face List : List of edges that define a polygonal face

Basic Polygonal List of edge-ids that define the
Object id face id polygonal Face
A F1 E1,E2,E3,E4
F2 E1,E5,E6
F3 E2,E3,E4,E7,E8

iii. Edge List : List of Vertices that define an Edge.

Basic Object Edge id Vertices
id
A E1 P1, P2
E2 P2,P3
E3 P3,P4

The Scence dscription and Vertex List is used as earlier. The graphics
database can be created on the above principles by increasing or reducing
redundancy as per the choice of designers. Different systems use different kind of
adaptation of this basic model.

5. Geometric Transformation of Vectorised Objects: Just Transform the
Vertex list using appropriate geometric parameters as per the Scene
description table and run the process using other lists to render the graphics.
The Scene Description Table itself may be continuously updated by another
process.
6. The geometric Transformations can be modeled as follows:
P’ = f (P, Geometric display parameters);
Where P and P’ are vectors (X,Y,Z) and f is a linear function.
Simple geometric transformation have following formulations:
Translation : P’x = Px + δX;
P’y = Py + δY
P’z = Pz + δZ
Scaling about origin :
P’x = Sx. Px
P’y = Sy. Py
P’z = Sz. Pz
Shear :
P’x = Px + Sh1.Py + Sh2 Pz
P’y = Py + Sh3.Px + Sh4 Pz
P’z = Pz + Sh5.Px + Sh6 Py
Rotation about Z axis :
P’x = Cosθ Px - Sinθ Py
P’y = Sinθ.Px + Cosθ Py
P’z = Pz


More complex linear rigid body geometric transformations can be formulated
as a series of these basic transformations.

P’x = a Px + b Py + c Pz + d
P’y = e Px + f Py + g Pz + h
P’z = i Px + j Py + j Pz + k

These Linear Transformations are called Affine Transformations. They
preserve the lines and the parallelism amongst parallel lines.

7. These transformations can be represented as matrices using homogeneous
coordinates where (Px, Py, Pz) is represented as (Px-w, Py-w, Pz-w, w). w
can be any scalar with following interpretaion:
Px = Px-w/w
Py = Py-w/w
Pz = Pz-w/w
Use w= 1.
8. [P’] = [T] [P] where, [P] and [P’] are column matrices representing
homogeneous represention of P and P’ as (Px, Py, ’z, 1) and (P’x, P’y, P’z, 1)
T is 4x 4 matix representing affine tranformations as {(a,b,c,d), (e,f,g,h),
(i,j,k,l), (0,0,0,1)}
9. The advantage of homogeneous representation is in its power of representing
all linear transformation including translation as a matrix.
10. Complex Transformation that are caused by a series of several siomple
transformation can be modeled as a single matrix by multiplying all the
matrices in correct order.
11. T = T3 T2 T1 means First apply T1, then apply T2 then T3. This composite
result can simply be obtained by multiplying the point column matrix with T
as follows:
[P’] = T1 [P]
[P’’] = T2 [P’]
[P’’’] = T3 [P’’]
This process can be simplified as follows:
T = [T3 ][T2 ][T1]
[P’’’] = [T ][P]

12. For transforming object, Create a matrics of the vertices to be tranformed out
vertex list, by creating a column for every vertex using homomgeneous
representation [P1 P2 P3…..Pn] where each P is a column of 4 elements
{Px,Py,Px,1}.
13. Multiply this matrix with Geometric Transformation Matrix to get transformed
vertices as follows:
[P’1 P’2 P’3…..P’n] = [T] [P1 P2 P3…..Pn];
14. Use various lists described in 4 above to render tranformed object.

30.04.04 (2 hrs.)

1. Demonstrations by Abhishek Sikdar, Ankit Dalmia, Ankit Chaturvedi.
2. Projections: It is a way of dimension reduction. Projects are created to create
2D image of 3D point. Hence a point (x,y,z,1) is converted as (x’y’,0,1) or


(x’,0,z’,1) or (o,y’,z’1) and is displayed at (x”,y”) on the screen. Where x”
and y” are direction cosines with respect to screen coordinate system, while
x, y, z are direction cosines with respect to world coordinates and x’, y’ and
z’ are direction cosines on the projection plane with respect to world
coordinates. Parallel and Perspective projections are important types of
projections. There are other types of projection as well for specific
applications.
3. Parallel Projection : Top view (Plan, projection on x-y plane), Front view
(elevation, projection on xz plane) and Side view (projection on yz plane)
are main sub types of parallel projections. Any plane can be used to project
all the ‘world points’ using parallel projectors that are orthogonal to
‘projection plane’ and do not have a finite ‘centre of projection’. The content
of projection plane is then displayed on the screen. Parallel lines in all
orientations remain parallel. All lines perpendicular to the projection plane
reduce to points.

If z axis represents the height then,
Top view :
x” = f (x’ = x);
y” = f (y’ = y);
z’ = 0;
w’ = w = 1;
Elevation :
x” = f (x’ = x);
y’ = 0
y” = f(z’ = z);
w’ = w = 1;
Side View :
x’ = 0;
x” = f(y’ = y);
y” = f(z’ = z);
w’ = w = 1;
All these transformations ( sets of 4 linear equations) can be easily written
as matrices that can be concatanated with other geometric transformation
matrices and the resultant matrix can be used to find the screen projection of
all the points even when they are continuously undergoing some
geometrically transformed points just with one matrix multiplication
operation. The arithmatic operations can be reduced by taking advantage of
the fact that many entries in the matrix will be zero.

4. Perspective projection : The projectors are not orthogonal to projection
plane. They meet at a finite centre of projection (can be considered as the
position of eye/synthetic camera).

If the projection is taken on X,Y plane and the centre of projection is
assumed to be at (0,0,-E,1; where E is positive number) with respect to the
homogeneous world coordination system. All the points in the world
(x,y,z,1) need to to projected at XY plane such that the projectors meet at
centre of projection casting the projection of every point on XY plane.


P2 (x2,y2,z2)
Y axis P1(x1,y1z1)

P1’
P2’ X axis
(0,0,-E1)

C.P. Z axis

Using similar triangle, the projections of P1 and P2 can be found on XY
plane as P1’ and P2’.

x1’ / x1 = E / (z1 + E);
y1’ / y1 = E / (z1 + E) ;
z1’ = 0
x2’ / x2 = E / (z1 + E);
y2’ / y2 = E / (z1 + E) ;
z2’ = 0

This is simplified as ;
x’ = x / ((z/E) + 1)
y’ = y / ((z/E) + 1)
z’ = 0;
The denominator can be treated as w’ in homogenous coordinate
representaion where;
w’ = ((z/E) + 1).

The set of these 4 linear equations cane written as a matrix that can be used as
earlier projection matrices giving more realistic imagery on computer screen.

5. Z Buffer Algorithm: It is used for displaying a set of of planer faces on 2D
screen. The colour of each point on projection plane (x’,y’) is to be set as the
colour of the corresponding point (x,y,z) on nearest face along the depth of the
world. The depth is taken along z axis as above

The vertices of each Planer faces can be used to find out a,b,c,d parameters of
the normal of plane as ax + by + cz + d = 0.
Hence,
z = - (ax +by+d)/c
hence ,
for a given planer face, this can used to more effciently compute
the z values using already stored z of neighbours.
zx+1,y = zx,y – a/c
zx,y+1 = zx,y – b/c


We maintain a buffer (in software or in hardware of some graphics
accelerators) to store the nearest z value for every x’,y’.

Algorithm works as follows:

1. Apply the geometric and perspective transformations to all the vertices and
get new plane parameters.

2. For x’ = 0 to max-x’
For y’ = 0 to max-y’
{
Initialise z-min (x’,y’) to a very large value (more than the largest depth) ;
Initialise the colour(x’,y’) to the colour of background.
}

For facenumber= 0 to max-faces
For x’ = 0 to max-x’
For y’ = 0 to max-y’
{
If (x’,y’) is inside currently chosen face
{
Find z as depth of the face from this pont ;
If z < z-min (x’,y’)
{
z-min (x’,y’) = z
colour (x’,y’) = colour (x,y,z)
}
}

07.05.04 (2 hrs.)

1. Window-viewport tranformation.
2. Clipping a ploygon with rectangle
3. Clipping with arbitrary shaped (even concave) polygons.
4. Inside test.
5. Flood filling by supplying a seed point inside the region to be coloured :
Recursive, Stack based and Queue based algorithms.
6. Surface of revolution (e.g. sphere, flask and so on) and Lofting for
modelling of 3d geometric objects.
7. Applying interpolation and approximation (learnt in Numerical Analysis
course) for smooth 2d and 3d curves.

Computer Graphics 2004

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Computer Graphics 2004

Ähnlich wie Computer Graphics 2004 (20)

Mehr von Sanjay Goel

Mehr von Sanjay Goel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Computer Graphics 2004