Mr. Afrasiab Kaikobad afrasiab@biit.edu.

pk Whatsapp#03365291133
Computer Graphics (CS-575)
Week # 02 (Lecture 3 & 4)
Objectives:
 To learn about data representation
 To learn about image and pixels on the screen
 To learn different terminologies, use in computer graphics

Resources:
Book: Computer Graphics with OpenGL (4th ed.) [Hearn, Baker & Carithers 2013]

Video Links:

CG-Wk-2-Video-1: https://youtu.be/MQlUYwb2_ZI

CG-Wk-2-Video-2: https://youtu.be/lHzHl8D0zkM

CG-Wk-2-Video-3: https://youtu.be/bosx6EjRtbU

CG-Wk-2-Video-4: https://youtu.be/q86aTsYbXR0

CG-Wk-2-Video-5: https://youtu.be/gnkI1yLF2qQ

CG-Wk-2-Video-6: https://youtu.be/o57oikBj5BU

Lecture 3
Overview of the lecture:
In this lecture we will discuss data representation. After learning this lecture student will able to answer
these questions: What are different data representations like text, audio, image etc.?

Data Representation:
Text:
 ASCII (American Standard Code of Information Interchange)
o 7-bit = 0 – 127
o Only English characters, numeric characters and some special characters
 EASCII (Extended ASCII)
o 8-bit = 0 – 255
o Included Latin and Turkish characters
 Unicode

o 16-bit, use for multilingual approach

Audio:
Audio is continuous signal. Using technique of Analogue to digital conversion, samples of audio signal is
transformed in to digital representation of audio.

There are three major groups of audio file formats:

Page 1 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
1. Uncompressed audio formats, such as WAV, AIFF, AU
2. Formats with lossless compression, such as FLAC, Monkey's Audio (filename
extension .ape), WavPack (filename extension .wv), ALAC (filename extension .m4a), MPEG-4
SLS, MPEG-4 ALS, MPEG-4 DST, Windows Media Audio Lossless (WMA Lossless),
3. Formats with lossy compression, such as Opus, MP3, Vorbis, Musepack, AAC, ATRAC and Windows
Media Audio Lossy (WMA lossy).

Image:
A representation of the external form of a person or thing in sculpture, painting, etc.

Image is 2D array of pixels.

Image of 1 bits/pixel, 2 bits/pixel, 4 bits/pixel, 8 bits/pixel, 32 bits/pixel.

 1-bit color (2^1 = 2 colors): monochrome, often black and white, compact Macintoshes, Atari ST.
 2-bit color (2^2 = 4 colors): CGA, gray-scale early NeXTstation, color Macintoshes, Atari ST.
 3-bit color (2^3 = 8 colors): many early home computers with TV displays, including the ZX
Spectrum and BBC Micro.
 4-bit color (2^4 = 16 colors): as used by EGA and by the least common denominator VGA
standard at higher resolution, color Macintoshes, Atari ST, Commodore 64, Amstrad CPC.

Page 2 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
 5-bit color (2^5 = 32 colors): Original Amiga chipset.
 6-bit color (2^6 = 64 colors): Original Amiga chipset.
 7-bit color (2^7 = 128 colors).
 8-bit color (2^8 = 256 colors): most early color Unix workstations, VGA at low resolution, Super
VGA, color Macintoshes, Atari TT, AGA,Falcon030.
 12-bit color (2^12 = 4096 colors): some Silicon Graphics systems, Neo Geo, Color Next station
systems, and Amiga systems in HAM mode.
 16-bit color (65536 colors)

Image size= No-of-pixels*Bits/Pixel

Example: Let’s have an image 8’x6’, the resolution is 100 ppi and 24 bits are used to represent
each pixel. Find the size of image.
Solution:
Image size= No-of-pixels*Bits/Pixel
Image size = ( 8 x 100) x ( 6 x 100 ) x (24) = 11520000 bits
Image size = (11520000 / 8) Bytes = 11440000 B
Image size = (11440000 / 1024) Kilo Bytes = 1406.25 KB
Image size = (1406.25 / 1024) Mega Bytes = 1.37 MB

Example of some image file formats.

JPEG/JFIF:-
Joint photographic expert group is a compression method.JPEG compressed images
are stored in JFIF (JPEG file interchange format).Support 24 bit color image (8 Bit for each color
red, green, blue). JPEG have two version lossless and lossless compression versions.

EXIF:-
Exchange file format is a standard similar to JFIF. Its purpose is to record and to
standardize the exchange of images with images metadata between digital camera and editing
software.

TIFF:-
Tagged image file format is flexible format and saves 8 bits or 16 bits per color. Not
widely supported by web browsers. File format is .tiff and .tif.

Page 3 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
GIF:-
Graphic interchange file format is limited to an 8 bit palette or 256 colors. Suitable for
graphics with single color like graphs, diagrams and cartoon images. Widely used for animation
effect images.

BMP:-
Bit Map file format normally handle within a operating system. Files are not compressed
normally very heavy.

PNG:-
Portable network graphics use 8 bit palette and 24 bit true colors (16 billions
colors).Normally bigger than JPEG files.

WEBP:-
New file format used for smaller size. It is designed by Google to reduce size to speed up
web page.

Page 4 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
Lecture 4
Overview of the lecture:
In this lecture we will discuss different terminologies use in Computer Graphics. After learning this
lecture student will able to answer these questions: What is difference between Raster Graphics and
Vector Graphics? What is pixel? What is resolution? What is difference between solid filling vs bitmap
filling? What is concept of transparency?

Raster Graphics vs. Vector Graphics

Raster Graphics:
 A raster image is made of up pixels, each a different color, arranged to display an image.
 Raster image pixels do not retain their appearance as size increases - when you blow a
photograph up, it becomes blurry for this reason.
 Raster images are more common in general such as jpg, gif, png, and are widely used on the
web. 

Vector Graphics:
 A vector image is made up of paths; each with a mathematical formula (vector) that tells the
path how it is shaped and what color it is bordered with or filled by.
 Vector images do retain appearance regardless of size, since the mathematical formulas dictate
how the image is rendered.
 Vector graphics are common for images that will be applied to a physical product. Also used in
CAD, engineering, and 3D graphics which we do not provide information nor services for.

Graphics Primitives
Pixels (Picture Elements)
A computer image is usually represented as a discrete grid of picture elements as known as pixels.

Screen Coordinates
Screen coordinates (x,y) starts (or originates) from the left-top of the screen.

Screen Resolution
The number of pixels determines the resolution of the image.
For example; 1600 x 900, 1280 x720, 800 x600

Page 5 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
 Number of pixels per square cm
– Measured in dots per inch (dpi)

 Number of addressable colors per pixel

– measured in bits

 Depends on the medium:

o TV Screen: 30 dpi, 8 bits color

o Computer Screen: 70-100 dpi, up to 24 bits color

o Laser Printer: 300-2400 dpi, 3 bits color (8 colors)

o Photo: » 800 dpi, 36 bits color

Types of Graphic filling:

Solid vs Bitmap:
 In Solid filling whole graphic object has one color pattern.

 In Bitmap filling whole graphic object has multiple color pattern like linear, gradient etc

Opaque vs Transparent:
 In Opaque fill the object has strong intensity of color that color behind the object is invisible.

 In Transparent fill the object has weak intensity of color that few or complete color behind the
object is visible

Shading
Shading techniques extend the realistic appearance of objects and introduce features such as
transparency and textures.

Computers don't create color exactly the way we see it. Computers typically display color in three
components - red, green, and blue. When combined, these three colors make the full-color image seen
in the upper left of this image.

Page 6 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
Ray Tracing
Ray Tracing. These two images illustrate the extent to which light reflection can be modeled by tracing
the paths of light rays entering your eye

Quality of light. These three images illustrate the same room under four different lighting
conditions. What are some of the differences, and does anything else but the light quality?

Page 7 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
Practical Work
Introduction to JAVA Programming:
JAVA was developed by Sun Microsystems Inc in 1991, later acquired by Oracle Corporation. It was
developed by James Gosling and Patrick Naughton. It is a simple programming language.  Writing,
compiling and debugging a program is easy in java.  It helps to create modular programs and reusable
code.

Java terminology
Before we start learning Java, lets get familiar with common java terms.

Java Virtual Machine (JVM)

This is generally referred as JVM. Before, we discuss about JVM lets see the phases of program
execution. Phases are as follows: we write the program, then we compile the program and at last we run
the program.

1. Writing of the program is of course done by java programmer like you and me.
2. Compilation of program is done by javac compiler, javac is the primary java compiler included in
java development kit (JDK). It takes java program as input and generates java bytecode as
output.
3. In third phase, JVM executes the bytecode generated by compiler. This is called program run
phase.

So, now that we understood that the primary function of JVM is to execute the bytecode produced by
compiler. Each operating system has different JVM, however the output they produce after execution of
bytecode is same across all operating systems. That is why we call java as platform independent
language.

bytecode
As discussed above, javac compiler of JDK compiles the java source code into bytecode so that it can be
executed by JVM. The bytecode is saved in a .class file by compiler.

Java Development Kit(JDK)

While explaining JVM and bytecode, I have used the term JDK. Let’s discuss about it. As the name
suggests this is complete java development kit that includes JRE (Java Runtime Environment), compilers
and various tools like JavaDoc, Java debugger etc.

In order to create, compile and run Java program you would need JDK installed on your computer.

Java Runtime Environment(JRE)

JRE is a part of JDK which means that JDK includes JRE. When you have JRE installed on your system, you
can run a java program however you won’t be able to compile it. JRE includes JVM, browser plugins and

Page 8 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
applets support. When you only need to run a java program on your computer, you would only need
JRE.

Basic Program:
We will create GUI using different swing components. Two most used component will JFrame and
JPanel. Basically, a JFrame represents a framed window and a JPanel represents some area in which
controls (e.g., buttons, checkboxes, and textfields) and visuals (e.g., figures, pictures, and even text) can
appear. Windows can contain/display multiple panels, although in the simplest GUIs, we will associate
just one panel with a window.

When we discuss JFrames and JPanels, we will discuss just a very few of their many methods: they are
highly subclassed (in a deep hierarchy) and therefore inherit many (many) interesting methods. We will
discuss only the most useful and important of these methods: the ones used in most GUI applications.

In the process of discussing JFrame and JPanels,, we will also discuss a host of other useful (and simpler)
classes: Toolkit, Image, Dimension, Point, Color, Font, FontMetrics, and Graphics. These classes are
imported and then used in many GUI applications. We use the last, Graphics, to render visuals (e.g.,
figures, pictures, and even text) in a JPanel that contains the graphics part of a JFrame.

Program
package Lab02;

import java.awt.Color;

import java.awt.Graphics;

import java.awt.event.MouseAdapter;

import java.awt.event.MouseEvent;

import javax.swing.JFrame;

import javax.swing.JPanel;

public class FirstProgram extends JFrame {

public JPanel drawingPanel;

public FirstProgram() {

setLayout(null);

drawingPanel = new JPanel();

drawingPanel.setBounds(3, 3, 790, 590);

drawingPanel.setBackground(Color.ORANGE);

add(drawingPanel);

drawingPanel.addMouseListener(new MouseAdapter() {

Page 9 of 10
Mr. Afrasiab Kaikobad afrasiab@biit.edu.pk Whatsapp#03365291133
Computer Graphics (CS-575)
@Override

public void mousePressed(MouseEvent e) {

Graphics g = drawingPanel.getGraphics();

g.setColor(new Color(0,255,255));

g.drawString("Welcome to Computer Graphics", 50, 100);

});

public static void main(String[] args) {

FirstProgram window = new FirstProgram();

window.setTitle("First Program");

window.setSize(800,600);

window.setVisible(true);

window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Page 10 of 10