Practical Application of Coordinate and Dot

Transformations

Topics: linear algebra, programming with Delphi,computer graphics, OO conception

Sándor Kaczur

kaczur@gdf.hu

2

Circumstances

• 1. semester– Mathematics 1.

• Linear algebra, matrices• System of equations

• 3. semester– Computer graphics, Digital image processing

• Homogeneous coordinates• Coordinate and dot transformations• Projections

3

Problems

• They can solve exercises from linear algebra, but do not know it is possible to use it at practice.

• They recognize how can be working/applying projections and transformations.

• Students have isolated/separated knowledges.

• The contact is not seen between the two things/subjects/topics.

4

Ideas

• Let us establish the connection between mathematics and the practical applying of the transformation with homogeneous coordinates.

• How can we do that? Write the simple software, that can be used for presentation of different transformations.

• It helps in the understanding of how we can use the description of the different transformation matrices in the practice.

5

Ideas

• The software will be an user-friendly GUI.• When the students learning Delphi or C#,

they have already known how to planning an OO software.

• We need a simple solid body to demonstrate dot transformations: cube.

• What would be if we would planning/ prepare this software together with the students? Perfect idea!

6

The finished software

7

Preparations

• Computerised algorithms

• Spatial transformations

• Affine transformations

• Uniformity

• Homogeneous coordinates

• Matrices

• OO attitude

• Canvas technology

8

Homogeneous coordinatesLet be a dot P in 3D with 3 coodinates:

zyxP ,,

If let coordinates of dot P:0w

wzwywxwP ,,,

If than let be normalized homogeneous coordinates for dot P:

1w

1,,, zyxP

9

Transformations

• Coordinate– Viewpoint changes– Object does not

change

• Dot– Viewpoint does not

change– Object changes

• Affine– Picture of a dot is a

dot– Picture of a section is

a section– Picture of a line is a

line– Picture of a plane is a

plane

10

Transformations

• 3D objects 2D objects

Plane of projection

Representer object

11

Transformations

• Magnification• Reduction• Scaling• Moving• Turning• Mirroring

12

The general form of affine transformations in 3D

1

'

'

'

10001333231

232221

131211

z

y

x

bttt

bttt

bttt

z

y

x

z

y

x

Using the general form, all geometry transformations with matrix multiplication can be effectively modelled in computer graphics.

13

Matrix T and vector B

• With matrix T– Turn the dot around

axes with an angle– Change scale– Mirror

• With vector B– Move away the dot

333231

232221

131211

ttt

ttt

ttt

T

zyx bbbB

14

Thinking of the cube and the software

• Parts of the cube– 8 dots, 12 edges, 6 sheets

• Decision– Draw 12 edges on the canvas

• Storing the cube– 8 dots

• 3D• 2D

15

Data types and data structures

• TDot3D TDot3D = Record X,Y,Z: Real;

end;

• TCube3DTCube3D =Array[1..8] of TDot3D;

• TDot2D TDot2D = Record X,Y: Integer;

end;

• TCube2DTCube2D =Array[1..8] of TDot2D;

16

Class in UMLTCube

-Cube3D: TCube3D-Cube2D: TCube2D-Origo: TDot2D-edgelength, depth, lineweight, movescale: Integer-bgcolor, drawcolor: TColor-alpha: Real...

-Initialise,-DrawCube, ClearCube, DrawAxes,-ColorGridChange, seLineweightChange, seEdgelengthChange, seDepthChange, seMovescaleChange, seTurnAngleChange-MoveCube(bx, by, bz: Integer),-TurnArundX(angle: Real), TurnAroundY(angle: Real),

TurnAroundZ(angle: Real)...

17

Class in the source codeTCube = class(TForm)... private Cube3D: TCube3D; Cube2D: TCube2D; Origo: TDot2D; edgelength, depth, lineweight, movescale: Integer; bgcolor, drawcolor: TColor; alpha: Real;... end;

18

Preparation of canvas

var Cube: TCube;

procedure TCube.FormCreate(Sender: TObject);begin Cube.Initialize;end;

19

Preparation of canvas

procedure TCube.Initialize;var emptypicture: TBitmap;begin // white background emptypicture:=TBitmap.Create; emptypicture.Width:=iPicture.Width; emptypicture.Height:=iPicture.Height; iPicture.Picture.Graphic:=emptypicture; emptypicture.Destroy;...

20

Origo and default settings... //origo and default settings Origo.X:=300; Origo.Y:=300; edgelength:=200; depth:=400; lineweight:=2; movescale:=5; bgcolor:=clWhite; drawcolor:=clBlack; alpha:=18*(Pi/180); DrawAxes;...

21

Drawing axes

procedure TCube.DrawAxes;var oldlineweight: Integer; oldcolor: TColor;begin with iPicture.Canvas do begin oldcolor:=drawcolor; oldlineweight:=lineweight; Pen.Color:=clRed; Pen.Width:=2; MoveTo(Origo.X,Origo.Y); LineTo(Origo.X+270,Origo.Y); TextOut(580,294,'X'); MoveTo(Origo.X,Origo.Y); LineTo(Origo.X,Origo.Y-270); TextOut(296,10,'Y'); TextOut(285,305,'Z'); Pen.Color:=oldcolor; Pen.Width:=oldlineweight; end;end;

22

Positions of the cube’s dots // positions of the cube’s dots Cube3D[1].X:=-1; Cube3D[1].Y:=-1; Cube3D[1].Z:=-1; Cube3D[2].X:=1; Cube3D[2].Y:=-1; Cube3D[2].Z:=-1; Cube3D[3].X:=1; Cube3D[3].Y:=1; Cube3D[3].Z:=-1; Cube3D[4].X:=-1; Cube3D[4].Y:=1; Cube3D[4].Z:=-1; Cube3D[5].X:=-1; Cube3D[5].Y:=-1; Cube3D[5].Z:=1; Cube3D[6].X:=1; Cube3D[6].Y:=-1; Cube3D[6].Z:=1; Cube3D[7].X:=1; Cube3D[7].Y:=1; Cube3D[7].Z:=1; Cube3D[8].X:=-1; Cube3D[8].Y:=1; Cube3D[8].Z:=1; for i:=1 to 8 do with Cube3D[i] do begin X:=X*edgelength/2; Y:=Y*edgelength/2; Z:=Z*edgelength/2; end;

23

Drawing the cubeprocedure TCube.DrawCube;const order: Array[1..16] of Byte= (1,2,3,4,1,5,6,2,6,7,3,7,8,4,8,5);var i, a, b: Byte;begin with iPicture.Canvas do begin Pen.Color:=drawcolor; Pen.Width:=lineweight; ...

24

Drawing the cube ... for i:=1 to 8 do begin Cube2D[i].X:=Origo.X+ Round(Cube3D[i].X*depth/(depth-Cube3D[i].Z)); Cube2D[i].Y:=Origo.Y- Round(Cube3D[i].Y*depth/(depth-Cube3D[i].Z)); end; for i:=1 to 15 do begin a:=order[i]; MoveTo(Cube2D[a].X,Cube2D[a].Y); b:=order[i+1]; LineTo(Cube2D[b].X,Cube2D[b].Y); end; end;end;

25

Changing drawing color... ColorGrid.ForegroundIndex:=drawcolor;

procedure TCube.ClearCube;var oldcolor: TColor;begin oldcolor:=drawcolor; drawcolor:=bgcolor; DrawCube; drawcolor:=oldcolor; DrawAxes;end;

procedure TCube.ColorGridChange(Sender: TObject);begin ClearCube; drawcolor:=ColorGrid.ForegroundColor; DrawCube;end;

26

Changing the weight of the lines... // MinValue:=1, MaxValue:=9, // MaxLength:=1 seLineweight.Value:=lineweight;...

procedure TCube.seLineweightChange(Sender: TObject);begin ClearCube; lineweight:=seLineweight.Value; DrawCube;end;

27

Changing the depth of space... // MinValue:=300, MaxValue:=500, // MaxLength:=3, Increment:=10; seDepth.Value:=depth;...

procedure TCube.seDepthChange(Sender: TObject);begin ClearCube; depth:=seDepth.Value; DrawCube;end;

28

Changing the length of the edges... // MinValue:=100, MaxValue:=300 // MaxLength:=3, Increment:=5; seLineweight.Value:=lineweight;...

procedure TCube.seEdgelengthChange(Sender: TObject);var i: Byte; oldedge: Integer;begin ClearCube; oldedge:=edgelength div 2; edgelength:=seEdgelength.Value; ...

29

Changing the length of the edges

... for i:=1 to 8 do with Cube3D[i] do begin X:=X/oldedge; X:=X*edgelength/2; Y:=Y/oldedge; Y:=Y*edgelength/2; Z:=Z/oldedge; Z:=Z*edgelength/2; end; DrawCube;end;

This is an inverse mapping. We have to calculate coordinates back from the old value to the new proportioned value.

30

Moving the cubeprocedure TCube.MoveCube(bx, by, bz: Integer);var i: Byte;begin ClearCube; for i:=1 to 8 do begin Cube3D[i].X:=Cube3D[i].X+bx; Cube3D[i].Y:=Cube3D[i].Y+by; Cube3D[i].Z:=Cube3D[i].Z+bz; end; DrawCube;end;

zyx bbbB

31

Moving the cubeprocedure TCube.sbMoveCubeClick(Sender: TObject);begin if Sender is TSpeedButton then case (Sender as TSpeedButton).Tag of 1: MoveCube(-movescale,movescale,0); 2: MoveCube(0,movescale,0); 3: MoveCube(movescale,movescale,0); 4: MoveCube(movescale,0,0); 5: MoveCube(movescale,-movescale,0); 6: MoveCube(0,-movescale,0); 7: MoveCube(-movescale,-movescale,0); 8: MoveCube(-movescale,0,0); end;end;

1 2 3

8 4

7 6 5

32

Changing the moving scale... // MinValue:=5, MaxValue:=30, // MaxLength:=2, Increment:=5; seMovescale.Value:=movescale;...

procedure TCube.seDepthChange(Sender: TObject);begin movescale:=seMovescale.Value;end;

33

Turning the cube around axis Xprocedure TCube.TurnAroundX(angle: Real);var i: Byte; oldy, oldz: Real;begin ClearCube; for i:=1 to 8 do begin oldy:=Cube3D[i].Y; oldz:=Cube3D[i].Z; Cube3D[i].Y:=oldy*cos(angle)-oldz*sin(angle); Cube3D[i].Z:=oldy*sin(angle)+oldz*cos(angle); end; DrawCube;end;

)cos()sin(0

)sin()cos(0

001

angleangle

angleangleT

34

Turning the cube around axis Xprocedure TCube.seTurnLeftXClick(Sender: TObject);begin TurnAroundX(alpha);end;

procedure TCube.seTurnRightXClick(Sender: TObject);begin TurnAroundX(-alpha);end;

35

Turning the cube around axis Yprocedure TCube.TurnAroundY(angle: Real);var i: Byte; oldx, oldz: Real;begin ClearCube; for i:=1 to 8 do begin oldx:=Cube3D[i].X; oldz:=Cube3D[i].Z; Cube3D[i].X:=oldx*cos(angle)-oldz*sin(angle); Cube3D[i].Z:=oldx*sin(angle)+oldz*cos(angle); end; DrawCube;end;

)cos(0)sin(

010

)sin(0)cos(

angleangle

angleangle

T

36

Turning the cube around axis Yprocedure TCube.sbTurnLeftYClick(Sender: TObject);begin TurnAroundY(-alpha);end;

procedure TCube.sbTurnRightYClick(Sender: TObject);begin TurnAroundY(alpha);end;

37

Turning the cube around axis Zprocedure TCube.TurnAroundZ(angle: Real);var i: Byte; oldx, oldy: Real;begin ClearCube; for i:=1 to 8 do begin oldx:=Cube3D[i].X; oldy:=Cube3D[i].Y; Cube3D[i].X:=oldx*cos(angle)-oldy*sin(angle); Cube3D[i].Y:=oldx*sin(angle)+oldy*cos(angle); end; DrawCube;end;

100

0)cos()sin(

0)sin()cos(

angleangle

angleangle

T

38

Turning the cube around axis Zprocedure TCube.sbTurnLeftZClick(Sender: TObject);begin TurnAroundZ(alpha);end;

procedure TCube.sbTurnRightZClick(Sender: TObject);begin TurnAroundZ(-alpha);end;

39

Changing the turning angle... // MinValue:=10, MaxValue:=60, // MaxLength:=2, Increment:=1; seTurnAngle.Value:=18;...

procedure TCube.seTurnAngleChange(Sender: TObject);begin alpha:=seTurnAngle.Value*(Pi/180);end;

40

Some oddments

seTurnAngle.SetFocus;

...

„Form”.Caption:=’Cube in space’;

...

Application.Title:=’Cube in space’;

...

Version info -> Legal Copyright

...

„Form”.BorderStyle:=bsDialog;

...

41

Developing possibilities

• Moving the cube by the side of axis Z• Turning around an optional, equation-definied

line• „VRML possibilities”• Applying coordinate transformations• Reset, default button• Saving status to ini file

• ... anything else

42

Summary

• We are applying this problem with Java, Delphi, C#.

• Our experiences are very favourable.• This method establishes the connection

between mathematics and the practical applying of the transformation with homogeneous coordinates.

• It helps in the understanding of how we can use the description of the different transformation matrices in the practice.

43

References

1. Budai Attila, Vári Kakas István: Számítógépes grafika (3.1.3. A modelltér transzformációi, 88), INOK Kft., Budapest, 2007

2. Berke József, Hegedűs Gy. Csaba, Kelemen Dezső, Szabó József: (5.3. Koordinátatranszformációk, 78), Veszprémi Egyetem Georgikon Mezőgazdaságtudományi Kar, Keszthely, 2002

3. Hack Frigyes: 3D-grafika geometriai alapjai (2. Koordinátatranszformációk, 19), ELTE, Budapest, 2002

4. Kondorosi Károly, László Zoltán, Szirmay-Kalos László: Objektum-orientált szoftverfejlesztés, ComputerBooks, Budapest, 1997

5. Kazai Zsolt, Vég Csaba, Petrov Ferdinánd: A rendszerfejlesztés módszertana (8. A fejlesztés folyamata Unified Process-ben, 311), Gábor Dénes Főiskola, Budapest, 2001

Practical Application of Coordinate and Dot

Transformations

Topics: linear algebra, programming with Delphi,computer graphics, OO conception

Sándor Kaczur

kaczur@gdf.hu