Basics of 2D geometric objects

1
 Objectives
• To understand the architecture and operations of a 2D
graphics system
• To understand 2D coordinate systems and equations of graphs
• To be able to identify the various coordinate spaces in a
rendering pipeline
• To understand Java 2D program structure and the Graphics2D
object
• To graph equations with Java programs
• To use basic 2D geometric primitives
• To construct custom shapes using GeneralPath class
• To construct geometric shapes through constructive area
geometry
2
Basics of 2D geometric objects
• Points that are uniquely defined by their x- and y-
coordinate.
• Lines, polylines or curves can be defined by two or
more points. Whereas for
a line two points are needed, curves require
additional control points. Polylines are connected
sequences of lines.
• Areas are usually bounded by closed polylines or
polygons. Areas can be filled with a colour or a
texture. 3
 Convex and nonconvex areas
• A polygon or, more generally, an area or a region is
convex if whenever two points are within the region the
connecting line between these two points lies
completely inside the region as well.
• For the nonconvex polygon two points inside the
polygon are chosen and connected by a dotted line that
lies not completely inside the polygon.

4
Rendering Pipeline
• The graphic objects are constructed from basic primitives such
as lines, polygons, and ellipses
• The model may also include objects such as text s and images
• The transformations involved in 2D graphics are affine
transforms
• The object transformations change the shapes and locations of
the visual objects to which the transforms are applied
• The viewing transformations do not change the virtual world
model, but they change the view of the entire scene on the
world space
• Example: In a virtual model with a circle and a triangle, a
translation applied to a circle as an object transformation will
move only the circle without changing the rectangle. A translation 5
as a viewing transforms will move the entire view.
2D Coordinate System
• In order to represent geometry precisely and efficiently in computers,
coordinate systems are employed
• The most commonly used 2D coordinate system employs rectangular
(Cartesian) coordinates
y
4
3 ( x, y )
2 ( x, y )

1
0 x
-2 -1 0 1 2 3 4
-1
-2 6
Line
A line can be represented by a polynomial equation of degree 1

Ax + By + C = 0

y
( x0 , y0 )
Δy
( x, y )
Δx
x

7
Circle
A circle centered at the origin with radius R is represented by the
equation

y
y

8
Ellipse

( x − x0 ) 2 ( y − y 0 ) 2
2
+ 2
=1
a b
y

( x0 , y0 ) a
x
( x, y )

9
Parametric Equation
• In a parametric equation a third variable t is
introduced
• Both x and y are expressed as functions of t

x = f (t )
y = g (t )
Example: Parametric equation of an ellipse

x = x0 + a cos t
y = y 0 + b sin t 10
Spaces
• The collection of all points or coordinates is known as a space
• Three types of spaces are typically involved in a graphics system
1. Object space
2. World space
3. Device space
• Each space is usually characterized by its own coordinate system
Object space
➢ Also known as local or modeling coordinate system
➢ Associated with the definition of a particular graphic object
➢ In constructing such an object, it is usually convenient to
choose a coordinate system that is natural to the object
➢ For example: when we define a circle, we may choose to have
the origin of the coordinate system at the center of the circle
and simple define a unit circle
11
Spaces
2. World space
➢ Known as user coordinate system
➢ Define a common reference space for all objects in a graphic
model
➢ Geometric objects are placed into this space through object
transforms

3. Device space
➢ Represent the display space of an output device such as a
screen or a printer

(0,0) x

12

y
Java 2D Coordinate System
Java 2D’s world coordinates coincide with the device coordinates

(0,0) x

y-axis pointing downward

13
The Graphics2D Class
In Java 2D, the rendering engine is accessed through the
class Graphics2D
In the early versions of Java, graphics drawings are
obtained through the class java.awt.Graphics
The Graphics class contains basic methods for rendering
graphic primitives
Java 2D uses the more extensive Graphics2D class for its
rendering
Graphics2G extends the graphics to maintain compatibility
with earlier AWT rendering

14
The Graphics2D Class
Graphics2D and Graphics classes are abstract, so you can’t
instantiate directly
Two ways to retrieve a Graphic2D object
1. Obtain as a parameter in the paint component method

void paintComponent(Graphics g){

}
The parameter g is declared to be Graphics, but it is also
a Graphics2D object. It can be a cast to graphics 2D
object

2. Obtain a reference to a Graphics2D object is to call the

method getGraphics
15
Graphics getGraphics()
 Methods of Graphics Class (AWT)
void setColor(Color c)
void setFont(Font f)
void setXORMode(Color c)
void setPaintMode()
void translate(int x, int y)
void drawLine(int x1, int y1, int x2, int y2)
void drawRect(int x1, int y1, int width, int height)
void drawOval(int x1, int y1, int width, int height)
void drawArc(int x1, int y1, int width, int height, int start, int arc)
void drawRoundRect(int x1, int y1, int width, int height, int arcW, int arcH)
void drawPolygon(int[] xPoints, int[] yPoints, int nPoints)
void fillRect(int x1, int y1, int width, int height)
void fillOval(int x1, int y1, int width, int height)
void fillArc(int x1, int y1, int width, int height, int start, int arc)
void fillRoundRect(int x1, int y1, int width, int height, int arcW, int arcH)
void fillPolygon(int[] xPoints, int[] yPoints, int nPoints)
void drawString(String str, int x, int y)
16
Methods of Graphics2D Class
void draw(Shape s)
void fill(Shape s)
void setTransform(AffineTransform Tx)
void transform(AffineTransform Tx)
void setPaint(Paint p)
void setStroke(Stroke s)
void clip(Shape s)
void setComposite(Composite c)
void addRenderingHints(Map hints)
17
Graphics and 2D Graphics
- In Graphics (AWT) there is no separation between the modular and
renderer

For example: a single method drawOval is responsible for both

defining (modeling) an ellipse and drawing (rendering) the ellipse

-In Graphics2D a separation between modeling and rendering

For example: to draw an Ellipse, you can create an instance of

Ellipse2D (which implements the shape interface) and call the draw
method to render it

18
Ex1: A Simple Java 2D Program using
Graphics method

public void paintComponent(Graphics g) {

super.paintComponent(g);
g.drawLine(30,30,200,30);
g.drawLine(200,30,30,200);
g.drawLine(30,200,200,200);
g.drawLine(200,200,30,30);
}

19
Ex1: output

(30,30) (200,30)

(30,200) (200,200)

20
Ex:2 A Simple Java 2D Program using
Graphics2D methods
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
g2.setColor(Color.blue);
Ellipse2D e = new Ellipse2D.Double(-100, -50, 200, 100);
AffineTransform tr = new AffineTransform();
tr.rotate(Math.PI / 6.0);
Shape shape = tr.createTransformedShape(e);
g2.translate(300,200);
g2.scale(2,2);
g2.draw(shape);
g2.drawString("Hello 2D", 0, 0);
}

21
Exercise
• Try using only the function drawLine to plot the digits
approximately {0,1,2 …9}
• Example for the digit 2

22
Ex2: output

23
 Graphing Equations
• Mathematical equations are important in modeling
graphics objects
• Plotting an equation is a simple graphics application
• A simple way to graph an equation is to generate a
sequence of coordinated satisfying the equation and then
plot the points
• For a function of the form y=f(x), it is straightforward to
choose a set of x-coordinates and calculate the
corresponding y-coordinates
• An equation of form F(x,y)=0 is more difficult to calculate
so it can be expressed in parametric form that is convenient
for calculations
24
Graphing a Spirograph

The parametric equation

x = (r1 + r2 ) cos t − p cos((r1 + r2 )t / r2 )

y = (r1 + r2 ) sin t − p sin((r1 + r2 )t / r2 )

25
 Ex 3: Graphing a Spirograph
public void paintComponent(Graphics g){
super.paintComponent(g);
Graphics g2=(Graphics)g;
g2.translate(200,200);
g2.setColor(Color.blue);
double r1=60, r2=50, p=70; Parameter setting
Sampling rate int nPoints=1000;
int x1 = (int)(r1+r2-p); Initial values
int y1 =0;
int x2;
int y2;
for (int i=0; i<nPoints; i++){
Sampling of t double t=i*Math.PI/90;
x2 = (int)((r1+r2)*Math.cos(t)-p*Math.cos((r1+r2)*t/r2));
Apply in equation
y2 = (int)((r1+r2)*Math.sin(t)-p*Math.sin((r1+r2)*t/r2));
Draw the new point g2.drawLine(x1,y1,x2,y2);
x1=x2;
y1=y2; Go to next point 26
}}
Ex3: output

27
Parametric equation

28
Circle equation

Ellipse equation

29
Lissajous Curve

30