Implement a rigorous affine transform between screen and complex plane
Closed this issue · 3 comments
Mapping between screen and plane is implemented using ad-hoc equations and is not well-defined. Features such as #32 pinch to zoom are hard to implement. Moreover I would like to have rotation, shear and scale features as some images would benefit from such transformation (see http://solendil.github.io/fractaljs/#AAQBLAAMAAACbJWUwkYbmv0YFDbI5ddm*fc2PXyOUkD8AAKBBAQAAAA__ for example)
A simple affine transform would have a negligible effect on performances and would allow such features.
A more thorough definition of the "minimum extent" is also needed. I propose the biggest square included and centered in the screen as the display unit. Everything outside of the square being a "bonus".
Last commit allows such rotations with R and T keys (not deployed on the website yet).
This is just the tip of the iceberg, and it's still a hidden feature because of bugs.
The bottom of the iceberg is that there is now a full-blown model with a camera that translates its coordinates into an affine transformation matrix. This is far more rigorous than the previous system and it will allow more features in the near future.
Still to do in order for this ticket to be closed:
- fix bugs with move/zoom when view is tilted/sheared
- store new parameters in URL (#34)
- implement UX, documentation and info pane for these extra movements
There's a bug in the current commit: you cannot zoom beyond a certain point because my quick and dirty matrix implementation cannot invert ill-conditioned matrices... Just tried Sylvester and it works fine, but it adds 45k to the project. Either I can implement a proper matrix inversion myself or I will need to strip and integrate Sylvester to FractalJS.
Edit : YES! :) http://math.stackexchange.com/questions/1682174/how-to-computationally-invert-a-matrix-with-small-values
Affine transforms are now live:
http://solendil.github.io/fractaljs/#Bt_3&x_-1.4318633594298142&y_-0.0000037591491940302353&w_0.000029826970008190336&i_255&fs_1&ct_17&co_59&cd_6.75&va_0.7660&vb_-0.4829&vc_0.6428&vd_0.5755
The feature is more or less hidden for the moment:
- R+arrows left/right : rotate
- S+arrows : scale X or Y
- H+arrows : shear X or Y
- V : reset viewport
And this feature will also be useful for touch events