Computer Science 111 Fundamentals of Computer Programming I

1
Computer Science 111Fundamentals of Computer
Programming I

• Introduction to simple graphics

2
The Graphics Class

• Java provides a Graphics class
• This is in the java.awt package
• This class provides methods for doing graphics in
  a window.
• There are rectangular regions of windows called
  panels that are often used for drawing rather
  than using the whole window itself.
• In the beginning, we will create a panel that
  takes up the entire window and draw in it.
• A panel has an object called a graphics context
  that is used to do the drawing.

3
The graphics coordinate system

• A graphics coordinate system is a system for
  identifying points within a panel - actually
  outside the panel as well.
• The points are referred to as picture elements or
  pixels
• The points within the panel all fall within one
  quadrant of the coordinate system - other points
  are not visible.
• The origin is in the upper left corner
• The x-coordinate increases to the right.
• The y-coordinate increases downward.

4
Coordinate system
(-50,0)
(0,0)
(50,0)
(50,50)
(0,50)
(0,0)
Panel 150 x 100
5
Some Graphics methods
6
Some Graphics methods
7
Fill versions of graphics methods

• fillRect is similar to drawRect except it fills
  in a solid rectangle
• fillOval is similar to drawOval except it fills
  in a solid oval

8
Accessing the graphics context

• The question is How do we access the graphics
  context of a window in order to do some drawing
  there?
• One answer is through the paintComponent method.

9
The paintComponent method

• Every panel has a paintComponent method with one
  parameter, the graphics context for the panel.
• This method is invoked by the Java Virtual
  Machine when the window with the panel is first
  opened.
• What does it do?
• It does things like painting the background, etc.

10
So, whats the deal with paintComponent?

• The paintComponent method is triggered by the
  JVM.
• It has a single parameter which is the graphics
  context of the panel.
• We can override this method to have things drawn
  in the panel when it is first opened, resized,
  etc.

11
Heres Plan 1

• To draw simple graphics we can
• Make a panel class for our application
• Override the paintComponent method in this class.
• Add the panel to our BreezySwing grid bag layout
  (the entire window for now)
• Use main as before
• Bingo!

12
Overriding paintComponent

• The paintComponent method has a single parameter
  which is the graphics context of the panel.
• void paintComponent (Graphics g) messages to
  have g draw in the window go here

13
Stupid panel class youll do better
14
Using the stupid panel class
15
Using the stupid panel class
16
Using the stupid panel class
17
Using the stupid panel class
18
Using graphics in other methods Plan 2

• Often we want to use graphics in buttonClicked or
  some other such method.
• To do this we declare a variable of type Graphics
  and use the getGraphics method. Graphics g
  getGraphics( )
• Then we can use g to do the drawing g.drawRect(
  10,20,30,50) etc.

19
Using a mouseClicked method
20
After a few clicks
21
Transient Image Problem

• When a window is resized or brought back to
  focus, a repaint method is invoked that
• Clears the panel
• Invokes the paintComponent method
• If images have been drawn outside the
  paintComponent method, they disappear since there
  is no graphics context object to redraw them.
  This happens with the latest version of the
  DrawBalls program.
• Sigh

22
Transient Image Problem

• One way to solve this problem is to keep track of
  what has been drawn and someway have the
  paintComponent redraw. We will illustrate this
  with the DrawBalls program.
• But first,

23
Parallel Arrays

• With enough sophistication, we could have a class
  of objects, each with multiple data values. We
  could then have arrays of these objects, and for
  each subscript, have access to that object and
  its various data values.
• Short of that, we often keep parallel arrays, say
  arrays A,B,C where for a given i, Ai,Bi,Ci
  are corresponding values for the same item. We
  can then loop through all 3 arrays
  simultaneously.
• With DrawBalls we use parallel arrays to keep up
  with the locations, sizes, and colors of the
  balls.

24
DrawBalls new version - paintComponent
25
DrawBalls new version - mouseClicked
26
Look, they're starting to move.