Computer Science 15-100, Fall 2009
Class Notes:  Getting Started with Graphics

1. Display a Graphics Window
2. Paint a Filled Rectangle
3. Paint a Filled Oval
4. Paint Colors
   1. Built-in Colors
   2. Custom Colors
5. Paint to Fill the Window's Contents
6. Paint Overlapping Objects
7. Paint Centered Objects
8. Graphics Helper Methods
9. The "Thin White Stripe" or "Extra Pixel Problem"

Getting Started with Graphics

1. Display a Graphics Window

   import java.awt.*;
   import javax.swing.*;
   
   class MyGraphics extends JComponent {

     public void paint(Graphics page) {
       // Place your paint code here!
     }

     //////////////////////////////////////////////
     ///           END OF YOUR CODE             ///
     ///  (you may ignore all the code below!!! ///
     //////////////////////////////////////////////

     public Dimension getPreferredSize() {
       int initialWidth = 500;
       int initialHeight = 400;
       return new Dimension(initialWidth, initialHeight);
     }

     public static void main(String[] args) {
       JComponent jc = newInstance();
       JFrame frame = new JFrame(jc.getClass().getName());
       frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
       JPanel cp = new JPanel();
       cp.setLayout(new BorderLayout());
       cp.add(jc);
       frame.setContentPane(cp);
       frame.pack();
       frame.setVisible(true);
     }

     // Returns an instance of this class as a JComponent.  This is necessary so
     // students can rename this class without changing the "main" method's body.
     public static JComponent newInstance() {
       StackTraceElement[] trace = null;
       try { throw new RuntimeException(); }
       catch (Exception e) { trace = e.getStackTrace(); }
       try { return (JComponent)Class.forName(trace[0].getClassName()).newInstance(); }
       catch (Exception e) { return null; }
     }
   }

2. Paint a Filled Rectangle
    
   1. A small rectangle

        public void paint(Graphics page) {
          page.fillRect(10, 10, 50, 100);
        }

   2. A wider rectangle

        public void paint(Graphics page) {
          page.fillRect(10, 10, 250, 100);
        }

   3. A taller rectangle

        public void paint(Graphics page) {
          page.fillRect(10, 10, 50, 250);
        }

   4. A rectangle moved to the right

        public void paint(Graphics page) {
          page.fillRect(150, 10, 150, 100);
        }

   5. A rectangle moved down

        public void paint(Graphics page) {
          page.fillRect(10, 150, 150, 100);
        }

3. Paint a Filled Oval

     public void paint(Graphics page) {
       page.fillOval(10, 10, 50, 100);
     }

4. Paint Colors
    
   1. Built-in Colors

        public void paint(Graphics page) {
          page.setColor(Color.green);
          page.fillRect(10, 10, 50, 100);
        }

      Example with All 16 Built-in Colors: 

        public void paint(Graphics page) {
          page.setColor(Color.black);
          page.fillRect(20, 20, 20, 20);
      
          page.setColor(Color.blue);
          page.fillRect(40, 20, 20, 20);
      
          page.setColor(Color.cyan);
          page.fillRect(60, 20, 20, 20);
      
          page.setColor(Color.darkGray);
          page.fillRect(80, 20, 20, 20);
      
          page.setColor(Color.gray);
          page.fillRect(100, 20, 20, 20);
      
          page.setColor(Color.green);
          page.fillRect(120, 20, 20, 20);
      
          page.setColor(Color.lightGray);
          page.fillRect(140, 20, 20, 20);
      
          page.setColor(Color.magenta);
          page.fillRect(160, 20, 20, 20);
      
          page.setColor(Color.orange);
          page.fillRect(180, 20, 20, 20);
      
          page.setColor(Color.pink);
          page.fillRect(200, 20, 20, 20);
      
          page.setColor(Color.red);
          page.fillRect(220, 20, 20, 20);
      
          page.setColor(Color.white);
          page.fillRect(240, 20, 20, 20);
      
          page.setColor(Color.yellow);
          page.fillRect(260, 20, 20, 20);
        }

   2. Custom Colors

        public void paint(Graphics page) {
          // For a list of colors, see:  http://en.wikipedia.org/wiki/List_of_colors
          Color amethyst = new Color(153, 102, 204);
          page.setColor(amethyst);
          page.fillRect(10, 10, 50, 100);
        }

5. Paint to Fill the Window's Contents

     public void paint(Graphics page) {
       // Resize the window, see how the blue rectangle still fills the window!
       int width = getWidth();
       int height = getHeight();
       page.setColor(Color.blue);
       page.fillRect(0, 0, width, height);
     }

6. Paint Overlapping Objects
   
   

     public void paint(Graphics page) {
       // Note which rectangle is in front and which is in back!
       page.setColor(Color.blue);
       page.fillRect(0, 0, 50, 50);

       page.setColor(Color.red);
       page.fillRect(25, 25, 50, 50);

       page.setColor(Color.yellow);
       page.fillRect(15, 15, 25, 25);
     }

7. Paint Centered Objects
   
   

     public void paint(Graphics page) {
       // Center a 200x100 blue rectangle in the window
       int width = getWidth();
       int height = getHeight();
       int blueWidth = 200;
       int blueHeight = 100;
       int blueLeft = (width - blueWidth)/2;
       int blueTop  = (height - blueHeight)/2;
       page.setColor(Color.blue);
       page.fillRect(blueLeft, blueTop, blueWidth, blueHeight);

       // Center a yellow oval inside the blue rectangle with the given "margin"
       int margin = 10;
       page.setColor(Color.yellow);
       page.fillOval(blueLeft+margin, blueTop+margin, blueWidth-2*margin, blueHeight-2*margin);
     }

8. Graphics Helper Methods
   See GraphicsHelperMethodDemo.java
    
9. The "Thin White Stripe" or "Extra Pixel Problem"
   See ExtraPixelProblem.java

carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem   -   carpe diem