TCSS 305 Stepp

1
TCSS 305 (Stepp)

• Drawing 2D Graphics with DrawingPanel
• Horstmann Ch. 7 pp. 258-283
• Java Tutorial Java 2D Graphics.http//java.sun.c
  om/docs/books/tutorial/2d/

2
Graphical objects

• We can draw graphics on the screen by interacting
  with three classes
• DrawingPanel A window on the screen.
• This is not part of Java it is provided by the
  instructor.
• Graphics A "pen" that can draw shapes and lines
  onto a window.
• Color The colors that indicatewhat color to
  draw our shapes.
• These three graphical entities areexamples of
  objects, which we'lldiscuss later in detail.

3
DrawingPanel

• To make a window appear on the screen, we must
  create a DrawingPanel object
• DrawingPanel ltnamegt new DrawingPanel(ltwidthgt,
  ltheightgt)
• Example
• DrawingPanel panel new DrawingPanel(300, 200)
• The window has nothingon it, but we can
  drawshapes and lines on itusing another
  objectof a type named Graphics.
• Using Graphics requires us toplace an import
  statement in our program import java.awt.

4
Graphics object

• Shapes are drawn on a DrawingPanel using an
  object named Graphics.
• To create a Graphics object for drawing
• Graphics ltnamegt ltnamegt .getGraphics()
• Example
• Graphics g panel.getGraphics()
• Once you have the Graphicsobject, you can draw
  shapesby calling methods on it.
• Example
• g.fillRect(10, 30, 60, 35)
• g.fillOval(80, 40, 50, 70)

5
Graphics methods

• Here are the drawing commands we can execute

6
Calling methods of objects

• Graphics is an "object" that contains methods
  inside it.
• When we want to draw something, we don't just
  write the method's name. We also have to write
  the name of the Graphics object, which is usually
  g, followed by a dot.
• Calling a method of an object, general syntax
• ltnamegt . ltmethod namegt ( ltparameter(s)gt )
• Examples
• Graphics g panel.getGraphics()
• g.drawLine(20, 30, 90, 10) // tell g to draw a
  line
• There's much more to objects than this we'll
  come back to them soon.

7
Colors

• Shapes can be drawn in many colors.
• Colors are specified through global constants in
  the Color class named BLACK, BLUE, CYAN,
  DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA,
  ORANGE, PINK, RED, WHITE, YELLOW
• Example
• g.setColor(Color.BLACK)
• g.fillRect(10, 30, 100, 50)
• g.setColor(Color.RED)
• g.fillOval(60, 40, 40, 70)
• The background color of a DrawingPanel can be set
  by calling its setBackground method
• Example
• panel.setBackground(Color.YELLOW)

8
Coordinate system

• Each (x, y) position on the DrawingPanel is
  represented by one pixel (one tiny dot) on the
  screen.
• The coordinate system used by DrawingPanel and
  Graphics has its origin (0, 0) at the window's
  top-left corner.
• The x value increases rightward and the y value
  increases downward.
• This is reversed from what you may expect from
  math classes.
• For example, the rectangle from (0, 0) to (200,
  100) looks like this
• (0, 0) -------
• ------- (200, 100)

9
Drawing example 1

• import java.awt.
• public class DrawingExample1
• public static void main(String args)
• DrawingPanel panel new
  DrawingPanel(300, 200)
• Graphics g panel.getGraphics()
• g.fillRect(10, 30, 60, 35)
• g.fillOval(80, 40, 50, 70)

10
Drawing with loops

• Using for loops, we can draw many repetitions of
  the same item by varying its x and y coordinates.
• The x or y coordinate's expression should contain
  the loop counter, i, so that in each pass of the
  loop, when i changes, so does x or y.
• DrawingPanel panel new DrawingPanel(400, 300)
• panel.setBackground(Color.YELLOW)
• Graphics g panel.getGraphics()
• g.setColor(Color.BLUE)
• for (int i 1 i lt 10 i)
• g.drawString("Hello, world!",
• 150 - 10 i, 200 10 i)
• g.setColor(Color.RED)
• for (int i 1 i lt 10 i)
• g.fillOval(100 20 i,
• 5 20 i, 50, 50)

11
Loops that change size

• A for loop can also vary the size of the shape or
  figure that it draws.
• DrawingPanel panel new DrawingPanel(300, 220)
• Graphics g panel.getGraphics()
• g.setColor(Color.MAGENTA)
• for (int i 1 i lt 10 i)
• g.drawOval(30, 5,
• 20 i, 20 i)

12
A loop that varies both

• The loop in this program affects both the size
  and shape of the figures being drawn.
• Each pass of the loop, the square drawn becomes
  20 pixels smaller in size, and shifts 10 pixels
  to the right.
• DrawingPanel panel new DrawingPanel(250, 200)
• Graphics g panel.getGraphics()
• for (int i 1 i lt 10 i)
• g.drawRect(20 10 i, 5,
• 200 - 20 i, 200 - 20 i)

13
Drawing example 2

• What sort of figure does the following code draw?
• import java.awt.
• public class DrawingExample2
• public static final int NUM_CIRCLES 10
• public static void main(String args)
• DrawingPanel panel new DrawingPanel(250,
  200)
• Graphics g panel.getGraphics()
• g.setColor(Color.BLUE)
• for (int i 1 i lt NUM_CIRCLES i)
• g.fillOval(15 i, 15 i, 30, 30)
• g.setColor(Color.MAGENTA)
• for (int i 1 i lt NUM_CIRCLES i)
• g.fillOval(15 (NUM_CIRCLES 1 - i),
  15 i, 30, 30)

14
Loops that begin at 0

• Often when working with graphics (and with later
  loops in general), we begin our loop count at 0
  and end one repetition earlier.
• A loop that repeats from 0 to lt 10 still repeats
  10 times, just like a loop that repeats from 1 to
  lt 10.
• But when the loop counter variable i is used to
  set the figure's coordinates, often starting i at
  0 gives us the coordinates we want.
• DrawingPanel panel new DrawingPanel(250, 250)
• Graphics g panel.getGraphics()
• g.drawRect(10, 10, 200, 200)
• for (int i 0 i lt 10 i)
• // lines on the upper-left half
• g.drawLine(10, 10 20 i,
• 10 20 i, 10)
• // lines on the lower-right half
• g.drawLine(10 20 i, 210,
• 210, 10 20 i)

15
Superimposing shapes

• Drawing one shape on top of another causes the
  last shape to appear on top of the previous
  one(s).
• import java.awt.
• public class DrawingExample3
• public static void main(String args)
• DrawingPanel panel new
  DrawingPanel(200, 100)
• panel.setBackground(Color.LIGHT_GRAY)
• Graphics g panel.getGraphics()
• g.setColor(Color.BLACK)
• g.fillRect(10, 30, 100, 50)
• g.setColor(Color.RED)
• g.fillOval(20, 70, 20, 20)
• g.fillOval(80, 70, 20, 20)
• g.setColor(Color.CYAN)
• g.fillRect(80, 40, 30, 20)

16
Drawing with parameters

• Imagine that we want to draw two figures as shown
  in the picture below.
• If you wish to repeat the same figure multiple
  times on the drawing panel, write a method that
  draws that figure and accepts the x/y position as
  parameters.
• Adjust all of your x/y coordinates of your
  drawing commands to take into account the
  parameters.
• Since you'll need to send commands to the
  Graphics g in order to draw the now parameterized
  figure, you should also pass Graphics g as a
  parameter.
• public static void drawCar(Graphics g, int x, int
  y)
• g.setColor(Color.BLACK)
• g.fillRect(x, y, 100, 50)
• // ...

17
Drawing with parameters

• Here is the complete program that uses a
  parameterized method to draw multiple car
  figures
• import java.awt.
• public class DrawingWithParameters
• public static void main(String args)
• DrawingPanel panel new
  DrawingPanel(260, 100)
• panel.setBackground(Color.LIGHT_GRAY)
• Graphics g panel.getGraphics()
• drawCar(g, 10, 30)
• drawCar(g, 150, 10)
• public static void drawCar(Graphics g, int x,
  int y)
• g.setColor(Color.BLACK)
• g.fillRect(x, y, 100, 50)
• g.setColor(Color.RED)
• g.fillOval(x 10, y 40, 20, 20)
• g.fillOval(x 70, y 40, 20, 20)

18
More parameters

• A new version where the cars can be resized
• public class DrawingWithParameters2
• public static void main(String args)
• DrawingPanel panel new
  DrawingPanel(210, 100)
• panel.setBackground(Color.LIGHT_GRAY)
• Graphics g panel.getGraphics()
• drawCar(g, 10, 30, 100)
• drawCar(g, 150, 10, 50)
• public static void drawCar(Graphics g, int x,
  int y, int size)
• g.setColor(Color.BLACK)
• g.fillRect(x, y, size, size / 2)
• g.setColor(Color.RED)
• g.fillOval(x size / 10, y 2 size /
  5,
• size / 5, size / 5)
• g.fillOval(x 7 size / 10, y 2
  size / 5,

19
Parameterized figure exercise

• Let's write a program together that will display
  the following figures on a drawing panel of size
  300x400
• top-left figure
• overall size 100
• top-left corner (10, 10)
• inner rectangle and oval size 50
• inner top-left corner (35, 35)
• top-right figure
• overall size 60
• top-left corner (150, 10)
• inner rectangle and oval size 30
• inner top-left corner (165, 25)
• bottom figure
• overall size 140
• top-left corner (60, 120)
• inner rectangle and oval size 70
• inner top-left corner (95, 155)

20
Parameterized figure exercise

• Write a program that will display the following
  figure using parameterized methods.
• Start with the "loops that begin at 0" program
  shown earlier in the slides.
• Use a parameter for the number of lines (as well
  as any other parameters you need).
• The second square is still 200x200 in size, but
  it is at (220, 30) and has 40 line loops compared
  to the original figure's 10.

21
Animation with sleep

• The DrawingPanel has a method named sleep that
  makes your program pause for a given number of
  milliseconds (thousandths of a second).
• You can use the sleep method to produce simple
  animations.
• DrawingPanel panel new DrawingPanel(250, 200)
• Graphics g panel.getGraphics()
• g.setColor(Color.BLUE)
• for (int i 1 i lt NUM_CIRCLES i)
• g.fillOval(15 i, 15 i, 30, 30)
• panel.sleep(500)
• Try adding sleep commands to loops in past
  exercises in this chapter and watch the panel
  draw itself piece by piece!

22
Advanced 2D Graphics
23
Drawing text strings

• Graphics
• public void drawString(String s, int x, int
  y)Draws given string with its first letter's
  bottom-left corner at the given location.
• The string is drawn using the Graphics's current
  color and font settings.
• Before drawing the string, you can set the font,
  color, and other attributes.(see next slides)

24
Fonts

• Graphics
• public void setFont(Font f)Sets this Graphics
  context to start writing text in the given font.
• java.awt.Font
• Text styles used when drawing Strings on the
  panel
• public Font(String name, int style, int size)
• some predefined font names
• "Serif", "SansSerif", "Monospaced"
• font styles (can be combined with operator)
• Font.BOLD
• Font.ITALIC
• Font.PLAIN

25
Graphics2D

• The Graphics object in the DrawingPanel is
  actually an object of a more powerful type named
  Graphics2D.
• Graphics2D is a subclass of Graphics.
• To use the new features of Graphics2D, you can
  cast the result of the .getGraphics() call on
  your DrawingPanel and treat it as a Graphics2D
  object.
• DrawingPanel panel new DrawingPanel(400, 300)
• Graphics2D g2 (Graphics2D) panel.getGraphics()

26
Graphics2D shape methods

• Instead of drawRect, fillOval, ... etc, use
• public void draw(Shape s)Draws the outline of
  the given shape using this Graphics2D's current
  pen.
• public void fill(Shape s)Draws outline and fills
  inside of given shape.
• Methods to transform the entire panel's
  appearance
• rotate, scale, translate, shear,
  transformPerform coordinate transformations on
  the Graphics2D context.
• Instead of setColor, you can use
• public void setPaint(Paint p)Paints are more
  versatile than Colors.

27
Colors and paints

• java.awt.Color(a simple single-colored paint)
• public Color(int r, int g, int b)
• public Color(int r, int g, int b, int alpha)
• a partially-transparent color (range 0-255,
  0transparent)
• public Color brighter(), darker()
• public static Color BLACK, BLUE, CYAN, DARK_GRAY,
  GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK,
  RED, WHITE, YELLOW
• java.awt.GradientPaint(smooth transition between
  2 colors)
• public GradientPaint(float x1, float y1, Color
  color1, float x2, float y2, Color color2)
• java.awt.TexturePaint(use an image as a "paint"
  background)

28
Shapes (in package java.awt.geom)

• Arc2D.Double(double x, double y, double w,
  double h, double start,
  double extent, int type)An arc, which is a
  portion of an ellipse.
• Ellipse2D.Double(double x, double y,
  double w, double h)An ellipse, which is a
  generalization of a circle.
• Line2D.Double(double x1, double y1, double x2,
  double y2)Line2D.Double(Point p1,
  Point p2)A line between two points.

29
Shapes

• Rectangle2D.Double(double x, double y,
  double w, double h)A rectangle, which is
  a generalization of a square.
• RoundRectangle2D.Double( double x, double y,
  double w, double h, double arcx, double arcy)A
  rounded rectangle.
• GeneralPath()A customizable polygon.

30
Methods of to all shapes

• public boolean contains(double x, double
  y)public boolean contains(Point2D p)
• Whether the given point is contained inside the
  bounds of this shape.
• public Rectangle getBounds()
• A rectangle representing the bounding box around
  this shape.
• public double getCenterX() / getCenterY()
• public double getMinX() / getMinY()
• public double getMaxX() / getMaxY()
• Various corner or center coordinates within the
  shape.
• public boolean intersects(double x, double y,
  double w, double h)
• public boolean intersects(Rectangle2D r)
• Whether this shape touches the given rectangular
  region.

31
Strokes (pen styles)

• Graphics2D
• public void setStroke(Stroke s)Sets type of
  drawing pen (color, width, style)that will be
  used by this Graphics2D.
• java.awt.BasicStroke
• A pen stroke for drawing outlines
• public BasicStroke(float width)
• public BasicStroke(float width, int cap,
  int join)
• public BasicStroke(float width, int cap, int
  join, float miterlimit, float dash, float
  dash_phase)
• cap CAP_BUTT, CAP_ROUND, CAP_SQUARE
• join JOIN_BEVEL, JOIN_MITER, JOIN_ROUND

32
Drawing example 1

• public void paintComponent(Graphics g)
• super.paintComponent(g)
• Graphics2D g2 (Graphics2D) g
• g2.fill(new Rectangle2D.Double(10, 30, 60,
  35))
• g2.fill(new Ellipse2D.Double(80, 40, 50,
  70))

33
Drawing example 2

• public void paintComponent(Graphics g)
• super.paintComponent(g)
• Graphics2D g2 (Graphics2D) g
• g2.setPaint(Color.BLACK)
• g2.fill(new Rectangle2D.Double(10, 30, 100,
  50))
• g2.setPaint(Color.RED)
• g2.fill(new Ellipse2D.Double(20, 70, 20,
  20))
• g2.fill(new Ellipse2D.Double(80, 70, 20,
  20))
• g2.setPaint(Color.CYAN)
• g2.fill(new Rectangle2D.Double(80, 40, 30,
  20))

34
Drawing example 3

• public void paintComponent(Graphics g)
• super.paintComponent(g)
• Graphics2D g2 (Graphics2D) g
• g2.setPaint(Color.BLUE)
• for (int i 1 i lt 10 i)
• g2.fill(new Ellipse2D.Double(15 i, 15
  i, 30, 30))
• g2.setPaint(Color.MAGENTA)
• for (int i 1 i lt 10 i)
• g2.fill(new Ellipse2D.Double(15 (11 -
  i), 15 i,
• 30, 30)

35
Drawing images

• Graphics2D
• public void drawImage(Image i, int x, int y,
  ImageObserver io)
• public void drawImage(Image i, int x, int y, int
  width, int height,
  ImageObserver io)Draws given image object on
  this Graphics context with its top-left corner at
  given location (pass the panel as the
  ImageObserver).

36
Classes for imaging

• java.awt.ToolkitGets images from disk or
  internet
• public static Toolkit getDefaultToolkit()
• public Image getImage(String filename)
• public Image getImage(URL address)
• java.awt.MediaTrackerEnsures that images are
  loaded fully
• public MediaTracker(Component comp)
• public void addImage(Image img, int id)
• public void waitForAll() throws
  InterruptedException
• java.awt.ImageRepresents a graphic image (BMP,
  GIF, ...)
• public int getWidth(ImageObserver obs)
• public int getHeight(ImageObserver obs)
• java.awt.image.BufferedImageA blank graphic
  image surface onto which you can draw
• public BufferedImage(int w, int h, int type)
• public Graphics getGraphics()

37
Images, continued

• Code to load an image
• Toolkit tk Toolkit.getDefaultToolkit()
• Image img tk.getImage("myimage.jpg")
• MediaTracker mt new MediaTracker(this)
• mt.addImage(img, 0) // any ID will do
• try
• mt.waitForAll()
• catch (InterruptedException ie)
• This is tedious!
• suggest making a helper method to load and return
  one image
• public Image loadImage(String filename)

38
Advanced anti-aliasing

• Onscreen text and shapes can have jagged edges,
  or aliases. These can be removed by smoothing,
  or anti-aliasing, the panel.
• Graphics2D
• public void setRenderingHint(
  RenderingHints.Key key, Object value)
• Exampleg2.setRenderingHint(RenderingHints.KEY_AN
  TIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)