An Introduction to 2-D Graphics

An Introduction to 2-D Graphics
in Java

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Rendering

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

The (Linear) Color Cube

Modeling Color (cont.)

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

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

Clipping

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

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.)

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

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.)

An Example

javaexamples/graphics/BoringComponent.java

Sampling Static Visual Content

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.)

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:

Examples of Sampled Static Visual Content

Images
Bitmapped Fonts

Encapsulating Sampled Static Visual Content

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

Using Sampled Static Visual Content

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

javaexamples/graphics/ImageComponent.java

A Simple Application

javaexamples/graphics/ImageComponentDriver.java

Described Static Visual Content

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

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

javaexamples/graphics/RandomRectangleComponent.java

Encapsulating Points

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

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.)

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.)

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

Encapsulating Quadratic Bezier Curves

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)

Encapsulating Cubic Curves

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)

Encapsulating Rectangles

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

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

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

Glyphs

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

Glyphs (cont.)

f and i as two glyphs and as a ligature

Glyphs (cont.)

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.)

The RSB is positive for A and negative for f

Glyphs (cont.)

Kerning - The Use of Different Bearings for Differnt Glyphs

Glyphs (cont.)

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.)

Line Metrics

Glyphs (cont.)

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

Glyphs (cont.)

Glyphs as Shapes

javaexamples/graphics/GlyphComponent.java

Glyphs (cont.)

Font Metrics

javaexamples/graphics/GlyphMetricsComponent.java

Glyphs (cont.)

Bounding Rectangle

javaexamples/graphics/CenteredGlyphComponent.java

Glyphs (cont.)

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

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.)

An Example

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

Rendering Described Content

Stroke Joins

Rendering Described Content (cont.)

Stroke Caps

Rendering Described Content (cont.)

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

Rendering Described Content (cont.)

An Example

javaexamples/graphics/BuzzyComponent.java

There's Always More to Learn