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