Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 7/25/01

Lecture 15: Intro to GraphicsLecture 15: Intro to GraphicsLecture 15: Intro to GraphicsLecture 15: Intro to Graphics

Yoni FridmanYoni Fridman

7/25/017/25/01

Yoni FridmanYoni Fridman

7/25/017/25/01

OutlineOutlineOutlineOutline

Basics of graphicsBasics of graphics PixelsPixels CoordinatesCoordinates

The Graphics classThe Graphics class Graphics contextsGraphics contexts

Drawing in JavaDrawing in Java LinesLines ShapesShapes

ColorsColors The Color classThe Color class RGBRGB

Basics of graphicsBasics of graphics PixelsPixels CoordinatesCoordinates

The Graphics classThe Graphics class Graphics contextsGraphics contexts

Drawing in JavaDrawing in Java LinesLines ShapesShapes

ColorsColors The Color classThe Color class RGBRGB

PixelsPixelsPixelsPixels

Consider a black and white monitor – everything Consider a black and white monitor – everything displayed on the monitor, including text and displayed on the monitor, including text and drawings, is made up of pixels.drawings, is made up of pixels.

A A pixelpixel is a is a picpicture ture elelement – a single element of a ement – a single element of a two-dimensional image.two-dimensional image.

What does a diagonal line look like from up close?What does a diagonal line look like from up close?

Consider a black and white monitor – everything Consider a black and white monitor – everything displayed on the monitor, including text and displayed on the monitor, including text and drawings, is made up of pixels.drawings, is made up of pixels.

A A pixelpixel is a is a picpicture ture elelement – a single element of a ement – a single element of a two-dimensional image.two-dimensional image.

What does a diagonal line look like from up close?What does a diagonal line look like from up close?

CoordinatesCoordinatesCoordinatesCoordinates

Like elements of a two-dimensional array, each Like elements of a two-dimensional array, each pixel is referenced by coordinates that start in the pixel is referenced by coordinates that start in the upper left corner.upper left corner. For example, the left-most pixel of the line is referenced by the For example, the left-most pixel of the line is referenced by the

coordinates (4, 9).coordinates (4, 9). Unlike 2D arrays, the column comes 1Unlike 2D arrays, the column comes 1stst and the row comes 2 and the row comes 2ndnd..

Like elements of a two-dimensional array, each Like elements of a two-dimensional array, each pixel is referenced by coordinates that start in the pixel is referenced by coordinates that start in the upper left corner.upper left corner. For example, the left-most pixel of the line is referenced by the For example, the left-most pixel of the line is referenced by the

coordinates (4, 9).coordinates (4, 9). Unlike 2D arrays, the column comes 1Unlike 2D arrays, the column comes 1stst and the row comes 2 and the row comes 2ndnd..

0 1 2 3 4 5 6 7 8 9 10 …x

01234567891011

y

The Graphics ClassThe Graphics ClassThe Graphics ClassThe Graphics Class

To display images in Java, we must use the To display images in Java, we must use the Graphics class.Graphics class. import java.awt.*import java.awt.*

The first step is to construct a Graphics object.The first step is to construct a Graphics object. An instance of the Graphics class is called a graphics context, and An instance of the Graphics class is called a graphics context, and

is usually given the identifier name is usually given the identifier name gg.. A graphics context is a rectangular area filled with pixels, used to A graphics context is a rectangular area filled with pixels, used to

store an image.store an image.

The Graphics class has a collection of instance The Graphics class has a collection of instance methods that we can use to create images.methods that we can use to create images.

To display images in Java, we must use the To display images in Java, we must use the Graphics class.Graphics class. import java.awt.*import java.awt.*

The first step is to construct a Graphics object.The first step is to construct a Graphics object. An instance of the Graphics class is called a graphics context, and An instance of the Graphics class is called a graphics context, and

is usually given the identifier name is usually given the identifier name gg.. A graphics context is a rectangular area filled with pixels, used to A graphics context is a rectangular area filled with pixels, used to

store an image.store an image.

The Graphics class has a collection of instance The Graphics class has a collection of instance methods that we can use to create images.methods that we can use to create images.

Drawing in JavaDrawing in JavaDrawing in JavaDrawing in Java

The simplest instance method provided by the The simplest instance method provided by the Graphics class is the Graphics class is the drawLine()drawLine() method. method.

It takes 4 arguments – It takes 4 arguments – drawLine(xdrawLine(x11, y, y11, x, x22, y, y22)), ,

where (where (xx11, y, y11) are the coordinates of one endpoint ) are the coordinates of one endpoint

of the line and (of the line and (xx22, y, y22) are the coordinates of the ) are the coordinates of the

other endpoint.other endpoint. For example, if we’ve constructed a graphics For example, if we’ve constructed a graphics

context context gg, then , then g.drawLine(4, 9, 24, 2)g.drawLine(4, 9, 24, 2) will will create the line shown in previous slides.create the line shown in previous slides.

The simplest instance method provided by the The simplest instance method provided by the Graphics class is the Graphics class is the drawLine()drawLine() method. method.

It takes 4 arguments – It takes 4 arguments – drawLine(xdrawLine(x11, y, y11, x, x22, y, y22)), ,

where (where (xx11, y, y11) are the coordinates of one endpoint ) are the coordinates of one endpoint

of the line and (of the line and (xx22, y, y22) are the coordinates of the ) are the coordinates of the

other endpoint.other endpoint. For example, if we’ve constructed a graphics For example, if we’ve constructed a graphics

context context gg, then , then g.drawLine(4, 9, 24, 2)g.drawLine(4, 9, 24, 2) will will create the line shown in previous slides.create the line shown in previous slides.


There are also methods that create shapes.There are also methods that create shapes. g.drawRect(x, y, width, height)g.drawRect(x, y, width, height) creates the creates the

outline of a rectangle whose top left corner is at outline of a rectangle whose top left corner is at (x, y)(x, y) and that has the specified width and height. and that has the specified width and height. Example: Example: g.drawRect(4, 3, 9, 5);g.drawRect(4, 3, 9, 5); Similarly,Similarly, g.fillRect() g.fillRect() creates a filled in rectangle.creates a filled in rectangle.

There are also methods that create shapes.There are also methods that create shapes. g.drawRect(x, y, width, height)g.drawRect(x, y, width, height) creates the creates the

outline of a rectangle whose top left corner is at outline of a rectangle whose top left corner is at (x, y)(x, y) and that has the specified width and height. and that has the specified width and height. Example: Example: g.drawRect(4, 3, 9, 5);g.drawRect(4, 3, 9, 5); Similarly,Similarly, g.fillRect() g.fillRect() creates a filled in rectangle.creates a filled in rectangle.

0 1 2 3 4 5 6 7 8 9 10 …01234567891011

9

5


g.drawOval(x, y, width, height)g.drawOval(x, y, width, height) creates an oval creates an oval that’s enclosed in a rectangle that has the given that’s enclosed in a rectangle that has the given coordinates.coordinates.

Similarly, Similarly, g.fillOval()g.fillOval() creates a filled in oval. creates a filled in oval. How would you draw a circle?How would you draw a circle?

g.drawOval(x, y, width, height)g.drawOval(x, y, width, height) creates an oval creates an oval that’s enclosed in a rectangle that has the given that’s enclosed in a rectangle that has the given coordinates.coordinates.

Similarly, Similarly, g.fillOval()g.fillOval() creates a filled in oval. creates a filled in oval. How would you draw a circle?How would you draw a circle?

0 1 2 3 4 5 6 7 8 9 10 …01234567891011


g.drawString(str, x, y)g.drawString(str, x, y) can be used to display text can be used to display text in the drawing window.in the drawing window.

The first argument is a String – whatever you want The first argument is a String – whatever you want to display.to display.

The second and third arguments give the The second and third arguments give the coordinates of the bottom left corner of the text.coordinates of the bottom left corner of the text.

Example: Example: g.drawString(“Hello”, 100, 50);g.drawString(“Hello”, 100, 50);

g.drawString(str, x, y)g.drawString(str, x, y) can be used to display text can be used to display text in the drawing window.in the drawing window.

The first argument is a String – whatever you want The first argument is a String – whatever you want to display.to display.

The second and third arguments give the The second and third arguments give the coordinates of the bottom left corner of the text.coordinates of the bottom left corner of the text.

Example: Example: g.drawString(“Hello”, 100, 50);g.drawString(“Hello”, 100, 50);

How might we display a tic-tac-toe board?How might we display a tic-tac-toe board? How might we display a tic-tac-toe board?How might we display a tic-tac-toe board?

0123456789101112131415161718192021222324

0 1 2 3 4 5 6 7 8 9 10 12 14 16 18 20 22 24


The Color ClassThe Color ClassThe Color ClassThe Color Class

Two more methods for displaying graphics are Two more methods for displaying graphics are setColor()setColor() and and setBackground()setBackground().. setColor()setColor() defines the color of whatever is drawn next (it’s an instance defines the color of whatever is drawn next (it’s an instance

method of the Graphics class).method of the Graphics class). setBackground()setBackground() defines the background color (It’s a static method). defines the background color (It’s a static method).

These methods each take one argument – that These methods each take one argument – that argument must be an instance of the Color class.argument must be an instance of the Color class.

The Color class defines 13 constants that represent The Color class defines 13 constants that represent common colors.common colors. For example, the following command will set the drawing color to red:For example, the following command will set the drawing color to red:

g.setColor(Color.red);g.setColor(Color.red);

Two more methods for displaying graphics are Two more methods for displaying graphics are setColor()setColor() and and setBackground()setBackground().. setColor()setColor() defines the color of whatever is drawn next (it’s an instance defines the color of whatever is drawn next (it’s an instance

method of the Graphics class).method of the Graphics class). setBackground()setBackground() defines the background color (It’s a static method). defines the background color (It’s a static method).

These methods each take one argument – that These methods each take one argument – that argument must be an instance of the Color class.argument must be an instance of the Color class.

The Color class defines 13 constants that represent The Color class defines 13 constants that represent common colors.common colors. For example, the following command will set the drawing color to red:For example, the following command will set the drawing color to red:

g.setColor(Color.red);g.setColor(Color.red);

What if we want a color other than the 13 ones What if we want a color other than the 13 ones defined?defined?

Computer monitors (and any other monitors) can Computer monitors (and any other monitors) can display three primary colors – red, green, and blue.display three primary colors – red, green, and blue. All other colorsAll other colors are are

made frommade from combinations ofcombinations of these these three.three.

For example,For example, red and greenred and green make yellow.make yellow.

What if we want a color other than the 13 ones What if we want a color other than the 13 ones defined?defined?

Computer monitors (and any other monitors) can Computer monitors (and any other monitors) can display three primary colors – red, green, and blue.display three primary colors – red, green, and blue. All other colorsAll other colors are are

made frommade from combinations ofcombinations of these these three.three.

For example,For example, red and greenred and green make yellow.make yellow.

RGB – Red, Green, BlueRGB – Red, Green, BlueRGB – Red, Green, BlueRGB – Red, Green, Blue


Each of the three primary colors is specified on a Each of the three primary colors is specified on a scale of 0 to 255.scale of 0 to 255.

If we want our own custom color, we can use the If we want our own custom color, we can use the Color constructor – Color constructor – Color(r, g, b);Color(r, g, b); g.setColor(new Color(255, 0, 0));g.setColor(new Color(255, 0, 0)); will set the drawing color to red. will set the drawing color to red. g.setColor(new Color(255, 255, 0));g.setColor(new Color(255, 255, 0)); will set the color to yellow. will set the color to yellow. g.setColor(new Color(255, 255, 255));g.setColor(new Color(255, 255, 255)); will set the color to white. will set the color to white. g.setColor(new Color(0, 0, 0));g.setColor(new Color(0, 0, 0)); will set the color to black. will set the color to black. g.setColor(new Color(0, 0, 100));g.setColor(new Color(0, 0, 100)); will set the color to dark blue. will set the color to dark blue. Etc.Etc.

These three values collectively give the RGB value.These three values collectively give the RGB value.

Each of the three primary colors is specified on a Each of the three primary colors is specified on a scale of 0 to 255.scale of 0 to 255.

If we want our own custom color, we can use the If we want our own custom color, we can use the Color constructor – Color constructor – Color(r, g, b);Color(r, g, b); g.setColor(new Color(255, 0, 0));g.setColor(new Color(255, 0, 0)); will set the drawing color to red. will set the drawing color to red. g.setColor(new Color(255, 255, 0));g.setColor(new Color(255, 255, 0)); will set the color to yellow. will set the color to yellow. g.setColor(new Color(255, 255, 255));g.setColor(new Color(255, 255, 255)); will set the color to white. will set the color to white. g.setColor(new Color(0, 0, 0));g.setColor(new Color(0, 0, 0)); will set the color to black. will set the color to black. g.setColor(new Color(0, 0, 100));g.setColor(new Color(0, 0, 100)); will set the color to dark blue. will set the color to dark blue. Etc.Etc.

These three values collectively give the RGB value.These three values collectively give the RGB value.


Here’s a table of the 13 defined colors and their RGB values.Here’s a table of the 13 defined colors and their RGB values. Here’s a table of the 13 defined colors and their RGB values.Here’s a table of the 13 defined colors and their RGB values.

Identifier Red Value Green Value BlueValuewhite 255 255 255black 0 0 0lightGray 192 192 192gray 128 128 128darkGray 64 64 64red 255 0 0green 0 255 0blue 0 0 255yellow 255 255 0magenta 255 0 255cyan 0 255 255orange 255 200 0pink 255 175 175

HomeworkHomeworkHomeworkHomework

Read: Appendix D, to middle of page 746; and Read: Appendix D, to middle of page 746; and top of page 749 to middle of page 753.top of page 749 to middle of page 753.

Read: Appendix D, to middle of page 746; and Read: Appendix D, to middle of page 746; and top of page 749 to middle of page 753.top of page 749 to middle of page 753.

Documents

Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 7/25/01