Computer Science 15-110, Spring 2010
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

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);
     }

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