• 0-Dimensional
  • Points
• 1-Dimensional
  • Lines
  • Curves
• 2-Dimensional
  • Rectangles and Rounded Rectangles
  • Polygons
  • Ellipses

javaexamples/visual/statik/described/RandomRectangleCanvas.java

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

javaexamples/visual/statik/described/SimpleShapeCanvas.java (Fragment: point)

• 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:
  • \(a_x = p_x\) and \(a_y = p_y\)
  • \(b_x = q_x - p_x\) and \(b_y = q_y - p_y\)

javaexamples/visual/statik/described/SimpleShapeCanvas.java (Fragment: line)

An Observation before Continuing

\(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\)

• 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/visual/statik/described/SimpleShapeCanvas.java (Fragment: quadcurve)

• 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/visual/statik/described/SimpleShapeCanvas.java (Fragment: cubiccurve)

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

javaexamples/visual/statik/described/SimpleShapeCanvas.java (Fragment: rectangle)

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

javaexamples/visual/statik/described/SimpleShapeCanvas.java (Fragment: arc)

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

f and i as two glyphs and as a ligature

• 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

The RSB is positive for A and negative for f

Kerning - The Use of Different Bearings for Differnt Glyphs

• 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

Line Metrics

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

Glyphs as Shapes

javaexamples/visual/statik/described/GlyphCanvas.java

Font Metrics

javaexamples/visual/statik/described/GlyphMetricsCanvas.java

Bounding Rectangle

javaexamples/visual/statik/described/CenteredGlyphCanvas.java

• An Observation:
  • It is sometimes inconvenient to create the Shape objects and render them
• Convenience Methods:
  • Graphics2D
  • Graphics2D
  • Graphics2D

Using Convenience Methods

javaexamples/visual/statik/described/AttributedStringCanvas.java

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

An Example

javaexamples/visual/statik/described/BoringBuzzy.java (Fragment: body1)

• Defined:
  • The process of performing set-theoretic operations (e.g., union, intersection, difference, symmetric difference) on two-dimensional shapes
• In Java:
  • The Area class

An Example

javaexamples/visual/statik/described/ConstructiveAreaGeometryCanvas.java

• An Observation:
  • In many situations, we don't want to transform the coordinate space, we instead want to transform the content itself
• In Java:
  • getTranslateInstance(double, double)
  • getScaleInstance(double, double)
  • getRotateInstance(double)

Translation

Two Scalings

Reflection

Rotation

An Example

javaexamples/visual/statik/described/SpiralGlyphCanvas.java

• Rendering in General:
  • Coordinate Conversion, Clipping and Composition
• Unique Steps:
  • 

Stroke Joins

Stroke Caps

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

An Example

javaexamples/visual/statik/described/RenderingExampleCanvas.java

Requirements

1. Support the addition of described static visual content
2. Support the removal of described static visual content
3. Support \(z\)-ordering of described static visual content
4. Support the transformation of described static visual content
5. Support the rendering of described static visual content

• A Problem:
  • Shapes do not contain all of the information required for rendering (i.e., they do not contain information related to stroking and filling)
  • This information must be stored elsewhere and the GUI component doing the rendering must understand how to put everything together
• Overcoming this Problem:
  • There are several possible designs

Two Designs

A Better Design

TransformableContent javaexamples/visual/statik/described/TransformableContent.java

Content javaexamples/visual/statik/described/Content.java (Fragment: skeleton) javaexamples/visual/statik/described/Content.java (Fragment: getters) javaexamples/visual/statik/described/Content.java (Fragment: setters) javaexamples/visual/statik/described/Content.java (Fragment: transform) javaexamples/visual/statik/described/Content.java (Fragment: bounds) javaexamples/visual/statik/described/Content.java (Fragment: render)