![Page 1: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/1.jpg)
COS 397 Computer Graphics
Svetla Boytcheva
AUBG, Spring 2013
![Page 2: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/2.jpg)
Lecture 1
Coordinate Systems
![Page 3: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/3.jpg)
04/19/23
Outline
• Course Organization• Introduction• Image Formation• Vector vs. Raster Graphics• Graphics Formats• Coordinate Systems
![Page 4: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/4.jpg)
Course Organization
• Lectures - Tuesday• Practical Sessions - Friday• Course Materials
– dotLRN
• Assignments– Course Projects– Homework Assignments (4)– Quizzes (4)– MidTerm Exam– Final Exam
04/19/23
![Page 5: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/5.jpg)
Course Materials
• dotLRN• Used resources:
– “Fundamentals of Computer Graphics” by Peter Shirley, Michael Ashikhmin and Steve Marschner, Publisher: A K Peters; 3rd Revised edition
– “Interactive Computer Graphics: A Top-Down Approach Using OpenGL” by Edward Ange, Publisher: Addison Wesley; 5th edition
– "Computer Graphics with Open GL" by Donald D. Hearn , M. Pauline Baker and Warren Carithers. Publisher: Prentice Hall; 4th edition
– "Interactive Computer Graphics: A Top-Down Approach with Shader-Based OpenGL" by Edward Angel and Dave Shreiner .Publisher: Addison-Wesley; 6th edition
– “OpenGL Programming Guide: The Official Guide to Learning OpenGL, Versions 3.0 and 3.1” (7th Edition) by Dave Shreiner
04/19/23
![Page 6: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/6.jpg)
Software
• C++ Programming Language• Code Blocks
– http://www.codeblocks.org/• http://www.codeblocks.org/downloads/binaries
• Multiplatform IDE, GNU GCC Compiler, Debugger– Windows 2000/XP/Vista/7//8
• codeblocks-12.11mingw-setup.exe
– Linux 32-bit– Linux 64-bit– Mac OS X
• Free
• OpenGL Library– Java– C++– Objective C, C#
04/19/23
![Page 7: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/7.jpg)
OpenGL
• What is OpenGL?– Provides lower-level graphics API (Application Programming
Interface)
• Programming Languages– Java– C++– Objective C, C#
• Versions– OpenGL 3.0– Mac only supports 3.2– We will need minimal functionality provided by OpenGL 2.0
04/19/23
![Page 8: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/8.jpg)
OpenGL in C++
• Cross-Platform– GLFW up to date– Free GLUT not compatible with mac– GLUT outdated
• Native– Windows: WGL– Linux: GLX– Mac: CGL (NSOpen GL with Object C++)
04/19/23
![Page 9: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/9.jpg)
OpenGL in Java
• Java OpneGL (JOGL)– Fits wit SWING /ATW libraries– More complex– Last stable version is obsolete
• Lightweight Java Game Library (LWJGL)– Minimalistic and easy to use– Stable and well maintained
04/19/23
![Page 10: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/10.jpg)
GLFW
• Minimalistic and easy to use• Stable and well maintained• Download:
– http://www.glfw.org/– Version 2.7.7 – Binary archive for 32-bit Windows
• Rename folder “lib-mingw” to “lib”
• More about settings – next class
04/19/23
![Page 11: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/11.jpg)
The Camera
04/19/23
![Page 12: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/12.jpg)
The Image Plane
04/19/23
![Page 13: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/13.jpg)
Polygonal Models
04/19/23
![Page 14: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/14.jpg)
Pixel Discretization
04/19/23
![Page 15: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/15.jpg)
Color Scheme
• RGB– Red– Green– Blue
• CMYK– Cyan
– Magenta
– Yellow
– Black
04/19/23
![Page 16: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/16.jpg)
RGB
Yellow(255,255,0)
Green(0,255,0)
Cyan(0,255,255)
Blue(0,255,0)
Magenta(255,0,255)
Red(255,0,0)
Red(255,0,0)
![Page 17: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/17.jpg)
![Page 18: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/18.jpg)
![Page 19: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/19.jpg)
![Page 20: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/20.jpg)
![Page 21: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/21.jpg)
![Page 22: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/22.jpg)
![Page 23: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/23.jpg)
Raster Rendering
For each polygon: Compute illumination Project to image plane Fill in pixels
For each polygon: Compute illumination Project to image plane Fill in pixels
04/19/23
![Page 24: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/24.jpg)
Vector v. Raster Graphics
Vector Graphics
• Plotters, laser displays• “Clip art,” illustrations• PostScript, PDF, SVG• Low memory (display list)• Easy to draw line• Solid/gradient/texture fills
Raster Graphics
• TV’s, monitors, phones• Photographs• GIF, JPG, etc.• High memory (frame
buffer)• Hard to draw line• Arbitrary fills
04/19/23
![Page 25: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/25.jpg)
Graphics
• Vector– smooth continuous primitives
• Raster– Discrete primitives (usually in grid)
• Advantages• Disadvantages
04/19/23
![Page 26: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/26.jpg)
痙攣Example
• Spasm, convulsion (jap. Keiren)
04/19/23
![Page 27: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/27.jpg)
Vector After Scaling
04/19/23
![Page 28: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/28.jpg)
Raster After Scaling
04/19/23
![Page 29: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/29.jpg)
Vector Graphics
• Advantages – Zoom Precision – Ideal for graphics and text
• Disadvantages– Not suitable for compound objects with many details/parts– Nightmare for photorealistic images
04/19/23
![Page 30: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/30.jpg)
Raster Graphics
• Advantages – Do not depend on the amount of content – Ideal for photorealistic images
• Disadvantages– Problem with oblique lines– Rough result in scaling– Inconvenient for graphics and text
04/19/23
![Page 31: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/31.jpg)
Rasterization
• Vector Data transformation to Raster Data– Before the output to the raster device – Rasterization should be made as later as possible in graphics
processing
• Rule– Every image that you can see on PC or mobile device display is
raster graphics
![Page 32: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/32.jpg)
Vectorization
• Raster Data transformation to Vector Data – In case we need vector processing (for example, image
recognition, edges …)– Heavy algorithms (time, efforts, resources consuming), sometimes
bad and unusable results– Vectorization is applied only if there is not available alternative
solution
![Page 33: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/33.jpg)
Vector – Raster Transformation
Raster Raster DataData
Raster Raster DataData
Vector Vector DeviceDeviceVector Vector DeviceDevice
Vector Vector DataData
Vector Vector DataData
Raster Raster DeviceDeviceRaster Raster DeviceDevice
Vector Vector processingprocessing
Vector Vector processingprocessing
Raster Raster processingprocessing
Raster Raster processingprocessing
rasterizationrasterizationrasterizationrasterization
rasterization
rasterization
rasterization
rasterization
04/19/23
![Page 34: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/34.jpg)
Raster Images
• (Spatial) Resolution– horizontal pixels x vertical pixels
• Image Aspect Ratio– width/height– HDTV = 1920/1080 = 1.78 = 16:9
• Pixel Aspect Ratio– (H/V) / (height/width) = (H/V) x (1/A)– Square pixels are 1:1
• Color resolution– Bits per pixel– 24 bpp = 8 bits red, green and blue– 8 bpp = 3 bits red, green, 2 bits blue
04/19/23
![Page 35: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/35.jpg)
Image File Formats
Format Fidelity Complexity Use
BMP Uncompressed Simple, Microsoft Easy to process, windows icons
PPM Uncompressed Simple, open, dated
Easy to process, unix icons
GIF Compressed Lossless (LZW)
Only 256 colors Charts, graphs, diagrams, text
JPG (Exif)
Compressed Lossy (DCT)
Blocky, edges ring Photographs
TIFF Compressed Lossless (LZW)
Flexible but complex structure
Fax, scanning, artwork
PNG Compressed Lossless (zlib)
Flexible but complex structure
Distributing images
SVG Uncompressed Flexible Vector/Line Art
04/19/23
![Page 36: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/36.jpg)
Color Palettes
• Store all RGB colors used in any image pixel in a table
• Store index to color in each pixel to compress data size
97 97 217
97 97 217
97 97 217
97 97 217
97 97 217
97 97 217
255 153 0
97 97 217
255 153 0
255 153 0
97 97 217
97 97 217
97 97 217
97 97 217
255 153 0
97 97 217
97 97 217
97 97 217
97 97 217
255 153 0
97 97 217
97 97 217
97 97 217
97 97 217
255 153 0
97 97 217
255 153 0
97 97 217
255 153 0
255 153 0
97 97 217
97 97 217
97 97 217
97 97 217
97 97 217
or=
0 0 0 0 00 1 1 1 00 0 1 0 00 0 1 0 00 0 1 0 00 1 1 1 00 0 0 0 0
1=
0=
where:
04/19/23
![Page 37: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/37.jpg)
Viewing
04/19/23
3D Geometric Models
3D Lighting Information
3D Animation Definition
Rendering
Texture Information
Image Storage and Display
![Page 38: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/38.jpg)
Coordinate systems
• Cartesian • Polar• Spheric
04/19/23
![Page 39: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/39.jpg)
Cartesian coordinate system
• (x, y, z) – 3D Point position• (x, y) – 2D Point position
04/19/23
![Page 40: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/40.jpg)
3-D Coordinates
• Points representedby 4-vectors
• Need to decideorientation ofcoordinate axes
1
x
y
z
y
z
x
x
z
y
Right Handed Coord. Sys.
Left Handed Coord. Sys.
xy
+z (rhc)
+z (lhc)
04/19/23
![Page 41: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/41.jpg)
Algorithm “for dummies”
• Point all the axises– Turn hands until they guess– With which hand do, this is the system
X X XX
Z ZZ ZY YY Y
Снимка: FreeDigitalPhotos.net04/19/23
![Page 42: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/42.jpg)
What is the orientation of is this system?
ZZ
YYXX
04/19/23
![Page 43: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/43.jpg)
2-D Points
• Represents points andvertices as column vectors:
(-1,-1)
(1,1)
.4
.8
x
y
04/19/23
![Page 44: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/44.jpg)
2-D Points
• Represents points andvertices as column vectors:
• Transform polygonal object by transforming its vertices
(-1,-1)
(1,1)
x
y
04/19/23
![Page 45: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/45.jpg)
αα
rr
PP
OO
yy
xx
sin
cos
)90cos(
cos
ry
rx
ry
rx
XX
YY
Polar coordinate system
04/19/23
![Page 46: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/46.jpg)
2-D Rotation
• Pick a point (x,y)• Assume polar coords
x = r cos , y = r sin
r
![Page 47: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/47.jpg)
Spherical Coordinate System
04/19/23
PP
![Page 48: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/48.jpg)
αα
rr
OOyy xx
ββzz
sin
cossin
coscos
sin
sin)cos(sin
cos)cos(cos
rz
ry
rx
rz
rOQy
rOQx
YY
ZZ
XX
04/19/23
![Page 49: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/49.jpg)
Other Coordinate Systems
04/19/23
![Page 50: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/50.jpg)
Demo
• Code Blocs + GLFW project
04/19/23
![Page 51: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/51.jpg)
Readings
– Polar coordinateshttp://scidiv.bellevuecollege.edu/dh/ccal/CC9.1.pdf
– Spherical Coordinates http://mathworld.wolfram.com/SphericalCoordinates.html
04/19/23
![Page 52: COS 397 Computer Graphics Svetla Boytcheva AUBG, Spring 2013](https://reader035.vdocuments.us/reader035/viewer/2022062304/56649e055503460f94af1609/html5/thumbnails/52.jpg)
Questions?
04/19/23