Lecture 15 intro to graphics
Download
1 / 15

Lecture 15: Intro to Graphics - PowerPoint PPT Presentation


  • 360 Views
  • Updated On :

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

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

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


An Image/Link below is provided (as is) to download presentation

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 l.jpg

Lecture 15: Intro to Graphics

Yoni Fridman

7/25/01


Outline l.jpg
Outline

  • Basics of graphics

    • Pixels

    • Coordinates

  • The Graphics class

    • Graphics contexts

  • Drawing in Java

    • Lines

    • Shapes

  • Colors

    • The Color class

    • RGB


Pixels l.jpg
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 l.jpg

x

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.


The graphics class l.jpg
The Graphics Class

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


Drawing in java l.jpg
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 java7 l.jpg

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

  • 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


Drawing in java8 l.jpg

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


Drawing in java9 l.jpg
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 java10 l.jpg

0

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?


The color class l.jpg
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 l.jpg
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 blue13 l.jpg
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 blue14 l.jpg
RGB – Red, Green, Blue

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


Homework l.jpg
Homework

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


ad