• Defined:
  • The process of taking an internal representation of visual content and presenting it on a visual output device
• Rendering Engines in Java:
  • Graphics
  • Graphics2D

• The RGB Model:
  • Begin with black then add red, green, and or blue
  • An additive model
  • Often used for displays/monitors
• The CMYK Model:
  • Begin with white then remove cyan, magenta, and/or yellow
  • A subtractive model
  • Often used for printing

• Coordinates:
  • Quantities (linear and/or angular) that designate the position of a point in relation to a given reference frame
• In Java:
  • 

• Clipping Defined:
  • Limiting the portion of the object that will be "drawn" by the rendering engine
• Clipping in Java:
  • Methods in the Graphics2D class

• Composition Defined:
  • Combining the points being drawn (the source points) with the points on the background (the destination points)
• Composition Using Alpha Blending:
  • Four channels -- one each for red, green and blue and one for alpha (a weighting factor)

• The Source Over Destination Rule:
  • \(R_d = R_s + R_d (1 - \alpha_s)\)
  • \(G_d = G_s + G_d (1 - \alpha_s)\)
  • \(B_d = B_s + B_d (1 - \alpha_s)\)
  • \(\alpha_d = \alpha_s + \alpha_d (1 - \alpha_s)\)
• Alpha Blending in Java:
  • The AlphaComposite class

• The JComponent Class:
  • A part of a GUI
  • When it needs to be rendered its paint(java.awt.Graphics) method is called and is passed a rendering engine
• Rendering:
  • Write a class that extends JComponent
  • Override its paint() method

javaexamples/graphics/BoringComponent.java

import java.awt.*;
import javax.swing.*;


/**
 * A concrete extension of a JComponent that illustrates
 * the process of obtaining and using a rendering engine
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class BoringComponent extends JComponent
{

    /**
     * Render this BoringComponent
     *
     * @param g   The rendering engine to use
     */
    public void paint(Graphics g)
    {
       Graphics2D         g2;
       
       // Cast the rendering engine appropriately
       g2 = (Graphics2D)g;
       

       // Put the rendering code here
    }

}

        

• Color Sampling:
  • Converting from a continuous "rainbow" of colors to a discrete finite palette of colors
  • Sometimes called quantization
• Spatial Sampling:
  • Another name for spatial discretization
  • The most common scheme involves the use of a finite grid with equal size cells

• The Result:
  • A grid (or matrix) of picture elements (or pixels), each of which contains a single color in the palette
  • Sometimes called a raster representation
• An Illustration:
  • 

• Images
• Bitmapped Fonts

• The Abstract Parent:
  • Image
• BufferedImage
  • Has a ColorModel
  • Has a Raster

• Reading Sampled Content:
  • Objects can be read from a file using the static read() method in the ImageIO class
• Rendering Sampled Content:
  • The drawImage(Image i, int x, int y, null) method in the Graphics class

javaexamples/graphics/ImageComponent.java

import java.awt.*;
import javax.swing.*;

/**
 * A concrete extension of a JComponent that illustrates
 * the rendering of sampled static visual content
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class ImageComponent extends JComponent
{
    private Image        image;
    

    /**
     * Explicit Value Constructor
     *
     * @param image   The Image to render
     */
    public ImageComponent(Image image)
    {
       this.image = image;
    }

    /**
     * Render this ImageCanvas
     *
     * @param g   The rendering engine to use
     */
    public void paint(Graphics g)
    {
       Graphics2D         g2;
       
       // Cast the rendering engine appropriately
       g2 = (Graphics2D)g;
       
       // Render the image
       g2.drawImage(image,  // The Image to render
                    0,      // The horizontal coordinate
                    0,      // The vertical coordinate
                    null);  // An ImageObserver
    }
}

        

javaexamples/graphics/ImageComponentDriver.java

import java.awt.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;

/**
 * An example that illustrates the rendering of sampled static visual
 * content
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class ImageComponentDriver implements Runnable
{
    private String name;
    
    /**
     * The entry point of the application.
     *
     * @param args The command line arguments (args[0] is the file)
     */
    public static void main(String[] args) throws Exception
    {
        String name;
        
        if (args.length == 0) name = "firstsnow.gif";
        else                  name = args[0];
       
        SwingUtilities.invokeAndWait(new ImageComponentDriver(name));
    }

    /**
     * Construtor.
     *
     * @param name  The name of the file to read
     */
    public ImageComponentDriver(String name)
    {
        super();
        this.name = name;
    }
    
    /**
     * The code to run in the event dispatch thread.
     */
    public void run()
    {
        try
        {
            // Read the Image
            Image image = ImageIO.read(new File(name));

            // Construct the JComponent
            JComponent component = new ImageComponent(image);          

            // Construct the JFrame and add the JComponent
            JFrame frame = new JFrame();
            frame.setSize(600,400);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            JPanel contentPane = (JPanel)frame.getContentPane();
            contentPane.setLayout(new BorderLayout());
            contentPane.add(component, BorderLayout.CENTER);
            frame.setVisible(true);
        }
        catch (IOException ioe)
        {
            System.out.println("Unable to load image!");
        }
    }
}
        

• The Concept:
  • Describe the content using geometric shapes
• Encapsulation in Java:
  • Objects that implement the Shape interface
• Rendering:
  • draw(Shape s)
  • fill(Shape s)

• 0-Dimensional:
  • Points (Point2D )
• 1-Dimensional:
  • Lines (Line2D )
  • Curves (CubicCurve2D and QuadCurve2D )
• 2-Dimensional:
  • Rectangles(Rectangle2D )
  • Polygons (GeneralPath )
  • Ellipses (Ellipse2D )

javaexamples/graphics/RandomRectangleComponent.java

import java.awt.*;
import java.awt.geom.*;
import java.util.Random;
import javax.swing.*;

/**
 * A JComponent that renders a Rectangle with randomly
 * generated attributes each time it's paint method is called
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class RandomRectangleComponent extends JComponent
{
    private Random      generator;

    
    /**
     * Default Constructor
     */
    public RandomRectangleComponent()
    {
       super();
       generator = new Random(System.currentTimeMillis());       
    }
    
    /**
     * Paint this Component
     *
     * @param g   The rendering engine to use
     */
    public void paint(Graphics g)
    {
       Graphics2D      g2;       
       int             height, maxHeight, maxWidth, width, x, y;
       Rectangle       rectangle;
        

       g2 = (Graphics2D)g;

       maxHeight = getHeight();
       maxWidth  = getWidth();

       x      = generator.nextInt(maxWidth  - 1);
       y      = generator.nextInt(maxHeight - 1);
       width  = generator.nextInt(maxWidth  - x - 1);
       height = generator.nextInt(maxHeight - y - 1);

       rectangle = new Rectangle(x, y, width, height);
       
       g2.draw(rectangle);       
    }
}
        

• Basics:
  • A point is defined by its x (i.e., horizontal) andy (i.e., vertical) coordinates
  • Point2D
• An Example:

javaexamples/graphics/SimpleShapeComponent.java (Fragment: point)

       // Construct a point
       point = new Point2D.Double(20.0, 30.0);
        

• What You Know:
  • A line is often defined as the set of pairs, <x,y>, that satisfy: \(y = A x + B\) for given values of A and B
• Shortcomings:
  • Can't represent vertical lines
  • We are interested in line segments not lines
  • Not very intuitive

• Parametric Form:
  • \(x(u) = u^0 a_x + u^1 b_x\)
  • \(y(u) = u^0 a_y + u^1 b_y\)
• Constraints:
  • We want \((x(0),y(0)) = p\) (one endpoint)
  • We want \((x(1),y(1)) = q\) (the other endpoint)
• Implications:
  • \(x(u) = p_x + u q_x - u p_x = (1-u) p_x + u q_x\)
  • \(y(u) = p_y + u q_y - u p_y = (1-u) p_y + u q_y\)

javaexamples/graphics/SimpleShapeComponent.java (Fragment: line)

       // Construct a line
       line = new Line2D.Double(0.0, 0.0, 50.0, 75.0);
        

• Basics:
  • \(x(u) = (1 - u)^2 p_x + 2(1-u)u r_x + u^2 q_x\)
  • \(y(u) = (1 - u)^2 p_y + 2(1-u)u r_y + u^2 q_y\)
  • QuadCurve2D uses the end points and a control point
  • 
• An Example:

javaexamples/graphics/SimpleShapeComponent.java (Fragment: quadcurve)

       // Construct a quadratic curve
       quadraticCurve = new QuadCurve2D.Double(
                                     120.0, 120.0,  // End 1
                                     300.0, 180.0,  // Control
                                     130.0, 190.0); // End 2
        

• Basics:
  • \(x(u) = (1 - u)^3 p_x + 3(1-u)^2u r_x + 2(1-u)^2u s_x + u^3 q_x\)
  • \(y(u) = (1 - u)^3 p_y + 3(1-u)^2u r_y + 2(1-u)^2u s_y + u^3 q_y\)
  • CubicCurve2D uses the end points and two control points
  • 
• An Example:

javaexamples/graphics/SimpleShapeComponent.java (Fragment: cubiccurve)

       // Construct a cubic curve
       cubicCurve = new CubicCurve2D.Double(
                                   320.0, 320.0,  // End 1
                                   300.0, 180.0,  // Control 1
                                   330.0, 370.0,  // End 2
                                   360.0, 390.0); // Control 2
        

• Basics:
  • Rectangles are typically defined using one corner, a width, and a height
  • Rectangle2D
• An Example:

javaexamples/graphics/SimpleShapeComponent.java (Fragment: rectangle)

       // Construct a rectangle
       rectangle = new Rectangle2D.Double(
                                     10.0, 20.0, // Upper Left
                                     30.0,       // Width
                                     60.0);      // Height
        

• Basics:
  • Often defined using a center, major diameter, and minor diameter
  • Ellipse2D uses the bounding rectangle
  • 
• An Example:

javaexamples/graphics/SimpleShapeComponent.java (Fragment: arc)

       // Construct an arc
       arc = new Arc2D.Double(10.0, 200.0, // Upper Left
                              150.0,       // Width
                              100.0,       // Height
                              0.0,         // Starting Angle
                              135.0,       // Angular Extent        
                              Arc2D.PIE);  // Type        
        

• Glyph:
  • A shape that represents one or more characters
• Font:
  • A set of glyphs

• Important Terms:
  • Width
  • Left-Side Bearing (LSB)
  • Right-Side Bearing (RSB)
  • Advance (the sum of the above)
• Sign:
  • Width is always positive
  • LSB and RSB can be negative

• More Important Terms:
  • Ascent
  • Descent
  • Leading (pronounced led-ing)
  • Height (the sum of the above)
• Note:
  • These are properties of the font, not individual glyphs

• FontRenderContext
  • Keeps information about fonts
• Font
  • Can create a GlyphVector
• LineMetrics
  • Keeps information about font and line heights

javaexamples/graphics/GlyphComponent.java

import java.awt.*;
import java.awt.font.*;
import javax.swing.*;

/**
 * A JComponent that displays a GlyphVector
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class GlyphComponent extends JComponent
{
    protected Font                font;
    protected String              text;


    /**
     * Explicit Value Constructor
     */
    public GlyphComponent(String text)
    {
        super();
        setText(text);
        

        // Construct a (logical) font
        font  = new Font("Serif", Font.ITALIC, 100);
    }


    /**
     * Paint this component
     *
     * @param g   The Graphics context to use
     */
    public void paint(Graphics g)
    {
        Graphics2D              g2;

        g2 = (Graphics2D)g;

        // Set the font
        g2.setFont(font);

        // Use antialiasing for text and shapes
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);

        // Use high-quality rendering
        g2.setRenderingHint(RenderingHints.KEY_RENDERING,
                    RenderingHints.VALUE_RENDER_QUALITY);

        // Use floating point for font metrics
        g2.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS,
                    RenderingHints.VALUE_FRACTIONALMETRICS_ON);


        // Render the glyphs
        if (text != null) paintGlyphs(g2, text);
    }



    /**
     * Render a String
     */
    protected void paintGlyphs(Graphics2D g2, String text)
    {
        FontRenderContext       frc;
        GlyphVector             glyphs;
        Shape                   shape;

        frc = g2.getFontRenderContext();

        glyphs = font.createGlyphVector(frc, text);
        shape = glyphs.getOutline(0.0f, 100.0f);

        g2.setColor(Color.BLACK);
        g2.draw(shape);
    }



    /**
     * Set the text associated with this component
     */
    public void setText(String text)
    {
        this.text = text;
    }
}
        

javaexamples/graphics/GlyphMetricsComponent.java

import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import javax.swing.*;


/**
 * A JComponent that displays a GlyphVector and LineMetrics
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class GlyphMetricsComponent extends GlyphComponent
{

    /**
     * Explicit Value Constructor
     */
    public GlyphMetricsComponent(String text)
    {
       super(text);

       // Construct a (logical) Font
       font  = new Font("Serif", Font.PLAIN, 100);
    }


    /**
     * Render the glyphs and the metrics
     *
     * Note: There are better approaches.  This method
     * is used for illustrative purposes only.
     */
    protected void paintGlyphs(Graphics2D g2, String text)
    {
       FontRenderContext       frc;
       GlyphVector             glyphs;

       frc     = g2.getFontRenderContext();
       glyphs  = font.createGlyphVector(frc, text);

       LineMetrics             lm;

       lm      = font.getLineMetrics(text, frc);

       float                   ascent, descent, height, leading;

       // Get the various metrics
       ascent  = lm.getAscent();
       descent = lm.getDescent();
       height  = lm.getHeight();
       leading = lm.getLeading();

       Dimension               d;
       float                   baseline, pWidth, y;
       Rectangle2D             bounds;
       Shape                   shape;
       d = getSize();
       g2.setColor(Color.BLACK);

       baseline = (float)(d.height)/2.0f;
       pWidth   = (float)(d.width);

       // Draw the metrics
       y = baseline - ascent;
       g2.setColor(Color.BLUE);
       g2.draw(new Line2D.Float(0.0f, y, pWidth, y));

       y = baseline;
       g2.setColor(Color.WHITE);
       g2.draw(new Line2D.Float(0.0f, y, pWidth, y));

       g2.setColor(Color.RED);
       y = baseline + descent;
       g2.draw(new Line2D.Float(0.0f, y, pWidth, y));

       if (leading > 0) 
       {
          y = baseline + descent + leading;
          g2.setColor(Color.GREEN);
          g2.draw(new Line2D.Float(0.0f, y, pWidth, y));
       }

       // Get the outline at (0,baseline)
       shape = glyphs.getOutline(0, baseline);

       g2.setColor(Color.BLACK);
       g2.draw(shape);
       g2.fill(shape);
    }

}
        

javaexamples/graphics/CenteredGlyphComponent.java

import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import javax.swing.*;


/**
 * A JPanel that displays a GlyphVector centered
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class CenteredGlyphComponent extends GlyphComponent
{

    /**
     * Explicit Value Constructor
     */
    public CenteredGlyphComponent(String text)
    {
        super(text);
    }


    /**
     * Render the glyphs centered
     *
     * Note: There are better approaches.  This method
     * is used for illustrative purposes only.
     */
    protected void paintGlyphs(Graphics2D g2, String text)
    {
        FontRenderContext       frc;
        GlyphVector             glyphs;
        Rectangle2D             bounds;
        Shape                   shape;

        frc = g2.getFontRenderContext();
        glyphs = font.createGlyphVector(frc, text);

        g2.setColor(Color.black);

        // Get the outline at (0,0)
        shape = glyphs.getOutline();

        // Get the bounding box
        bounds = glyphs.getVisualBounds();

        Dimension               d;
        float                   x, y;

        d = getSize();

        // Center the text
        x = (float)(d.width/2-bounds.getWidth()/2);
        y = (float)(d.height/2+bounds.getHeight()/2);

        // Get the outline when centered
        shape = glyphs.getOutline(x,y);

        g2.draw(shape);
    }



}
        

• An Observation:
  • It is sometimes inconvenient to create the Shape objects and render them
• Convenience Methods:
  • Graphics2D.drawGlyphVector(java.awt.font.GlyphVector, float, float)
  • Graphics2D.drawString(java.lang.String, float, float)

• Describing:
  • Use a sequence of "move to", "line to", "quadratic-curve to", and/or "cubic-curve to" segments
• In Java:
  • Path2D
  • PathIterator

javaexamples/graphics/BuzzyComponent.java (Fragment: body1)

       bodyShape = new Path2D.Float();
       bodyShape.moveTo( 20, 50);
       bodyShape.lineTo( 20, 70);
       bodyShape.lineTo( 20, 90);
       bodyShape.lineTo( 10, 90);
       bodyShape.lineTo( 10,100);
       bodyShape.lineTo( 80,100);
       bodyShape.lineTo( 80, 90);
       bodyShape.lineTo( 40, 90);
       bodyShape.lineTo( 40, 70);
       bodyShape.lineTo( 40, 50);
       bodyShape.closePath();
        

• An Observation:
  • In many situations, we need to to transform the content
• In Java:
  • This can be accomplished using an AffineTransform

Reflection

AffineTransform aroundX, aroundY;
aroundX = new AffineTransform( 1.0, 0.0, 0.0,-1.0, 0.0, 0.0);
aroundY = new AffineTransform(-1.0, 0.0, 0.0, 1.0, 0.0, 0.0);
  

javaexamples/visual/statik/described/SpiralGlyphCanvas.java

package visual.statik.described;


import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import javax.swing.*;

/**
 * A panel that displays a GlyphVector
 * in a spiral
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class SpiralGlyphCanvas extends GlyphCanvas
{

    /**
     * Constructor
     */
    public SpiralGlyphCanvas()
    {
       super();
    }


    /**
     * Render the glyphs
     */
    protected void paintGlyphs(Graphics2D g2, String text)
    {
       AffineTransform         at, trans;
       AlphaComposite          alpha;
       Dimension               d;
       float                   angle, x, y;
       FontRenderContext       frc;
       GlyphVector             glyphs;
       int                     i;
       Shape                   shape, transformedShape;

       d = getSize();

       frc = g2.getFontRenderContext();
       glyphs = font.createGlyphVector(frc, text);
       shape = glyphs.getOutline(0.0f, 100.0f);
       g2.setColor(Color.BLACK);

       for (i=0; i < 6; i++) 
       {
          angle = (float)(Math.PI/6.0 * i);
          x = (float)(d.width/2.0);
          y = (float)(d.height/2.0);
          at = AffineTransform.getRotateInstance(angle,x,y);
          trans = AffineTransform.getTranslateInstance(x,y);
          at.concatenate(trans);

          transformedShape = at.createTransformedShape(shape);
            
          g2.fill(transformedShape);
       }
    }
}
        

• Filling in General:
  • 
• Filling in Java:
  • Paint interface
  • Color object
  • GradientPaint object
  • TexturePaint object

javaexamples/graphics/BuzzyComponent.java

import java.awt.*;
import java.awt.geom.*;
import javax.swing.*;


/**
 * An example of a described static visual content
 *
 * @author  Prof. David Bernstein, James Madison University
 * @version 1.0
 */
public class BuzzyComponent extends JComponent
{
    private Arc2D.Float            helmetShape, visorShape;       
    private BasicStroke            stroke;
    private Color                  black, gold, gray, purple;
    private Path2D.Float           bodyShape;       
    private QuadCurve2D.Float      hairShape;

    /**
     * Default Constructor
     */
    public BuzzyComponent()
    {
       super();

       black  = Color.BLACK;
       gold   = new Color(0xc2,0xa1,0x4d);
       gray   = new Color(0xaa,0xaa,0xaa);
       purple = new Color(0x45,0x00,0x84);

       stroke = new BasicStroke();

       bodyShape = new Path2D.Float();
       bodyShape.moveTo( 20, 50);
       bodyShape.lineTo( 20, 70);
       bodyShape.lineTo( 20, 90);
       bodyShape.lineTo( 10, 90);
       bodyShape.lineTo( 10,100);
       bodyShape.lineTo( 80,100);
       bodyShape.lineTo( 80, 90);
       bodyShape.lineTo( 40, 90);
       bodyShape.lineTo( 40, 70);
       bodyShape.lineTo( 40, 50);
       bodyShape.closePath();

       hairShape = new QuadCurve2D.Float(10,2,40,10,30,25);       

       helmetShape = new Arc2D.Float(2,20,70,40,2,360,Arc2D.OPEN);

       visorShape = new Arc2D.Float(40,25,35,30,315,90,Arc2D.PIE);
    }

    /**
     * Paint this Component
     *
     * @param g   The rendering engine to use
     */
    public void paint(Graphics g)
    {
       Graphics2D     g2;

       g2 = (Graphics2D)g;
       g2.setStroke(stroke);
       
       g2.setColor(purple);
       g2.fill(bodyShape);
       g2.setColor(black);
       g2.draw(bodyShape);
       
       g2.setColor(purple);
       g2.draw(hairShape);
       
       g2.setColor(gold);
       g2.fill(helmetShape);
       g2.setColor(black);
       g2.draw(helmetShape);
       
       g2.setColor(gray);
       g2.fill(visorShape);
       g2.setColor(black);
       g2.draw(visorShape);
    }
}