Computer Graphics in Java

CR325

Graphics2D standard

WMFGraphics2D

Font test - serifuniform scale

rotated sansserif

dialog font transform

Graphics standard

WMFGraphics

extra

WM

F comm

andsW

MF com

mands

What is Computer Graphics?

• A kind of Data processing• Voice and Signal Processing = 1D data

processing• Image Processing = 2D data processing• Computer Graphics = 3D data in with 2D

data out. Geometry is transformed into images.

What do we study in CG??

methods for digitally synthesizing and manipulating visual content

What do people study in CG?

• How to do 2D drawing– How to draw a line– How to draw a circle, etc.

• How to do 3D drawing– How to draw a 3D line– How to draw a sphere, etc.

Why study Computer Graphics?

• Entertainment• Visualization of data (analysis)• Simulation can be visualized with CG.• CAD (Computer Aided Design)

2D Computer Graphics

• Synthesis of images—from two-dimensional models

Two kinds of 2D Computer GraphicsRaster andVector

Raster Graphics

• image (array of pixels).

Vector Graphics

• geometrical primitives (e.g., points, lines, curves, and shapes or polygon(s)), to represent images

Where do we get input?

• Pick device– Gives us a location– Mouse, light-pen, arrow-keys, keyboard,– Joystick, tablet, scanner, image– video camera with a cooperative target.– Geometries– Dynamics, kinematics (math).

Graphics Systems Five major elements - processor, memory,

frame buffer, output devices, input devices

Displays

• Color Monitors are made for people• physiological arguments are used for

display design

What is light?

• any electromagnetic energy• visible light is typically visible to the

human visual system (eye).

Output Devices The cathode-ray tube CRT

Output Devices RGB – shadow mask

Spectra of the Human Visual System

• ranges from 400 nm wavelength to about 800 nm, 1 nm = 10 ** -9 meters

• d = rate * time• rate = c = 3 * 10 ** 8 meters / second• d = wavelength = 400 * 10 **-9 meters• T = lambda/c, f = 1/T = c / lambda• f = 3 * 10 ^ 8 / 4 * 10 ^ -7 =750.*10^12?

Trading an eye for an ear

optical axiscornea

lensoptic disk

optic nerve

retina

fovea centralis

iris

Human Visual System - HVS

• rods and cones excited by electromagnetic energy in the range 350-780 nm

• sizes of rods and cones determines the resolution of HVS – our visual acuity

• the sensors in the human eye do not react uniformly to the light energy at different wavelengths

Human Visual System - HVS

Courtesy of http://www.webvision.med.utah.edu/into.html

Human Visual System• different HVS response for single

frequency light – red/green/blue• relative brightness response at

different frequencies• this curve is known as

Commision Internationale de L’Eclairage (CIE) standard observer curve

• the curve matches the sensitivity of the monochromatic sensors used in black&white films and video camera

• most sensitive to GREEN colors

Response curves

• Eye has Gaussian response to light.• Gives rise to biologically motivated image

processing

Human Visual System• three different cones in HVS• blue, green & yellow – often reported as red for compatibility with camera & film

An eye is a Multi-mega pixel camera

• It has a lens (adjustable zoom)• It has an automatic f-stop (iris 2-8 mm)• It has a sensor plane (100 million pixels)• The sensor has a transfer function senstive

to mesopic range; 380 to about 700 nm

The eyes have a USB2 data rate!

• 250,000 neurons in the optic nerve• variable voltage output on EACH nerve• 17.5 million neural samples per second• 12.8 bits per sample• 224 Mbps, per eye (a 1/2 G bps system!).• Compression using lateral inhibition

between the retinal neurons

Introduction to 2D Graphics

• Draw some 2D geometries.• Input is 2D geometry• Ouput is image.

How do we represent an image?

• Image Processing answer: 2D array of pixels

• Computer Answer: BREP:vectors

• to the right is a bitmap• vector vs. bitmap

What is an Image?

• a 2D array of pixels• a pixel is a scalar quantity that represents

the intensity of light. It smallest area within the given image.

Pixels and Frame Buffer Most graphics systems are pixel based – need of rasterization or

scan conversion; pixel = picture element8 bits deep frame – 256 colors; 24 or 32 bits for RGB colors

picture detail

What is a PIXEL

• A picture element.• Typically a pixel can be described as an

intensity for light at a given location.– Location (200,20), I = 255; // gray scale– Location (34,50), R=255, G= 0, B =0; //red

pixel.• Looks like a dot!

How do we represent a pixel?

• how do we represent light?

How do we represent a pixel

• assume that the pixel is for humans.• You need to know the dynamic range of the

eye!• 1 part in a million is needed for a pixel that

displays on a monitor for people.• Typically we use 24 bits per pixel, 8 bits

per color.

Quantization of an Image

• Computers use digital cameras -> quantization

SNR6b 4.8

SNR 10 log 3 22 b 20b log2 10log 3

Quantization Error is visible

peter packed a pickled pixelits color was that of hash.

And every system that displayed it would crash!

Displays are designed for

• human visual system (eye)• Painting with LIGHT (additive synthesis)

display• This is not painting with MUD! (subtractive

synthesis) printer

Overview public int filterRGB (int rgb) { int r = (rgb & 0xff0000) >>16; int g = (rgb & 0xff00) >> 8; int b = rgb & 0xff; int gr = (r + g + b) / 3;int p = 0xff000000 | (gr << 16) | (gr << 8) | gr; return p// p = 0xffgrgrgr;

How would do you pack RGB?

• int pack(int r, int g, int b) {return 0xff000000 | (r << 16) | (g << 8) | b;• }

How do I represent the following in decimal

• int I = 1;• int k = ~I+1;• how much is k? Ans: -1

Intro to bitwise ops

• and - & - bitwise (not && is logical)• or - | - bitwise (not || is logical)• not - ~ - bitwise (not !, is logical)• xor - ^ - bitwise (has no logical

correspondence)

Intro to ANDing

• int I = 0;• int j = 1;• I&I is 0• I&J is 0• J&I is 0• J&J is 1

Intro to Oring

• int i=0xF0; S={0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f}• int j =0x0F;• i|I is 240 = 0xF0• i|j is 255 in decimal = 0xFF• 0xF0 = (in base 2) 11110000• 0x0F = (in base 2) 00001111• 0x0F | 0xF0 = 11111111

Using hex for ANDing

• int i=0x7a;• int j =0x0F;• how much is i&j ?• 01111100 &• 00001111 =• 00001100 = 0x0c

using hex for not

• int i=0x7a;• int j =0x0F;• how much is ~j? 0xfffffff0nibble is 4 bits, byte is 8 bits

using hex for xor

• int i=0x7a;• int j =0x0F;• how much is i^j?• 01111100 = I^• 00001111 = j• 01110011 = i^j = 0x73

Common Radicies

• in java, you can use:• binary (base 2) Radix 2• octal (base 8) Radix 8• decimal (base 10) Radix 10• hexidecimal (base 16) Radix 16

How come they call it base 2?

• You can only have 0 and 1, so why call it base 2?

• Why not call it base 1?• Cardinality of the set of symbols is the radix

S = {0, 1}, card(s)=2

Why call it a base?

• The base of the exponent!• 1101, base 2 is, in decimal• 1*2^3 + 1 * 2^2 + 0 * 2 ^ 1 + 1• = 8 + 4 + 0 + 1 = 13 base 10.• This is called positional notation.

Doing the positional notation in hex

• 0x28 = 2 * 16 ^ 1 + 8 * 16 ^ 0• = 2 * 16 + 8• = 32 + 8 = 40 base 10