Graphics

Document Sample
Graphics Powered By Docstoc
					    159.235 Graphics & Graphical
            Programming
          Lecture 3 - Drawing Primitives &
          Transforms and some Java codes



159.235                 Graphics             1
        Drawing Primitives - Outline
• Drawing Primitives           • Coordinate Transforms
   – Java Swing:                    –   Translation
        • drawLine()                –   Rotation
        • drawRect()
                                    –   Scaling
        • drawString()
                                    –   Shearing
   – Simple shapes:
        • Rectangle
        • Ellipse              • Coordinate Clipping
• Java Applications                 – Rectilinear
   – JFrame Objects                 – By shape
   – JPanel Objects
  159.235                Graphics                      2
                Java Applications
• Full “normal” programs • We have to supply a lot of extra
  or applications that can   startup wrapper code, that
                             applets supply automatically
  be run in stand alone
  mode
                           • Extend a Frame or JFrame
• More complicated to        object
  write simple programs
  than for “Applets”       • JFrame is Swing entity - we will
                                 normally use these rather than
                                 the older AWT equivalents


   159.235                 Graphics                          3
import javax.swing.*; // the Java eXtensions "Swing" graphics kit
import java.awt.*; // the Java Abstract Windowing Toolkit                    // an inner class to hold our graphical code
                                                                              public class DisplayArea extends JPanel{ // extends Java Swing
// a test class to experiment with simple graphics in a JFrame                    JPanel
public class MyProg01 extends JFrame{
                                                                                  public DisplayArea( Rectangle bounds ){ // default constructor
  private static final int DISPLAY_WIDTH = 532; // constants                        setLayout(null);
  private static final int DISPLAY_HEIGHT = 532;                                    setBounds( bounds);
                                                                                    setOpaque(false);
  public static void main( String args[] ){ // bootstraps our MyProg01            }
                                            // Object
     new MyProg01();                                                              public void paintComponent( Graphics g ){ // same code as we
  }                                                                                                                        // used in Applet01

  public MyProg01(){ // the default (no arguments) constructor                      Graphics2D g2 = (Graphics2D)g; // we will use a
     super("MyProg01 in a JFrame"); // calsl JFrame's constructor                 Graphics2D
     setDefaultCloseOperation(EXIT_ON_CLOSE); // allow us to
                                                         //close with                 g2.setBackground( Color.white );
                                                         // a mouse click             g2.clearRect( 0, 0, getWidth(), getHeight() );
     setResizable(false); // disallow user to resize at run time with
                          // mouse                                                    g2.setColor( Color.black );
     getContentPane().setLayout(null); // disengage default layout                    g2.fillRect( 10, 10, 20, 20 );
                                         // manager
                                                                                      g2.drawRect( 0, 0, getWidth()-1, getHeight()-1 );
      // create a DisplayArea object and add to the object
                                                                                  }
      getContentPane().add( new DisplayArea(
                                                                              }
        new Rectangle( 0, 0, DISPLAY_WIDTH,DISPLAY_HEIGHT) )
      );
                                                                            } // end of class MyProg01
      setSize( DISPLAY_WIDTH, DISPLAY_HEIGHT);

      setVisible(true);
  }        159.235                                                   Graphics                                                             4
              Running MyProg01
• Appears as a black              • Our Window manager
  rectangle on white                will set up a separate
  background                        window for our
• Note the Structure:               program, with its own
   – A JPanel inside a JFrame       graphics etc.
   – paintComponent() method      • This can be run from
   – We will look at other          command line as
     Java and Swing features        normal.
     in detail later

   159.235                  Graphics                         5
public void paintComponent( Graphics g ){
                                                                    • MyProg02
    Graphics2D g2 = (Graphics2D)g;
    g2.setBackground( Color.white );                                      – same wrapping code as Prog01
    g2.clearRect( 0, 0, getWidth(), getHeight() );
     System.out.println( "paintComponent sees width as: "+getWidth() );   – Different drawing commands
     System.out.println( "paintComponent sees height as: "+getHeight()
        );

    g2.setColor( Color.black );                                     • Each time paintComponent()
    g2.fillRect( 10, 10, 20, 20 );
                                                                      is called (by the system) it
    g2.drawRect( 0, 0, getWidth()-1, getHeight()-1 );
                                                                      will print out:
    g2.drawLine( 0, 0, getWidth()-1, getHeight()-1 );                        paintComponent sees width as: 532
    g2.drawLine( getWidth()-1, 0, 0, getHeight()-1 );                        paintComponent sees height as: 532

    g2.setColor( Color.green );
                                                                    • We can use setResizeable(true) in
    g2.drawString( "Hello 159.235!", 2*getWidth()/5, getHeight()/4 );
                                                                      the code wrapper to allow the user
    g2.setColor( Color.red );
    g2.fill( new Rectangle( 10, 110, 110, 210 ) );                    to change the windo size at run
                                                                      time.
    g2.setColor( Color.blue );
    g2.fill( new Ellipse2D.Double( 290, 290, 100, 100 ) );
}


          159.235                                                Graphics                                         6
          MyProg02 Output




159.235         Graphics    7
          Translation Transforms
• translate( x, y );            • Moves the origin by
                                  some amount x, y
• Can be applied to the
  Graphics or                   • Does not distort
  Graphics2D objects            • Slides the drawing
                                  around in the
                                  Cartesian Coordinate
                                  space

159.235                   Graphics                       8
              Rotation transforms
• rotate( angle);               • Rotates or twists the
                                  drawing around
• Angle in radians              • Convention is that a
• (reminder a full rotation       positive angle is
  is 2 pi radians)                from +ve x-axis to +ve
                                  y-axis
• Can be applied to
  Graphics and Graphics2D       • Can be confusing if y
                                  “is down”

   159.235                Graphics                     9
            Scaling Transforms
• scale( x, y );            • Stretches the
                              coordinate space
• Can be applied to         • Useful one is:
  Graphics and                   – scale( 1.0, -1.0);
  Graphics2D                     – Makes y “go up”




159.235               Graphics                          10
            Shearing Transforms
• shear( shx, shy );             • Distorts the drawing
• First argument is amount         space
  of shear in direction of x
  as factor of y                 • Can be applied to
• Second is amount of              Graphics and
  shear in direction of y as       Graphics2D objects
  a factor of x


  159.235                  Graphics                       11
g2.setColor( Color.black );
g2.drawString( "Black is Original rectangle", 20, 20 );                     • MyProg03
g2.setColor( Color.blue );
g2.drawString( "Blue is rotated by +22.5 degrees", 20, 50 );                   – Uses same wrapper as
g2.setColor( Color.red );                                                        Progs 01 and 02
g2.drawString( "Red is scaled by (1.5,1.5) ", 20, 80 );
g2.setColor( Color.green );                                                    – Demonstrates Affine
g2.drawString( "Green is the red sheared by (-1.5, 0)", 20, 110 );               Transforms
g2.translate( getWidth()/2, getHeight()/2 ); // move origin to centre          – Remember y is down, so
                                                                                 positive angles look
g2.setColor( Color.black );
g2.drawRect( 0, 0, 100, 100 ); // remember y is "upside down"
                                                                                 “negative”
                                                                               – (Positive angles go from
g2.rotate( Math.toRadians( 22.5 ) ); // rotate coords by +22.5 degrees
g2.setColor( Color.blue );                                                       +ve x-axis to +ve y-axis
g2.drawRect( 0, 0, 100, 100 );                                                   by convention)
g2.rotate( Math.toRadians( -22.5 ) ); // rotate back by -22.5 degrees       • We will look at the
g2.scale( 1.5, 1.5 );
g2.setColor( Color.red );                                                     trigonometry and matrix
g2.drawRect( 0, 0, 100, 100 );                                                notations for these
g2.setColor( Color.green ); // the scale is still in effect                   transforms in detail later
g2.shear( -1.5, 0.0 ); // now shear by -1.5
g2.drawRect( 0, 0, 100, 100 );



        159.235                                                  Graphics                            12
          MyProg03 Output




159.235         Graphics    13
g2.setBackground( Color.green );                                         • MyProg04
g2.clearRect( 0, 0, getWidth(), getHeight() );
                                                                         • Same wrapper as 01-
g2.setColor( Color.black );
g2.translate( getWidth()/2, getHeight()/2 ); // centre origin              03
for(int i=0;i<120;i++){ // draw 120 squares                              • Uses a Constant int
    g2.rotate( Math.toRadians(-12) ); // -12 degrees                       SQUARE_SIZE =10
    g2.translate( i, 0 ); // slide the origin
    g2.scale( 1.005, 1.005 ); // make the squares progressively larger   • Draws a spiral pattern
    g2.setColor( new Color( i/120.0F, 0.0F, 0.0F) ); // shades of Red      by successive affine
    g2.fillRect( -SQUARE_SIZE/2,-
      SQUARE_SIZE/2,SQUARE_SIZE,SQUARE_SIZE);                              transform applications
    g2.setColor( Color.white ); // use white border for squares          • Rotate by 12 degrees,
    g2.drawRect( -SQUARE_SIZE/2,-
      SQUARE_SIZE/2,SQUARE_SIZE,SQUARE_SIZE);                              then translate
    g2.translate( -i, 0 ); // slide origin back                            progressively
}




           159.235                                          Graphics                        14
          MyProg04 Output




159.235         Graphics    15
                                Clipping Example
g2.setBackground( Color.green );
                                                           • Clipping means limiting
g2.clearRect( 0, 0, getWidth(), getHeight() );               the drawing area - ie
// A rectangular clipping region:                            clipping unwanted parts
//g2.setClip( 100, 100, 400, 400 );
//g2.setColor( Color.black );                              • MyProg05 example code
//g2.drawRect( 100, 100, 400-1, 400-1 );
                                                           • We can use simple
// A circular clipping region:
g2.setClip( new Ellipse2D.Double( 50, 50, 400, 400 ) );
                                                             rectilinear clipping shapes
     // x,y, w, h                                            (commented out here)
g2.setColor( Color.red );
g2.fillRect( 50, 50, 200, 200 ); // x, y, w, h
                                                           • Or more complex shapes
g2.fillRect( 250, 250, 200, 200 );                           - eg a circle


     159.235                                         Graphics                      16
          Clipping Example Output




159.235             Graphics        17
                    Summary
• We can Write Java             • Transforms can be applied to
  applications that run in        the drawing space
  their own Window using          coordinates
  JFrames                       • Clipping can be applied to
                                  limit where we draw
• The Swing library
  abounds with interesting
                                • The programs in this lecture
  drawing primitives              use static drawing code
• There are useful shapes as    • Want to write more interesting
  well as simple routines         programs that dynamically
                                  decide what to render…


   159.235                Graphics                         18

				
DOCUMENT INFO