CSC 308 Graphics Programming

1
CSC 308 Graphics Programming

• Transformations for 2D Graphics
• Information modified from Fergusons Computer
  Graphics via Java

Dr. Paige H. Meeker Computer Science Presbyterian
College, Clinton, SC
2
What are we doing today?

• So, we have a way to draw stuff how do we make
  it move without having to calculate a million
  points?
• We transform our stuff
• Translation (moving a shape)
• Rotation (turning a shape)
• Scale (resizing a shape)

3
Translation

• So, how to we move an object from place A to
  place B?

4
Translation

• What this really implies is that we need to move
  each point of the shape along the x and y axis by
  dx and dy respectively.

5
Translation

• Programming-wise, this means we simply add the
  values of dx and dy to the objects existing
  coordinates. A Point2d.translate() method may
  look like
• public void translate(double dx, double dy)
• x x dx
• y y dy

6
Translation

• Likewise, to translate a line, translate each end
  point Line2d.translate()
• public void translate(double dx, double dy)
• src.translate(dx,dy)
• dest.translate(dx,dy)
• //end translate

7
Translation

• Etc, etc, etc
• Shape2d.translate()
• public void translate(double dx, float dy)
• for (int i0 i lt numberOfLines i i1)
• ((Line2d)lines.get(i)).translate(dx,dy)
• //end for i
• //end translate

8
Translation

• Etc, etc, etc
• Drawing2d.translate()
• public void translate(double dx, double dy)
• for (int i0 i lt numberOfShapes i i1)
  ((Shape2d)shapes.get(i)).translate(dx,dy)
• //end for i
• //end translate

9
Rotation (about the origin)
10
Rotation (about the origin)

• Rotations must take place around a stationary
  point (such as the origin). To rotate an object
  about the origin means rotating each individual
  point of the object.
• To work this out, consider the beforePoint and
  afterPoint, lying on the perimeter of a circle of
  radius r with its center on the origin.

11
Rotation (about the origin)
12
Rotation (about the origin)

• Remember trigonometry?
• x2 r cos (q j)
• y2 r sin (q j)
• x2 r (cos q cos j sin q sin j )
• Since x1 r cos j and y1 r sin j
• x2 x1 cos q y1 sin q
• y2 x1 sin q y1 cos q

13
Rotation (about the origin)

• Now, to program in this knowledge
• Point2d.rotate()
• public void rotate(double a)
• double xtemp
• xtemp (x (double)Math.cos(a)) - (y
  (double)Math.sin(a))
• y (x (double)Math.sin(a)) (y
  (double)Math.cos(a))
• x xtemp

14
Rotation (about the origin)

• Line2d.rotate()
• public void rotate(double angle)
• src.rotate(angle)
• dest.rotate(angle)
• //end rotate

15
Rotation (about the origin)

• Shape2d.rotate()
• public void rotate(double angle)
• for (i0 i lt numberOfLines i)
• ((Line2d.lines.get(i)).rotate(angle)
• //end rotate

16
Rotation (about the origin)

• Drawing2d.rotate()
• public void rotate(double angle)
• for (i0 i lt numberOfLines i)
• ((Shape2d.shapes.get(i)).rotate(angle)
• //end rotate

17
Java Rotations

• Angles in Java are specified in radians not
  degrees
• 360 degrees 2p radians
• angle_in_radians angle_in_degrees Math.PI /
  180
• Rotations are measured in an anti-clockwise
  direction.

18
Scaling

• Scaling a shape means making it bigger or
  smaller. It is a multiplicative operation which
  means you can have some funny results if youre
  not careful!
• You scale an object by applying the scaling
  factor to every point that makes up the shape.
  Multiply each coordinate by the scale factor to
  obtain the new coordinate value.

19
Scaling

• x2x1 xsf
• y2y1 ysf

20
Scaling

• Scaling can be different in different directions.

21
Scaling

• Point2d.scale()
• public void scale(double xScale, double yScale)
• x x xScale
• y y yScale

22
Identity Transformation

• Some transformations lead to no change in the
  shape/point
• Translate(0,0)
• Rotate(2 Math.PI)
• Scale(1,1)

23
Order of Transformations

• The order in which transformations are applied to
  a shape is important. e.g. performing a
  translation followed by a rotation, will give an
  entirely different drawing to a performing the
  rotation followed by the same translation.

24
Order of Transformations
25
Rotation about a local origin

• Sometimes we need our shapes to spin. We can
  accomplish this as follows
• Translate the shape to the origin
• Rotate the shape as required
• Translate the shape back

26
Rotation about a local origin

• To do this, we must know which point to rotate
  the shape around i.e. a local origin to the
  shape. This can be stored as an additional
  Point2d in Shape2d. It is important that when
  transformations are applied to a shape, they are
  also applied to the local origin.

27
Homework

• Modify our drawing program to include methods to
  translate, rotate, and scale points, lines,
  shapes, and drawings. (Remember to update those
  in the notes for shapes and drawings to include
  the local origin point)
• Create an aquarium with multiple fish swimming
  around some large, some small, some rotated,
  all in different locations within the drawing.
  Use the file created for the last homework as
  your model for the fish. This should only be
  modified using the methods you have now created.