4 ms·

Kind of offtopic: How should browsers handle transitions of transformations? AFAIK in Firefox if your transformation is a composition of multiple transformati

by leni536 12y ago

Kind of offtopic: How should browsers handle transitions of transformations? AFAIK in Firefox if your transformation is a composition of multiple transformations then it does a transition of each part in a way where the transformation parameter linearly changes. Like between scale(2) rotate(0) and scale(4) rotate(90) in the middle of the transformation there is scale(3) rotate(45). It's different if you define the same transformations at the two ends as matrices. It's kind if cool tho, since you can create a transition between rotate(0) and rotate(360), however it's not entirely clear what happens if the two ends have different transformation elements.

yummyfajitas 12y ago
If only mathematicians would construct an algebra of linear transformations. Then the browser vendors could simply implement the laws of this linear algebra once and for all.
- logicallee 12y ago
  "dammit Jim, I'm a browser, not a linear algebra engine!"
- zamalek 12y ago
  Then these computer scientists wouldn't be able to design their own system and, honestly, where's the fun in that? How are people going to take an international standards committee and software vendors seriously if they don't prove that they are able to come up with their own algebra for linear transformations? No no, the stuff from the mathematicians probably wouldn't work and we'd be left with a dent in our egos.
- omaranto 12y ago
  How does linear algebra answer leni536's question about how to handle transitions between two linear transformations? I take it that question is roughly: given two matrices A and B, guess which continuous path M(t) of matrices with M(0)=A and M(1)=A the web developer intended or will find most visually pleasing. I don't think linear algebra has any mind reading built in. By the way, why don't browsers just let you specify the function M(t) to be used for the transition?
  - coderzach 12y ago
    They don't let you specify it because css transitions and animations are supposed to be simple and easy to use (no math), and css doesn't really have the language constructs you'd need to write specify M(t). You can do it with javascript, which imho is far superior to animating with css.
  - derf_ 12y ago
    The space of invertible linear transformations is actually a Riemannian manifold, and in particular a Lie group. Because Lie groups are differentiable, you can defining a geodesic path between two points by minimizing a path integral. That would be the "canonical" [0] path to choose, but there are three problems. The shortest path depends on your metric. There are straightforward choices for translation (uniform L2 norm) and even scaling (log) and rotation (the amount you rotate by), but when all three are combined in one matrix, units come into play, and things like skew and perspective make them more complicated. This path is not guaranteed to be unique. Uniqueness fails exactly where two or more geodesics cross. The set of places where this happens is called the "cut locus". The example given elsewhere of a 180 degree rotation is a good illustration of a point in a cut locus. The set of invertible linear transformations is also not connected. It is partitioned into two components: those with positive determinant and those with negative determinant, and there is no continuously differentiable path from one to the other that does not cross through a matrix with det=0 (i.e., that is not invertible). http://dbaron.org/css/test/2010/transition-negative-determinant http://dbaron.org/css/test/2010/transition-negative-determin... has some examples of animations between 2D transformations where the sign of the determinant differs. As for intent... this is the reason for the rule pornel gives in another comment: if all of your transforms use the same functions in the same order, then interpolation is done on the arguments of these functions (this also eliminates the problems with having to choose a metric described above). That gives the designer a reasonably simple way to express intent. I think that a language for specifying M(t) that is expressive enough to cover all the bases would be very complicated to define, and probably not of much more practical utility than just defining a large number of matrices and doing short transitions between them, which you can do today. P.S., I work for Mozilla and gave advice to people in the CSS WG when 3D animations were being discussed. [0] The definition of canonical being, if you locked 10 mathematicians in a room and asked them a question, it's the answer 9 of them would give you.
- GFK_of_xmaspast 12y ago
  The space of solid rotations in three dimensions is, of course, non-linear.
- tlb 12y ago
  A rotation by 180 is the same matrix as two mirror images across X and Y. But the interpolation should look quite different.
pornel 12y ago
It's well defined. If all your transforms use the same functions in the same order, then transition is done on arguments of these functions. If functions or their order differs then everything is flattened to a matrix and then the matrix is transitioned.
Bahamut 12y ago
Given a decomposition into a linear equation of the form a * x + b, where a is a scalar multipying a rotation maxtrix, one should be able to create a linear relation between two equations of this form with the variable being time. The time factor should still follow the same rules as specified by the transition, so one shouldn't have much issue piecing these together, if it is so desired to have this behavior. Edit: Sorry, linear relation is not what I meant - one should be able to construct a parametric equation in terms of t where t = 0 is the initial transform and t = 1 is the final transform.
jsprogrammer 12y ago
The parameters change according to the `timing-function` you set for the animation or transition.

by leni536 12y ago

yummyfajitas 12y ago

If only mathematicians would construct an algebra of linear transformations. Then the browser vendors could simply implement the laws of this linear algebra once and for all.

logicallee 12y ago
"dammit Jim, I'm a browser, not a linear algebra engine!"
zamalek 12y ago
Then these computer scientists wouldn't be able to design their own system and, honestly, where's the fun in that? How are people going to take an international standards committee and software vendors seriously if they don't prove that they are able to come up with their own algebra for linear transformations? No no, the stuff from the mathematicians probably wouldn't work and we'd be left with a dent in our egos.
omaranto 12y ago
How does linear algebra answer leni536's question about how to handle transitions between two linear transformations? I take it that question is roughly: given two matrices A and B, guess which continuous path M(t) of matrices with M(0)=A and M(1)=A the web developer intended or will find most visually pleasing. I don't think linear algebra has any mind reading built in. By the way, why don't browsers just let you specify the function M(t) to be used for the transition?
- coderzach 12y ago
  They don't let you specify it because css transitions and animations are supposed to be simple and easy to use (no math), and css doesn't really have the language constructs you'd need to write specify M(t). You can do it with javascript, which imho is far superior to animating with css.
- derf_ 12y ago
  The space of invertible linear transformations is actually a Riemannian manifold, and in particular a Lie group. Because Lie groups are differentiable, you can defining a geodesic path between two points by minimizing a path integral. That would be the "canonical" [0] path to choose, but there are three problems. The shortest path depends on your metric. There are straightforward choices for translation (uniform L2 norm) and even scaling (log) and rotation (the amount you rotate by), but when all three are combined in one matrix, units come into play, and things like skew and perspective make them more complicated. This path is not guaranteed to be unique. Uniqueness fails exactly where two or more geodesics cross. The set of places where this happens is called the "cut locus". The example given elsewhere of a 180 degree rotation is a good illustration of a point in a cut locus. The set of invertible linear transformations is also not connected. It is partitioned into two components: those with positive determinant and those with negative determinant, and there is no continuously differentiable path from one to the other that does not cross through a matrix with det=0 (i.e., that is not invertible). http://dbaron.org/css/test/2010/transition-negative-determinant http://dbaron.org/css/test/2010/transition-negative-determin... has some examples of animations between 2D transformations where the sign of the determinant differs. As for intent... this is the reason for the rule pornel gives in another comment: if all of your transforms use the same functions in the same order, then interpolation is done on the arguments of these functions (this also eliminates the problems with having to choose a metric described above). That gives the designer a reasonably simple way to express intent. I think that a language for specifying M(t) that is expressive enough to cover all the bases would be very complicated to define, and probably not of much more practical utility than just defining a large number of matrices and doing short transitions between them, which you can do today. P.S., I work for Mozilla and gave advice to people in the CSS WG when 3D animations were being discussed. [0] The definition of canonical being, if you locked 10 mathematicians in a room and asked them a question, it's the answer 9 of them would give you.
GFK_of_xmaspast 12y ago
The space of solid rotations in three dimensions is, of course, non-linear.
tlb 12y ago
A rotation by 180 is the same matrix as two mirror images across X and Y. But the interpolation should look quite different.

pornel 12y ago

It's well defined. If all your transforms use the same functions in the same order, then transition is done on arguments of these functions. If functions or their order differs then everything is flattened to a matrix and then the matrix is transitioned.

Bahamut 12y ago

Given a decomposition into a linear equation of the form a * x + b, where a is a scalar multipying a rotation maxtrix, one should be able to create a linear relation between two equations of this form with the variable being time. The time factor should still follow the same rules as specified by the transition, so one shouldn't have much issue piecing these together, if it is so desired to have this behavior. Edit: Sorry, linear relation is not what I meant - one should be able to construct a parametric equation in terms of t where t = 0 is the initial transform and t = 1 is the final transform.

jsprogrammer 12y ago

The parameters change according to the `timing-function` you set for the animation or transition.