Discussion forum about PANORAMIC language

Mac, Windows & Android application development with PANORAMIC language
 
HomeFAQSearchRegisterMemberlistUsergroupsLog in
Latest topics
» Hello world.
by Mon Jun 19, 2017 1:37 am

» Biomorphes de PICKOVER
by Sun Jun 18, 2017 2:33 am

» In less than 10 lines of code
by Fri Jun 16, 2017 5:03 am

» Effect Dopler
by Fri Jun 16, 2017 3:29 am

» SuperEllipse
by Wed Jun 14, 2017 4:01 am

» Plants
by Wed Jun 14, 2017 3:38 am

» Mira's attractor
by Wed Jun 14, 2017 3:30 am

» Triangle of Sierpinski
by Wed Jun 14, 2017 3:22 am

» Esthétique polaire
by Wed Jun 14, 2017 3:16 am

» Butterfly effect : Lorenz equations
by Wed Jun 14, 2017 3:08 am

» Collision detection
by Tue Jun 13, 2017 5:09 am

» The Bees Laline Paull Epub Books
by Mon Oct 10, 2016 8:58 pm

» PANORAMIC for Mac OSX 10 is available
by Tue Aug 09, 2016 6:08 pm

» ide
by Sat Jul 16, 2016 12:27 am

» Can I change the program icon/logo in my application ?
by Thu Jul 07, 2016 3:32 am

Navigation
 Portal
 Index
 Memberlist
 Profile
 FAQ
 Search

Share | 
 

 Mathematical bases of tow dimension graphics

View previous topic View next topic Go down 
AuthorMessage
papydall

avatar

Number of posts : 39
Age : 66
Localisation : TUNISIA
Registration date : 2013-03-16

PostSubject: Mathematical bases of tow dimension graphics   Fri Apr 05, 2013 6:18 am

I thank Froggy One (A member of the French forum) for his translation of French to English


Mathematical bases of two dimension graphics

1-The window (WINDOW)
(Nothing to do with Windows system)
The user’s two dimension space theoretically spreads to infinite. But, practically, nobody will work with so large a space!
One generally works with a rectangular part of this space.
This zone can be considered as a window that specifies the data zone to be seen by the computer.
The four variables W1, W2, W3, W4 defining the window, are given using the user’s units.
They may be kilometers, hours, volts, Euros etc.
W1 = minimum abscissa; W2 = maximum abscissa ; W3 = minimum Y-axis; W4 = maximum Y-axis

2- Closure (VIEWPORT)
This is the rectangular zone of the screen, on which the window’s content will be projected.
The four variables V1, V2, V3, V4 will, this time, be described using the graphic system’s units..

3-From user’s to screen’s references
Here are the formulas (no demo)

XE = (XR * (V2 – V1) – W1 * V2 + V1 * W2) / (W2 –W3)
YE = (YR * (V4 - V3) – W3 * V4 + V3 * W4) / (W4 – W3)

With
XE and YE : screen coordinates
XR and YR : real coordinates of the point inside the user’s universe
V1, V2,V3,V4 : closure’s coordinates (VIEWPORT)
W1, W2, W3, W4 : window’s coordinates (WINDOW)

4- Transformations in a plane
Main plane transformations are : translations, scale changes, symmetries, rotations and shearing.
Matrix calculus permits to solve these problems easily.
The theory is a bit difficult and will not be exposed here.
I’ll just give you formulas to use in your program, avoiding too many headaches (not anybody has spared lots of aspirin !)
But a slice of theory could prove necessary.
Given (x,y) as coordinates of a point in the cartesian plane (thank you Monsieur René Descartes)
We’ll consider these coordinates as a one line, one column matrix, that we can write down 1X2 (read matrix 1 cross 2)
The general matrix M =

A B
C D

is a 2 lines by 2 columns matrix and will be called 2X2 matrix
Mathematically one can define the matrix multiplication following :
(x’ y’) = (x y) * M = (A*x+c*y B*x+D*y)

Any (x,y) point in the plane by (2X2) matrix has, as a transformed one, a new point in the plane (x’,y’) such as :
x’ = A*x+C*y
y’ = B*x+D*y

Transformation depending on values given to A,B,C,D variables


Scale changes
Those transformations are controlled by that matrix
A 0
0 D
A term gives growing or reducing on the X-axis.
D term gives growing or reducing on the Y-axis.
.
Nota Bene :
A multiplication by the unity matrix will transform any point as itself.
Unity matrix is
1 0
0 1

Symmetries
Matrices controlling symmetries appear as special cases of a scale changing matrix with negative values of A and/or D
-1 0
0 1
will create a symmetry on the Y-axis
1 0
0 -1
will create a symmetry on the Y-axis
-1 0
0 -1
will create a symmetry on both axes, that is a centre symmetry to the origin

Shearing
This matrix
1 B
0 1
will create a shearing on Y.
That matrix
1 0
C 1
will create a shearing on X.
And
1 B
C 1
will create a shearing on both directions

Rotations
This is the general model for a rotation matrix :
cos(theta) sin(theta)
-sin(theta) cos(theta)
with theta as positive or negative rotation angle

Translations
Although translations are quite elementary transformations, the general pattern of a matrix cannot help realizing them.
To pass this gap, one has to introduce so called homogenous coordinates.
That will be the next hint.
After thory, let’s enjoy the practice

The following code will demonstrate the effects of a 2X2 matrix

Code:
' ******************************************************************************
'
' The transformations of the plane : the effects of the matrix 2X2
'                  Matrix2X2.bas
'                    By Papydall
'
' ******************************************************************************
Run()
end
' ******************************************************************************
SUB Run()
    caption 0,"The transformations of the plane by Papydall"
    Declarer_Variables(): Init_Figure() : Saisie_Matrice_Transformation()
    Recherche_Fenetre_Provisoire() : Viewport() : go()
END_SUB
' ******************************************************************************
SUB Declarer_Variables()
    dim n : n = 4 : ' Number of the summits of the studied figure, here it is a square
    dim xp(n+1),yp(n+1) : ' Coordinates of the summits of the studied figure
    dim A,B,C,D : '  Terms of the matrix of transformation
    dim w1,w2,w3,w4 : ' Coordinates of the window  given in the units of the user
    ' w1 = mini abscissa; w2 = maxi abscissa; w3 = ordered mini; w4 = ordered maxi
    ' The window specifies the zone of data which must be seen by the computer
    dim v1,v2,v3,v4 : ' Coordinates of the Viewport given in the units of the graphic system
    ' It means that the viewport depends essentially on the computer.
    ' The viewport specifies the zone of the screen where will be planned the contents of the window
    dim a8,a9,b8,b9,u8,v8,t8,t9,q9,p9,x6,y6,x5,y5 : ' Working variables
END_SUB
' ******************************************************************************
' Initialization of the figure of departure
SUB Init_Figure()
    dim_local i
    for i = 1 to n : read xp(i) : read yp(i) : next i
    xp(n+1) = xp(1) : yp(n+1) = yp(1)
    data 1,1,2,1,2,2,1,2
END_SUB
' ******************************************************************************
' Seizure of the terms of the matrix of transformation
' The matrix is the shape:
' A B
' C D
' The obtained transformation depends on values given to variables A, B, C, D

' 1) The changes of scales are controlled by the matrix:
' A 0
' 0 D
' Example: for A, B, C, D, enter 3, 0, 0, 1; or 1, 0, 0, 0.2; or 4, 0, 4, 0

' 2) The matrices which control symmetries are only particular cases
' Of the matrix change of scale in which A and /or D are negative.
' Example: for A, B, C, D, enter the values
' -1, 0, 0, 1 ===> A symmetry with regard to the Y axis
' 1, 0, 0, -1 ===> A symmetry with regard to the X axis
' -1, 0, 0, -1 ===> A symmetry with regard to 2 axes ( a central symmetry with regard to the origin)
' 3) The Shearings:
' Example: for A, B, C, D, enter the values
' 1, 2, 0, 1 ===> Shearing Y
' 1, 0, 2, 1 ===> Shearing X
' 1, 2, 3, 1 ===> Shearing in 2 directions

' 4) The rotations around the origin are controlled by the matrix:
'  COS(Theta)  SIN(Theta)
' -SIN(Theta)  COS(Theta)
'  With Theta angle of rotation in radians
' Example: for A, B, C, D enter the values
' 0.866, 0.5, -0.5, 0.866 ===> rotation of +(pi/6) --> 30°
' ------------------------------------------------------------------------------
SUB Saisie_Matrice_Transformation()
    dim_local rep$
    repeat
      rep$ = message_input$("Term of the matrix of transformation","A =","")
    until numeric(rep$) > 0
    A = val(rep$)
    repeat
      rep$ = message_input$("Term of the matrix of transformation","B =","")
    until numeric(rep$) > 0
    B = val(rep$)
    repeat
      rep$ = message_input$("Term of the matrix of transformation","C =","")
    until numeric(rep$) > 0
    C = val(rep$)
    repeat
      rep$ = message_input$("Term of the matrix of transformation","D =","")
    until numeric(rep$) > 0
    D = val(rep$)
END_SUB
' ******************************************************************************
' Research for the temporary window
SUB Recherche_Fenetre_Provisoire()
    dim_local i, m,x1,y1
    w1 = power(10,20) : w2 = 0-power(10,20)
    w3 = power(10,20) : w4 = 0-power(10,20)
' We apply the transformation to all the points of the object to determine
' Abscissas and orderly extremum which we shall supply the window w1, w2, w3, w4
    for i = 1 to n
        x1 = xp(i) : y1 = yp(i) : Recherche_Fenetre(x1,y1)
        x1 = a*xp(i)+c*yp(i) : y1 = b*xp(i)+d*yp(i) : Recherche_Fenetre(x1,y1)
    next i
'  M contains the maximum of w, it serves to obtain a square window and an orthonormal base
    m = abs(w1)
    if m < abs(w2) then m = abs(w2)
    if m < abs(w3) then m = abs(w3)
    if m < abs(w4) then m = abs(w4)
    w1 = 0-m : w2 = m : w3 = 0-m : w4 = m
END_SUB
' ******************************************************************************
' Initialize the Viewport
SUB Viewport()
    read v1 : read v2 : read v3 : read v4
    data 100,350,100,350 : ' Choice of a Viewport squared to avoid the distortions
END_SUB
' ******************************************************************************
' The variable W$ can take one of 2 values "U" for UP or "D" for DOWN
' If W$ = "U", (PEN UP) we move raised pen (without leaving of track) --> 2D_POLY_FROM
' If W$ = "D", (PEN DOWN) we deplace lowered pen (by drawing the line) --> 2D_POLY_TO
SUB Go()
    dim_local x,y,w$,i
' Draw and increase the axes of 1 in 1
    Coord_Ecran() : Tracer_Axes() : Graduer_Axes(1,1)
' Draw the initial figure
    x = xp(1) : y = yp(1) : w$ = "U" : Projection(x,y,w$) : w$ = "D"
    for i = 2 to n+1 : x = xp(i) : y = yp(i) : Projection(x,y,w$) : next i
' Draw the transformed figure
    2d_pen_color 255,0,0 : x = a*xp(1)+c*yp(1) : y = b*xp(1)+d*yp(1)
    w$ = "U" : Projection(x,y,w$) : w$ = "D"
    for i = 2 to n+1
        x = a*xp(i)+c*yp(i) : y = b*xp(i)+d*yp(i) :Projection(x,y,w$)
    next i
    Affiche() : ' Show the matrix of transformation
END_SUB
' ******************************************************************************
' Look for window
SUB Recherche_Fenetre(x1,y1)
    if x1 < w1 then w1 = x1
    if x1 > w2 then w2 = x1
    if y1 < w3 then w3 = y1
    if y1 > w4 then w4 = y1
END_SUB
' ******************************************************************************
' Formulae of user passage of coordinates in coordinates screen
SUB Coord_Ecran()
    a8 = (v2-v1)/(w2-w1) : b8 = (v1*w2-v2*w1)/(w2-w1)
    a9 = (v4-v3)/(w4-w3) : b9 = (v3*w4-v4*w3)/(w4-w3)
END_SUB
' ******************************************************************************
' Graduation of the axes of 1 in 1
SUB Graduer_Axes(u,v)
    dim_local w$
    t8 = 0.02 * (w2-w1) : t9 = 0.02*(w4-w3)
    u8 = ((p9-w1)/u - int((p9-w1)/u))*u : v8 = ((q9-w3)/v - int((q9-w3)/v))*v
    for x6 = w1+u8 to w2 step u
        y6 = q9 : w$ = "U" : Tracer(w$) : y6 = q9+t9 : w$ = "D" : Tracer(w$)
    next x6
    for y6 = w3+v8 to w4 step v
        x6 = p9 : w$ = "U" : Tracer(w$) : x6 = p9 + t8 : w$ = "D" : Tracer(w$)
    next y6

END_SUB
' ******************************************************************************
' Projection +  drawn
SUB Projection(x,y,w$)
    x6 = x : y6 = y : Tracer(w$)
END_SUB
' ******************************************************************************
' Plan of axes
SUB Tracer_Axes()
    dim_local w$
    p9 = w1 : q9 = w3
    if w1 < 0 and w2 > 0 then p9 = 0
    if w3 < 0 and w4 > 0 then q9 = 0
    x6 = w1 : y6 = q9 : w$ = "U" : Tracer(w$)
    x6 = w2 : w$ = "D" : Tracer(w$)
    x6 = p9 : y6 = w3 : w$ = "U" : Tracer(w$)
    y6 = w4 : w$ = "D" : Tracer(w$)
END_SUB
' ******************************************************************************
SUB Tracer(w$)
    x5 = a8*x6+b8
    y5 = 400 - (a9*y6+b9)
    if w$ = "U" then 2d_poly_from x5,y5 : exit_sub
    2d_poly_to x5,y5
END_SUB
' ******************************************************************************
SUB Affiche()
    print : print : print " MATRIX OF TRANSFORMATION " : print
    print "  A = ";A;"  ";"B = ";B
    print "  C = ";C;"  ";"D = ";D
END_SUB
' ******************************************************************************
Back to top Go down
View user profile
 
Mathematical bases of tow dimension graphics
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» WebArtz Graphics Contest (Winners-Josh & Veljko)
» jan's graphics
» The HSP Dimension is 4 years old today!
» Capcom To Push 3DS Graphics With Monster Hunter 4
» I like big butts and I cannot lie

Permissions in this forum:You cannot reply to topics in this forum
Discussion forum about PANORAMIC language :: Panoramic for Windows :: Source code (snippets)-
Jump to: