1 / 15

# Lecture 15: Intro to Graphics - PowerPoint PPT Presentation

Lecture 15: Intro to Graphics Yoni Fridman 7/25/01 Outline Basics of graphics Pixels Coordinates The Graphics class Graphics contexts Drawing in Java Lines Shapes Colors The Color class RGB Pixels

Related searches for Lecture 15: Intro to Graphics

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Lecture 15: Intro to Graphics' - liam

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

### Lecture 15: Intro to Graphics

Yoni Fridman

7/25/01

• Basics of graphics

• Pixels

• Coordinates

• The Graphics class

• Graphics contexts

• Drawing in Java

• Lines

• Shapes

• Colors

• The Color class

• RGB

• 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?

0

1

2

3

4

5

6

7

8

9

10

0

1

2

3

y

4

5

6

7

8

9

10

11

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.

• To display images in Java, we must use the Graphics class.

• import java.awt.*

• The first step is to construct a Graphics object.

• 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.

• 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.

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

• 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.

5

9

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.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?

• 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);

1

2

3

4

5

6

7

8

9

10

12

14

16

18

20

22

24

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

Drawing in Java

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

• 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);

• 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.

• 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.

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

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