- Forward


An Introduction to 2-D Graphics
in Java


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu

Print

Rendering
Back SMYC Forward
  • 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
Modeling Color
Back SMYC Forward

The (Linear) Color Cube

rgb-cube
Modeling Color (cont.)
Back SMYC Forward
  • 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
Coordinate Systems
Back SMYC Forward
  • Coordinates:
    • Quantities (linear and/or angular) that designate the position of a point in relation to a given reference frame
  • In Java:
    • coordinates
Clipping
Back SMYC Forward
  • 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
Back SMYC Forward
  • 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)
Composition (cont.)
Back SMYC Forward
  • 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
Obtaining a Rendering Engine in Java
Back SMYC Forward
  • 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
Obtaining a Rendering Engine in Java (cont.)
Back SMYC Forward

An Example

javaexamples/graphics/BoringComponent.java
 
Sampling Static Visual Content
Back SMYC Forward
  • 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
Sampling Static Visual Content (cont.)
Back SMYC Forward
  • 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:
    • raster
Examples of Sampled Static Visual Content
Back SMYC Forward
  • Images
  • Bitmapped Fonts
Encapsulating Sampled Static Visual Content
Back SMYC Forward
  • The Abstract Parent:
    • Image
  • BufferedImage
    • Has a ColorModel
    • Has a Raster
Using Sampled Static Visual Content
Back SMYC Forward
  • 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
Rendering Sampled Static Visual Content
Back SMYC Forward
javaexamples/graphics/ImageComponent.java
 
A Simple Application
Back SMYC Forward
javaexamples/graphics/ImageComponentDriver.java
 
Described Static Visual Content
Back SMYC Forward
  • The Concept:
    • Describe the content using geometric shapes
  • Encapsulation in Java:
    • Objects that implement the Shape interface
  • Rendering:
    • draw(Shape s)
    • fill(Shape s)
Simple Geometric Shape Objects
Back SMYC Forward
  • 0-Dimensional:
    • Points (Point2D )
  • 1-Dimensional:
    • Lines (Line2D )
    • Curves (CubicCurve2D and QuadCurve2D )
  • 2-Dimensional:
    • Rectangles(Rectangle2D )
    • Polygons (GeneralPath )
    • Ellipses (Ellipse2D )
An Example of Described Static Visual Content
Back SMYC Forward
javaexamples/graphics/RandomRectangleComponent.java
 
Encapsulating Points
Back SMYC Forward
  • 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)
 
Encapsulating Line Segments
Back SMYC Forward
  • 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
Encapsulating Line Segments (cont.)
Back SMYC Forward
  • 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\)
Encapsulating Line Segments (cont.)
Back SMYC Forward
javaexamples/graphics/SimpleShapeComponent.java (Fragment: line)
 
Encapsulating Quadratic Bezier Curves
Back SMYC Forward
  • 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
    • curve-quadratic
  • An Example:
javaexamples/graphics/SimpleShapeComponent.java (Fragment: quadcurve)
 
Encapsulating Cubic Curves
Back SMYC Forward
  • 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
    • curve-cubic
  • An Example:
javaexamples/graphics/SimpleShapeComponent.java (Fragment: cubiccurve)
 
Encapsulating Rectangles
Back SMYC Forward
  • Basics:
    • Rectangles are typically defined using one corner, a width, and a height
    • Rectangle2D
  • An Example:
javaexamples/graphics/SimpleShapeComponent.java (Fragment: rectangle)
 
Encapsulating Ellipses and Arcs
Back SMYC Forward
  • Basics:
    • Often defined using a center, major diameter, and minor diameter
    • Ellipse2D uses the bounding rectangle
    • ellipse
  • An Example:
javaexamples/graphics/SimpleShapeComponent.java (Fragment: arc)
 
Glyphs
Back SMYC Forward
  • Glyph:
    • A shape that represents one or more characters
  • Font:
    • A set of glyphs
Glyphs (cont.)
Back SMYC Forward

f and i as two glyphs and as a ligature

ligature
Glyphs (cont.)
Back SMYC Forward
  • 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
Glyphs (cont.)
Back SMYC Forward

The RSB is positive for A and negative for f

glyph-advance
Glyphs (cont.)
Back SMYC Forward

Kerning - The Use of Different Bearings for Differnt Glyphs

kerning
Glyphs (cont.)
Back SMYC Forward
  • 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
Glyphs (cont.)
Back SMYC Forward

Line Metrics

fontmetrics
Glyphs (cont.)
Back SMYC Forward
  • FontRenderContext
    • Keeps information about fonts
  • Font
    • Can create a GlyphVector
  • LineMetrics
    • Keeps information about font and line heights
Glyphs (cont.)
Back SMYC Forward

Glyphs as Shapes

javaexamples/graphics/GlyphComponent.java
 
Glyphs (cont.)
Back SMYC Forward

Font Metrics

javaexamples/graphics/GlyphMetricsComponent.java
 
Glyphs (cont.)
Back SMYC Forward

Bounding Rectangle

javaexamples/graphics/CenteredGlyphComponent.java
 
Glyphs (cont.)
Back SMYC Forward
  • 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)
Complicated Geometric Shapes
Back SMYC Forward
  • Describing:
    • Use a sequence of "move to", "line to", "quadratic-curve to", and/or "cubic-curve to" segments
  • In Java:
    • Path2D
    • PathIterator
Complicated Geometric Shapes (cont.)
Back SMYC Forward

An Example

javaexamples/graphics/BuzzyComponent.java (Fragment: body1)
 
Transforms
Back SMYC Forward
  • An Observation:
    • In many situations, we need to to transform the content
  • In Java:
    • This can be accomplished using an AffineTransform
Transforms (cont.)
Back SMYC Forward

Translation
AffineTransform.getTranslateInstance(double, double)

translation
Transforms (cont.)
Back SMYC Forward

Scaling
AffineTransform.getScaleInstance(double, double)

scaling
Transforms (cont.)
Back SMYC Forward

Rotation
AffineTransform.getRotateInstance(double)

rotation
Transforms (cont.)
Back SMYC Forward

Reflection

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);
Transforms (cont.)
Back SMYC Forward

An Example

javaexamples/visual/statik/described/SpiralGlyphCanvas.java
 
Rendering Described Content
Back SMYC Forward

Stroke Joins

stroke_joins
Rendering Described Content (cont.)
Back SMYC Forward

Stroke Caps

stroke_caps
Rendering Described Content (cont.)
Back SMYC Forward
  • Filling in General:
    • filling
  • Filling in Java:
    • Paint interface
    • Color object
    • GradientPaint object
    • TexturePaint object
Rendering Described Content (cont.)
Back SMYC Forward

An Example

javaexamples/graphics/BuzzyComponent.java
 
There's Always More to Learn
Back -