Download Intro to Graphics - UNC Computer Science

Lecture 15: Intro to Graphics
Yoni Fridman
7/25/01
Outline

Basics of graphics



The Graphics class


Graphics contexts
Drawing in Java



Pixels
Coordinates
Lines
Shapes
Colors


The Color class
RGB
Pixels



Consider a black and white monitor – everything
displayed on the monitor, including text and
drawings, is made up of pixels.
A pixel is a picture element – a single element of a
two-dimensional image.
What does a diagonal line look like from up close?
Coordinates

Like elements of a two-dimensional array, each
pixel is referenced by coordinates that start in the
upper left corner.


For example, the left-most pixel of the line is referenced by the
coordinates (4, 9).
Unlike 2D arrays, the column comes 1st and the row comes 2nd.
x
0 1 2 3 4 5 6 7 8 9 10 …
y
0
1
2
3
4
5
6
7
8
9
10
11
The Graphics Class

To display images in Java, we must use the
Graphics class.


The first step is to construct a Graphics object.



import java.awt.*
An instance of the Graphics class is called a graphics context, and
is usually given the identifier name g.
A graphics context is a rectangular area filled with pixels, used to
store an image.
The Graphics class has a collection of instance
methods that we can use to create images.
Drawing in Java



The simplest instance method provided by the
Graphics class is the drawLine() method.
It takes 4 arguments – drawLine(x1, y1, x2, y2),
where (x1, y1) are the coordinates of one endpoint
of the line and (x2, y2) are the coordinates of the
other endpoint.
For example, if we’ve constructed a graphics
context g, then g.drawLine(4, 9, 24, 2) will
create the line shown in previous slides.
Drawing in Java


There are also methods that create shapes.
g.drawRect(x, y, width, height) creates the
outline of a rectangle whose top left corner is at
(x, y) and that has the specified width and height.


Example: g.drawRect(4, 3, 9, 5);
Similarly, g.fillRect() creates a filled in rectangle.
0 1 2 3 4 5 6 7 8 9 10 …
0
1
2
3
4
5
6
7
8
9
10
11
5
9
Drawing in Java



g.drawOval(x, y, width, height) creates an oval
that’s enclosed in a rectangle that has the given
coordinates.
Similarly, g.fillOval() creates a filled in oval.
How would you draw a circle?
0 1 2 3 4 5 6 7 8 9 10 …
0
1
2
3
4
5
6
7
8
9
10
11
Drawing in Java




g.drawString(str, x, y) can be used to display text
in the drawing window.
The first argument is a String – whatever you want
to display.
The second and third arguments give the
coordinates of the bottom left corner of the text.
Example: g.drawString(“Hello”, 100, 50);
Drawing in Java

How might we display a tic-tac-toe board?
0 1 2 3 4 5 6 7 8 9 10
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
12
14
16
18
20
22
24
The Color Class

Two more methods for displaying graphics are
setColor() and setBackground().




setColor() defines the color of whatever is drawn next (it’s an instance
method of the Graphics class).
setBackground() defines the background color (It’s a static method).
These methods each take one argument – that
argument must be an instance of the Color class.
The Color class defines 13 constants that represent
common colors.

For example, the following command will set the drawing color to red:
g.setColor(Color.red);
RGB – Red, Green, Blue


What if we want a color other than the 13 ones
defined?
Computer monitors (and any other monitors) can
display three primary colors – red, green, and blue.


All other colors
are made from
combinations of
these three.
For example,
red and green
make yellow.
RGB – Red, Green, Blue


Each of the three primary colors is specified on a
scale of 0 to 255.
If we want our own custom color, we can use the
Color constructor – Color(r, g, b);







g.setColor(new Color(255, 0, 0)); will set the drawing color to red.
g.setColor(new Color(255, 255, 0)); will set the color to yellow.
g.setColor(new Color(255, 255, 255)); will set the color to white.
g.setColor(new Color(0, 0, 0)); will set the color to black.
g.setColor(new Color(0, 0, 100)); will set the color to dark blue.
Etc.
These three values collectively give the RGB value.
RGB – Red, Green, Blue

Here’s a table of the 13 defined colors and their RGB values.
Identifier
white
black
lightGray
gray
darkGray
red
green
blue
yellow
magenta
cyan
orange
pink
Red Value Green Value BlueValue
255
255
255
0
0
0
192
192
192
128
128
128
64
64
64
255
0
0
0
255
0
0
0
255
255
255
0
255
0
255
0
255
255
255
200
0
255
175
175
Homework

Read: Appendix D, to middle of page 746; and
top of page 749 to middle of page 753.