2D – (Rendering)
Computer Graphics and Visual Computing
Ma. Shiela C. Sapul, Ph.D.
Department of Information Systems and Technology
Central Philippine University
Rendering
The process involved in the generation of a two-dimensional or three-
dimensional image from a model.
Graphics2D class
The Java 2D API provides a uniform rendering model across different types
of devices.
At the application level, the rendering process is the same whether the
target rendering device is a screen or a printer.
It also supports more attributes that affect the rendering.
Transform attribute (translation, rotation, scaling and shearing).
Pen attribute (outline of a shape) and Stroke attribute (point-size, dashing-
pattern, end-cap and join decorations).
Fill attribute (interior of a shape) and Paint attribute (fill shapes with solid
colors, gradients, and patterns).
Composite attribute (for overlapping shapes).
Clip attribute (display area).
Font attribute
2
Transforming
Any graphics object can be transformed as it is rendered. A
transformation can include translation, rotation, scaling, or
shearing, or a combination of all four.
Compositing
The process of putting pieces of a picture together is called
compositing. The 2D API supports a handful of compositing
rules and allows pieces of a picture to be partly or fully
transparent.
Clipping
Sometimes you don't want to draw outside a certain
area, as though you were drawing only the part of a
picture that's visible through a door frame. 3
Color Space
A color space relates numbers to actual colors.
RGB – 16,777,216
CYMK – 16,000
sRGB – 281 x 10 ^ 16
Color class
4
Generalizing the concept of color, Java 2D drawing
applies an attribute called paint.
5
Strokes
Width
End style
Join style
Miter limit
Dash pattern
6
Geometric Transformations
an operation that transforms or changes a shape
(line, drawing etc.).
changing some graphics into something else by
applying rules
7
Geometric Transformations
Translation
Rotation
Scaling
Shearing
Figure 1. Transformations
8
Geometric Transformations - Translation
Translation is the process of changing the
position of an object in a straight-line path from
one coordinate location to another.
We can translate a two dimensional point by
adding the translation distances, tx and ty.
The original position is (x,y) then the new position
is (x1, y1).
9
Geometric Transformations - Translation
Figure 2. Translations
10
Geometric Transformations - Translation
Figure 3. Translations 11
Translate a polygon with co-ordinates P1 (5,5), P2(5,10), P3 (10,5)
by 5 units in X direction and 5 units in Y direction.
P1’ = P1 + T, P2’ = P2 + T, P 3’ = P 3 + T
𝟓 𝟓 𝟏𝟎 𝟓 𝟓 𝟏𝟎 𝟏𝟎 𝟓 𝟏𝟓
P 1’ = + = P2’ = + = P3’ = + =
𝟓 𝟓 𝟏𝟎 𝟏𝟎 𝟓 𝟏𝟓 𝟓 𝟓 𝟏𝟎
Figure 4. Translations 12
Geometric Transformations - Rotation
A two dimensional rotation is applied to an object
by repositioning it along a circular path in the x
and y plane.
13
Geometric Transformations - Rotation
Consider arrow B which we wish to rotate through
an angle of 45° anti-clockwise from A
14
Figure 5. Rotation
Geometric Transformations - Rotation
Figure 5. Rotation a Single Point
15
Geometric Transformations - Rotation
Using standard trigonometric equations, we can expressed
the transformed coordinates in terms of 𝜃 𝑎𝑛𝑑 𝜙 as.
16
Geometric Transformations - Scaling
A scaling transformation changes the size of an object.
In the scaling process, you either expand or compress
the dimensions of the object.
This operation can be carried out for polygons by multiplying
the coordinates values (x,y) of each vertex by a scaling factor
Sx and Sy to produce the transformed coordinates (x’, y’).
x’ = x. Sx
y’ = y. Sy
17
Geometric Transformations - Scaling
Figure 6. Scaling
18
Geometric Transformations - Scaling
Figure 7. Scaling and individual point
19
Geometric Transformations - Scaling
Scaling can be different in different directions
Figure 6. The independence of axes for Scaling 20
Geometric Transformations - Shearing
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.
21
Geometric Transformations - Shearing
A shearing about a line shifts a point by an amount
proportional to the signed distance to the line.
The movements of the points are parallel to the line.
22
Geometric Transformations - Shearing
We can denote shearing
‘SHx’ and ‘SHy.’ These ‘SHx’ and ‘SHy ’ are
called “Shearing factor.”
We can represent Horizontal Shearing by the
following equation:
X1 = X0 + SHx. Y0
Y1 = Y0
23
Geometric Transformations - Shearing
Shearing along y-axis: In this, we can store the x
coordinate and only change the y coordinate. It is
also called “Vertical Shearing.”
We can represent Vertical Shearing by the
following equation:
X1 = X0
Y1 = Y0 + SHy. X0
24