Computer Graphics

Geometric Objects and Transformations

Introduction
 Objective:
 To know the necessary background and principles of
computer graphics combined with direct applications in
concrete and simple examples.
What is Computer Graphics?
 Computer graphics provides methods to generate images
using a computer.
 Two types Graphics
 Vector Graphics
 Raster Graphics
Vector Graphics
 Represented as lines
 scalable
 requires computations for display on a pixel-oriented medium
(scan conversion)
 scan conversion can lead to aliasing effects (f.e. jagged
edges) which occur in general when a discrete sampling rate
is used to measure a continuous signal.
Raster Graphics
 A raster graphics or bitmap image is a dot matrix data
structure that represents a generally rectangular grid of pixels
(points of colour), viewable via a monitor, paper, or other
display medium.
 Raster images are stored in image files with varying formats.
Raster Graphics vs. Vector Graphics
Raster Graphics and Scaling
Raster as a grid
 In most cases, when a pixel matrix is considered, each pixel is
represented by a square between the lines of a grid.
 However, sometimes another representation is more convenient
where pixels are illustrated as circles on the points where the lines of
the grid cross.
 Figure shows the pixel with the grid coordinates (5,3).

Sometimes the y-coordinates are

counted from top to bottom (f.e. in Java).
Java Graphics API
 java.awt.Graphics provides the functionality for drawing
graphics in java.
 Types
 Graphics2D
 Graphics3D

AWT components displayed on the screen have a paint()

method with a Graphics object as argument.
Introduction to Java Graphics API
Getting started with Java 2D Graphics
 The class Graphics2D within Java 2D extends the class
Graphics.
 In order to exploit the options of Java 2D, the Graphics object
must be casted into a Graphics2D object within the paint()
method.
 Basic geometric objects
 The basic geometric objects in computer graphics are usually
called primitives or graphics output primitives.
 Points for the definition of other objects (f.e. a line
connecting two points).
 Lines, polylines or curves can be defined by two or
more points.
 Areas are usually bounded by closed polylines or
polygons. Areas can be filled with a colour or a texture.
Basic geometric objects
 Line (segment): Connecting line between two points.
 Polyline: A sequence of line where the following line starts
where the previous one ends.
 Polygon, closed polyline: The last line segment of a
polyline ends where the first line segment started.
Polygons
 Important additional properties of polygons:
 Non-self-overlapping
 Convexity: Whenever two points are within the polygon the
connecting line between these two points lies completely inside
the polygon as well.
 This definition of convexity applies also to arbitrary areas and 3D
objects.
Parametric curves
 quadratic curves: Two endpoints and one control point.
 kubische Kurven: Two endpoints and two control points.
Parametric curves
 Avoiding sharp bends when attaching a cubic curve to a line.
Definition of areas
 Polygons or closed sequences of curves.
 Elementary geometric objects like circles, ellipses, (axes-
parallel) rectangles.
 Modifying the shape of elementary geometric objects by
geometric transformations.
 Application of set-theoretic operations like union, intersection,
difference and symmetric difference to previously defined
areas.
Set-theoretic operations
Geometric objects in Java 2D
 The abstract class Shape with its various subclasses allows the
construction of various two-dimensional geometric objects.
 Vector graphics is used to define Shape objects, whose real-
valued coordinates can either be given as float- or double-values.
 Shapes will not be drawn until the draw or the fill method is called
with the corresponding Shape as argument in the form
Geometric objects in Java 2D
 Point2D
 Not a subclass of Shape
 Points cannot be drawn in Java.
 They are only supposed to be used for the description of other
objects.
 Subclasses of Point2D:
 Point2D.Float
 Point2D.Double
 Geometric objects in Java 2D
 Line2D : Line (segment): Two endpoints are needed to
define a line. (subclass of Shape)
 Two sub classes : Line2D.Float, Line2D.Double
Line2D.Double line =
1
new Line2D.Double(x1,y1,x2,y2);

2
Geometric objects in Java 2D
Quadratic curve: Two endpoints and a control point are
needed to define a quadratic curve.
QuadCurve2D.Float qc =
new QuadCurve2D.Float(x1,y1,ctrlx,ctrly,x2,y2);
Geometric objects in Java 2D
cubic curve: Two endpoints and two control points are needed
to define a cubic curve.
CubicCurve2D.Double cc =
new CubicCurve2D.Double(x1,y1,ctrlx1,ctrly1,ctrlx2,ctrly2,x2,y2);
GeneralPath class
General path: A GeneralPath is sequences of lines, quadratic
and cubic curves.
GeneralPath gp = new GeneralPath();
gp.moveTo(50,50);
gp.lineTo(50,200);
gp.quadTo(150,500,250,200);
gp.curveTo(350,-100,150,150,100,100);
gp.lineTo(50,50);
g2d.draw(gp);
GeneralPath class
 A GeneralPath must always start with the method moveTo,
defining the starting point of the general path.
 lineTo appends a line, starting from the (previous) last point
of the GeneralPath to the specified endpoint.
 quadTo and curveTo append a quadratic and cubic curve,
respectively, starting from the (previous) last point of the
GeneralPath connecting it to the specified endpoint using the
given control points.
 Axes-Parallel Rectangles
By the class Rectangle2D.Double, extending the abstract
class Rectangle2D, an axes-parallel rectangle can be defined
in the following way:
Rectangle2D.Double r2d =
new Rectangle2D.Double(x,y,width,height);
Ellipse
 The ellipse can be drawn using
Ellipse2D.Double elli =
new Ellipse2D.Double(x,y, width,height);
Circle
 Circle can be also drawn using given radius value and center
(x,y) coordinates.
Area objects
Geometric transformations
 In addition to geometric objects, geometric transformations
play a crucial role in computer graphics.
 Geometric transformations can be used to position objects,
 i.e., to shift them to another position or to rotate them, to change the
shape of objects, for instance to stretch or shrink them in one
direction, or to move objects or change the shape of objects step by
step in animated scenes.
 The most important geometric transformations are
 Scaling, Rotation, Shearing and translation.
Geometric Transformations
 Scaling
 Rotation
 Shearing
 Translation.
 Note: If the scaling factor S is less than 1, then we reduce
the size of the object. If the scaling factor S is greater than
Scaling 1, then we increase size of the object.

 A scaling leads to stretching or shrinking of objects in the

direction of the x- and the y-axis.
 A scaling S(sx, sy) maps the point (x, y) to the point (x, y)
given by

• If |sx| > 1 holds, then a stretching in the direction of the

x-axis is carried out. For |sx| < 1 shrinking takes place.
Example
Question

 Scale the object positioned at P(100,100)

with scaling factor {0.8,15}, and also draw
the original object and the scaled object.
Rotation
 Another important group of geometric transformations
are rotations that are determined by a single
parameter, the rotation angle. The rotation is carried
out anticlockwise around the origin of the coordinate
system in case of a positive angle.
 A negative angle means that the rotation is carried out
in a clockwise manner.
 The rotation R(θ) by the angle θ maps the point (x, y)
to the point (x, y) given by
Rotation
 A rotation is always carried out around
the origin of the coordinate system.
 Therefore, a similar shifting effect as in
the case of scaling happens, when an
object is not centered around the
origin.
 In figure a rotation by an angle of 45◦
was carried out, mapping the original
rectangle to the rectangle drawn with
dashed lines.
Question
 Rotate the object located at p(50,80) with an angle 60 degree
and sketch the original and rotated object.
Shear transformation
 The shear transformation is another elementary
geometric transformation that causes a certain
deformation of objects.
 Similar to scaling, the shear transformation requires two
parameters, however, not on the main diagonal of the
transformation matrix, but on the other two positions.
 Applying a shear transformation Sh(sx, sy) to a point (x,
y) yields the point (x, y) with the new coordinates
Shear transformation
 As in the case of scalings and rotations,
shear transformations are carried out with
respect to the origin of the coordinate
system, so that an object that is not-
centered around the origin will not only be
deformed by a shear transformation, but
also shifted.
 The dashed rectangle is obtained from the
original rectangle in figure by applying a
shear transformation with the parameters
sx = 1 and sy = 0.
Question
 An object is located at (120,50) perform the shear
transformation with shear factor of (0,5) and draw the original
and modified object.
Translation
 A translation T(dx, dy) causes a shift by the vector d = (dx,
dy).
 This means the translation maps the point (x, y) to the point
Translation
 In figure a translation defined by the vector d = (140, 80) is
applied to a rectangle, mapping it to the dashed rectangle.
Question
 Translate an object located in (100,50) with translation factor
of {40,50} and draw the original and translated object.
Animation or Moving objects based on
transformations
Moving objects (animated graphics) can also be
implemented based on transformations.
The transformations must describe the movement of
the object(s).
 The object is drawn.
 The object’s position in the next frame is computed
 based on transformations.
 The old object (or the whole window) is deleted.
 The updated object and the background are drawn
 again.
Example: Moving Objects
Animation - Transformation
Animation - Transformation
Animation- Double Buffering
 Generate the object in origin
 Compute accumulated transformations(virtual Buffer)
 Apply accumulated transformations to window Buffer
 Draw
 Delay
 Compute accumulated transformations(Virtual Buffer)
 Clear the screen
 Apply to Window Buffer
 Draw Again
Interpolators
 Assume an animation that shows a continuous
transition of the object from the initial to its final state.
 Specifying the initial and the end position of the object
and then carrying out interpolations between these two
positions.
Interpolation of transformations
Simple Object Interpolations
Simple Object Interpolations
Simple Object Interpolations
Simple object interpolation