hey everyone so this course focuses on
graphics transformations and some
subtleties
of graphics transformations so
we saw that in the shape models
it contains points and properties
and transformations such as translation
and rotation or scales are applied
before just before the rendering okay
so imaging we have a house and we
want to transform it so that it is twice
the size
and up on the hill because we might want
to apply the same combined
transformation it would be better to
save the whole transformation for later
use
in a single operation
so for this we can use matrices
in the metric space to apply a function
to a vector
we multiply the matrix by the column
vector so
the goal is then to represent each kind
of transformation
the rotation translation and scale by a
matrix
so to save our combined transfer
transformation
we will just have to multiply all three
matrices
to form one single matrix
so how would you set a 2d matrix to
represent the scale transformations so
that when you multiply the scale matrix
by the vector
you would have a scaled vector the
solution is just to put
the scale factor on the diagonal of the
matrix
for the trans the rotation you arrange
the cosines and sines sinus
so that the multiplication gives the
wanted coordinates
we saw in the last lecture over here
but then how do you do for translation
and then add and not multiplies this
color
well you cannot use a 2x2 matrix to
represent
all 2d translations
all right so the solution is
to use three by three matrices
and by adding an extra component
called w to each coordinate so this
extra coordinate is called
homogeneous coordinates so now
the x y w vector represents a point
at the location x divided by w
and y by the value and because of this
you can have multiple homonaturous
points for the same cartesian
points so try with the three vectors
given here
and divide the x and y by the w
component
and you will have the exact same point
for the three vectors which is three and
two
so as a convention and for easier
transformations
we will represent two d coordinates with
a three tuple where w
is equal to one always and every point
will then be a vector
with x y and one
the transformation matrices have then to
be
three by three it is now easy to have a
translation matrix
as you can see
because with this with the the one on
the diagonal
and the translation factors on the last
column
if you multiply the translation matrix
by the vector
you will have the wanted transformation
right so in this example the translation
matrix
translate the house by two on
x and four one way
so then the three by three scale matrix
is
close to the 2d scale matrix
you put the scale factors on the
diagonal and leave the last one to 1
because it corresponds to the
homogeneous
component that we don't want to change
and multiplying the matrix by the vector
give the right scale vector where each
component is multiplied by the
corresponding scalar factor
so for the rotation it is close it's
also close to the scale matrix
and we just put the two by two rotation
matrix
as is in the three by three matrix
leaving the last
column empty and
just setting the last hundreds
component to one okay
so this is what we get as a rotation
matrix
to rotate the house by 30 degrees around
the origin
so now if we multiply these three
matrices
we will have what we call an undefined
transformation matrix which means that
it can express
any combination of translate rotate and
scale operations
so in matrix multiplication the order
matters
it's called non-commutative and
the multiplications are applied from
right to left
which means that the closest matrix from
the vector
is the first to be multiply here s is
the first applied to p
then r is applied to the result of s by
p
and then t is applied at the end on the
results of the previous two
multiplications
so this makes sense for transformation
because applying scale before
translation
gives a different result than
applying translation then scale
so don't forget that all those
transformations are made with report to
the origin of the frame
here but
what if we don't want to rotate around
the origin but around another point
let's say
here it's the left
end of the line and remember that the
transformations are applied individually
to all the points of the shape so if you
rotate
the black line by 30 degrees you will
have
this result and this is not what we want
okay so
here that the origin is the top left
of the figure so to solve this
the answer is to translate the line back
to the origin
at 0 0 apply the scale
and all rotation application and
and then translate it back and note that
here we use the graphics context okay
so we translate the the black line back
to the origin
and then we rotate the line and then we
translate it back
okay so here is what happens
we have our line at the start
we translate it to the origin
and rotate it then
the fourth step we translate it back
okay so we have the followed
transformation translation rotation and
translation
so like we said we used in the previous
example the graphics context but we
could also have done the same
using the shape classes here's a summary
of the equivalent methods
between shape classes and graphics
context and note that you don't have any
function
to heat test the shape with the graphics
context
because it draws directly on the canvas
and does not create any object
it just corners pixels
so to create a fine transformation java
effects include an
affine class to help you construct such
operations
so you just have to have append the
wanted transformation in the right order
with the corresponding
method so for example app and rotation
happen translate and open scales
and the transform method apply the
current a
fine transformation to the given point
okay so the last part of this
presentation
will be about how transformations are
handled
in a scene graph and how the contains
method works according to these
certainties
so we saw that in a shape model we have
the points defined at the origin
and some drawing properties but also a
transformation matrix
called transformed in javafx
right okay so in a scene graph each
shape has its
points and transformation matrix and
draws itself
relatively to its parents
for this every child inherits its parent
matrix
so nodes store the transformation matrix
relative to the parent
and then when drawing the node receives
its parent matrix concatenates it then
applies its own matrix draws itself
and then passes the combined matrix to
its
children since the root does not have
any parent it just draws itself
using its matrix and passes it so it's
children
so with all these transformations
how does it impact heat testing
because the mouse and shape models are
in different coordinate
systems the mouse is in the global
screen system
while the shapes are in their own system
so to test if the mouse hits a shape we
have two options
we either transform the shape into the
screen coordinates
or the other way the mouse into the
shape system
if we choose the first solution
this means that we have to transform
every point of the shape
model before calling the contains method
this means that for very complex and
detailed shape
it's extra calculation and memory so the
best solution
is to just transform the want point
representing the mouse position
and to transform the mouse coordinates
into the
shape coordinate system we need the
inverse matrix
of the shape that is costly to compute
and a low level solution is to maintain
an inverse transformation
matrix in the shape model but with
javafx you can have access to the
transformation matrix
and its inverse thanks to the node class
that
is inherited by every node subclass
but the best thing here is that you also
have built-in functions to directly
transform from local to screen or scene
coordinates and from screen to local
and also from scene to logo so here
are the the corresponding
functions you also have other variants
of these functions that take point
objects
or other kind of objects here
you just have x and y as doubles
so please refer to the documentation of
the node class for more
information