Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Computer graphics - Rilmawan Amsir (A11CS2006)

No description
by

rilmawan amsir

on 27 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Computer graphics - Rilmawan Amsir (A11CS2006)

Introduction
Input & Output Devices of Computer Graphics
Meet OpenGL
2d Transformation
1. Translate
2. Rotate
3. Scalling

Fundamental of Computer Graphics
Prepared by
Rilmawan Amsir A11CS2006

What is Computer Graphics ?
Processing real world object with certain algorithm into computer for duplication and transformation into graphics in order to extend human capabilities.
OpenGl resources
http://www.staff.blog.utm.my/shahrizal
http://www.lighthouse3d.com/tutorials/glut-tutorial/
http://www.songho.ca/opengl/index.html
http://www.opengl.org/
http://nehe.gamedev.net/tutorial/lessons_01__05/22004/
Sample output from all code
Computer Graphics input/output
Input
output
Text

Image
image text

Computer graphic Virtualize Data Processing
Image Processing
Computer Vision
Additional function
Computer graphics are graphics created using computers and the representation of image data by a computer specifically with help from specialized graphic hardware and software.

Interactive Computer Graphics
user control content, structure and appearance of object and their displayed images via rapid feedback.
In short, developer gives control for user to interact with system, in meaning user can control the input to get desirable output.
Realtime Computer Graphics
Real-time computer graphics is the subfield of computer graphics focused on producing and analyzing images in real time.
Mostly used in games. Whenever it comes, the system must be 100% accurate & 100% all the time.
example : (CG real time waterfall by Lumion)
example : Final Fantasy VI : The Interactive CG Game
Hierarchical modeling
The computer will be of no use unless it is able to communicate with the outside world. Input/Output devices are required for users to communicate with the computer
Input
Output
Display system
Line Algorithm
Digital Diffrential Analyzer (DDA)
Bresenham
CRT ?
Raster CRT
Random CRT
As a software interface for graphics hardware, OpenGL's main purpose is to render two- and three-dimensional objects into a frame buffer. These objects are described as sequences of vertices (which define geometric objects) or pixels (which define images). OpenGL performs several processing steps on this data to convert it to pixels to form the final desired image in the frame buffer.
Introduction
void main (int argc , char** argv)
{
glutInit(&argc,argv); // initialize the GLUT library and negotiate
a session with the window system.
glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB);
// display mode for Bit mask to select a single buffered window
and An alias for GLUT_RGBA.
glutInitWindowPosition(50,50); // intial window position
glutInitWindowSize(windowWidth,windowHeight); // define window size
glutCreateWindow ("Tutorial 3 (mouse point)"); // title name
initialize(); // calling initialize function
glutMouseFunc(mousePlotPoint); // call mouse plot fucntion
glutDisplayFunc(displayFunc); // call display function
glutReshapeFunc(reshapeFunc);

//Create sub menu
subMenuMode = glutCreateMenu (mode);
glutAddMenuEntry ("Translate",1); // add menu entry
glutAddMenuEntry ("Rotate",2);
// Create menu
glutCreateMenu(option); // create menu option
glutAddSubMenu ("Polygon Mode", subMenuMode); // add sub menu
glutAddMenuEntry("Draw line using mouse input",1);
glutAddMenuEntry("Draw line using mouse input",2);
glutAddMenuEntry("Draw line using mouse input",3);;
glutAddMenuEntry("Exit",4);
// Attact menu to right button
glutAttachMenu(GLUT_RIGHT_BUTTON);
glutKeyboardFunc(normalKey); //Normal keyboard input
glutSpecialFunc(specialKey); //Special keyboard input
glutMainLoop(); // enters the GLUT event processing loop
#include <GL/glut.h>
#include <math.h>
//winsize

GLsizei windowWidth = 800, windowHeight = 640;



void initialize(void)
{
glClearColor(0.0,000,0.0,1.0);
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0,200.0,0.0,150.0);
}

void displayFunc(void)
{
glClear(GL_COLOR_BUFFER_BIT);
for (int a = 1 ; a < 6 ; a++)
{
glPointSize(a*10.20);
glColor3f(0.4,0.7,0.4);
glBegin(GL_POINTS);
glVertex2f( (a+1)*100,200);
glEnd();
}
glFlush();
}
void reshapeFunc(GLint newWidth,GLint newHeight)
{
glViewport (0,0,newWidth,newHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,GLdouble (newWidth), 0.0, GLdouble(newHeight));
windowWidth = newWidth;
windowHeight=newHeight;
}

R = 253 / 255
G = 165 / 255
B = 45/255
glColor3f(0.99,0.64,0.17);
Pseudo chart :
Pseudo chart :
void mousePlotPoint (GLint button, GLint action, GLint xMouse, GLint yMouse) // header for mouse point
{
if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN) // condition for determine coordinate left click value for end point
{
X= xMouse;
Y= windowHeight-yMouse;
glBegin(GL_POINTS);
glVertex2f(X,Y);
glEnd();
}
}


void option(GLint selectedOption) // header for option menu
{
options = selectedOption; // assign argument into local variable
switch (selectedOption) // switch method
{
case 1 : options =1; // case 1, assign value to option equal to 1
break;
case 2 : options =2;
break;
case 3 : options =3;
break;
case 4 : options = 4;
break;
}
glutPostRedisplay(); // function to redisplayed iteratively through glutmainloop
}


void mode(GLint selectedOption) // header mode function
{
modeoptions = selectedOption;
switch (selectedOption)
{
case 1 : modeoptions =1;
break;
case 2 : modeoptions =2;
break;
}
// glutPostRedisplay();
}
It is a vacuum tube
◦Evacuated glass which is large, deep, heavy
CRT consists of:


1.Electron gun

2.Electron beam

3.Focusing Coils

4.Deflection Coils

5.Anode Connection

6.Shadow mask

7.Phosphor layer

8.Close-up of the phosphor coated inner side of the screen
How it works ?
Frame Buffer ?


A Framebuffer (or sometimes Framestore) is a video output device that drives a video display from a memory buffer containing a complete frame of data
consist of color of output, either monochrome (Black and white) or color
calculations
Let say we have :
resolution : 1024 x 768
color depth : 8
"Buffer size ?" =
1024 X 768 X 8 = 6,291,456 bit / 8
= 786432 byte / 1024
= 768 Kbyte / 1024
= 0.75 Mbyte
Resolution : the size of window or display
example : 1024 X 768, the display contain
1024 pixel(dot) width and 768 pixel height.
Color Depth : Color depth or bit depth is either the number of bits used to indicate the color of a single pixel. example 1 bit contains black or white. the larger
the many color it gets.


Aspect ratio of 4/3 means that:
A horizontal line with length 4-points is equal to a vertical line with length 3-point.
Line length is measured with any physical units such as centimeters.
Aspect Ratio
Flicker: is the visible fading in the picture.
Refresh rate: is the number of times per seconds
the picture is drawn again

To avoid flicker, refresh rate should be more
than 50Hz (60-80Hz acceptable).
In order to refresh the picture, we need to store
the picture in the refresh buffer ( frame buffer).
Refresh the picture means the electron beam needs
to scan the entire screen.
Drawbacks
Quality of images depends on :

1.◦Resolution: total number of pixels.
◦Amount of bits per pixels (number of colors).

2.Raster images cannot be scaledto higher resolution without loss of apparent quality.
Random scan–picture can be drawn and refreshed by a random-scan in any order.
It has higher resolution than the raster system.
It produces smoother line than raster system.
Advantages
DDA algorithm is an incremental scan conversion method. The characteristic of the DDA algorithm is to take unit steps along one coordinate and compute the corresponding values along the other coordinate. The unit steps are always along the coordinate of greatest change, e.g. if dx = 10 and dy = 5, then we would take unit steps along x and compute the steps along y
a
b
M =
if (m < 1)
if (m > 1)
Y2 - Y1
b =
X2 - X1
a =
while (X1 != X2)
do
Xk++
Yk+= M
end
while (X1 != X2)
do
Yk++
Xk += M
end
example : Start Point = (0,0)
End Point = (6,4)
M =
4 / 6 = 2/3
k
X
Y
M
2/3
2/3
2/3
2/3
2/3
2/3
2/3
0
1
2
3
4
5
6
0
1
2
3
4
5
6
0
2/3
4/3
6/3
8/3
10/3
12/3
= 1
= 2
= 2
= 3
= 4
1/3
2/3
1/3
example : Start Point = (0,2)
End Point = (3,7)
M =
5 / 3 = 1
k
X
Y
M
5/3
5/3
5/3
5/3
5/3
5/3
0
5/3
10/3
15/3
20/3
25/3

0
1
2
3
4
5

2
3
4
5
6
7


1/3
1
3
5
6
8
1/3
2/3
1/3
1/3
Transformation is Geometrical change of object from current to modified.
Why Transform ?
Manipulate the initially created object ad display the modified object without having to redraw.
What is transformation ?
2 ways to transform object
a. Object transformation
Alter the coordinates descriptions an object Translation, rotation, scaling etc.
Coordinate system unchanged
b. Coordinate Transformation
Produce a Different coordinate Tranformation
Matrix Math :
The two matrices must be the same size, i.e. the rows must match in size, and the columns must match in size.

Example: a matrix with 3 rows and 5 columns can be added to another matrix of 3 rows and 5 columns.
But it could not be added to a matrix with 3 rows and 4 columns (the columns don't match in size)
Ordering its affect result . Example a + b = c. but b + a != c. same goes with multiplication.
Homogenous coordinates
The fact that all the points along each line can be mapped
back to the same point in 2D gives this coordinate system its
name
We can always map back to the original 2D point by dividing
by the last coordinate
(15, 6, 3) = (15/3, 6/3, 3/3).
= (5,2,1) or(5,2)
(10, 5, 2) = (10/2, 5/2, 2/2).
= (5,2.5,1)
Rule
we always got 'a' row size and 'b' column size of matrix in example above we got 3('a' row) X 2 ('b' column) matrix.
the row in matrix a must be same size with column in matrix b. in short :

2 3 5 5 2 3
5 4 6 6 5 4
OK
NOT OK
X
X
There are several input devices to do data entry in computer graphics. Most common type of input device are pointing (mouse), scanning(scanner), etc.
Mouse
Touch screen
Light Pen
Graphics Tablet
Scanner
Bar-code readers
Magnetic Entry
Voice-Input Devices
An output device is any peripheral device that converts machine-readable information into people-readable form such as a monitor, printer, plotter and voice output device
A printer is an output device that produces a hard copy of data. The resolution of printer output is expressed as DPI. Printers can be classified into different types in several ways. .
A monitor is a screen used to display the output. Images are represented on monitors by individual dots called pixels. A pixel is the smallest unit on the screen that can be turned on and off or made different shades. later we are going to CRT. but now here is
Flat Panel Display.
Display System
Printers


A display technology that creates characters by means of reflected light and is commonly used in digital watches and laptop computers. LCDs replaced LEDs (light emitting diodes) because LCDs use less power
Liquid-Crystal Displays (LCDs)
Backlit LCDs: This is a type of LCD display having its own light source provided from the back of the screen. The backlit makes the background brighter and clear.

Active Matrix LCDs: This is an LCD display technique in which every dot on the screen has a transistor to control it more accurately. This uses a transistor for each monochrome or each red, green and blue dot. It provides better contrast, speeds up screen refresh and reduces motion smearing.

This is also called a gas panel or a plasma panel and is another flat screen technology. A plasma panel contains a grid of electrodes in a flat, gas filled panel. The image can persist for a long time without refreshing in this panel. The disadvantages of the gas plasma displays are that they must use AC power and cannot show sharp contrast.
Gas Plasma Displays

A flat panel display technology that actively emits light at each pixel when it is electronic charged. This provides a sharp, clear image and wide viewing angle. The EL display type of flat panel is better than LCD.
Electroluminescent (EL) Displays
if (m < 1)
if (m > 1)
p = 2b - a
while (X1 != X2)
do
if (p < 1)
Xk++
p+= 2b
else
Xk++, YK++,
p+= 2b-2a
end
end


example : Start Point = (0,0)
End Point = (6,4)
M =
4 / 6 = 2/3
k
X
Y
P
2
-2
10
6
2
-2
10
0
1
2
3
4
5
6
0
1
2
3
4
5
6
0
1
1
2
3
4
4
p = 2a - b
while (X1 != X2)
do
if (p < 1)
Yk++
p+= 2a
else
Xk++, YK++,
p+= 2a-2b
end
end


p = 8 - 6 = 2
2b = 12
2b - 2a = -4
example : Start Point = (0,0)
End Point = (4,10)
M =
10 / 5 = 2
k
X
Y
P
0
10
0
10
0
10
0
10
0
10
0
0
0
1
1
2
2
3
3
4
4
5

0
1
2
3
4
5
6
7
8
9
10
0
1
2
3
4
5
6
7
8
9
10
p = 10 - 10 = 0
2a = 10
2a - 2b = 10 - 20 = -10
The Bresenham line algorithm is an algorithm which determines which order to form a close approximation to a straight line between two given points. It is commonly used to draw lines on a computer screen, as it uses only integer addition, subtraction and bit shifting, all of which are very cheap operations in standard computer architectures
- It is method that divide an object into several composite object
- represent tree structure
- object are easy to control
head
leaf
leaf
leaf
leaf
Body
Leg
Leg
Hand
Hand
Accessing method can be :
- up to bottom
head to leafs
- bottom to up
leafs to head
- center to leafs
start from center node
Stack method :

by providing FiFo method we can create hierarchical to our model
in openGL there are 2 method to apply stack:
- glPushMatrix();

-glPopMatrix();
this method copy the previous matrix and push it into matrix stack.
pops the current matrix stack, replacing the current matrix with the one below it on the stack.
Method Display List
glNewList()
#define MY_CIRCLE_LIST 1

buildCircle()
{
GLint i;
GLfloat cosine, sine;

glNewList(MY_CIRCLE_LIST, GL_COMPILE);
glBegin(GL_POLYGON);
for(i=0;i<100;i++)
{
cosine=cos(i*2*PI/100.0);
sine=sin(i*2*PI/100.0);
glVertex2f(cosine,sine);
}
glEnd();
glEndList();
}

Note that the code for drawing a circle is bracketed by glNewList() and glEndList().The argument MY_CIRCLE_LIST for glNewList() is an integer index that uniquely identifies this display list. You can execute the display list later with this glCallList() command:
glCallList(MY_CIRCLE_LIST);
glEndList()
glCallList()
create new displaylist
close newlist command
call out list by parameter name as defined
Transformation
glPushMatrix(); // Set current matrix on the stack
glTranslatef(someX, someY, someZ); // transformation 1
glRotatef(someangle,someaxis);// transformation 2
DrawObject(ONE);
glPopMatrix(); // Pop the old matrix without the transformations.

glPushMatrix(); // Set current matrix on the stack
...
// SomeTransformations
...
DrawObject(TWO);
Example :
2
5
0.2 0
0 0.2
X
=
1
2.5
2
5
2 0
0 2
X
=
4
10
p' =
0 1
-1 0
X
=
5
1
1
-5
Matrix Representation
R=
Cos 0 Sin 0 0
-Sin 0 Cos 0 0
0 0 1
S=
1 0 0
0 1 0
0 0 scale
T=
T 0 0
0 T 0
0 0 1
Composite transformations:
– Rotate about an arbitrary point – translate, rotate, translate
– Scale about an arbitrary point – translate, scale, translate
– Change coordinate systems – translate, rotate, scale
P =
X
Y
Z
2 0 1
0 2 1
0 0 1
0 1 0
-1 0 0
0 0 1
2 0 -1
0 2 -1
0 0 1
5
1
1
order
1
-3
1
Full transcript