3 ms·

Is there any reason why the rotation animation doesn't just use CSS rotation? The code looks rather complicated and this old laptop seems to really be unhappy t

Is there any reason why the rotation animation doesn't just use CSS rotation? The code looks rather complicated and this old laptop seems to really be unhappy to do what appears to just be two images doing a standard rotation. Is it not that?

axblount 3y ago
It's performing the projection in real time. It has to because you can change the perspective of the projection by clicking on the map.
- kristopolous 3y ago
  Yeah sure, that feature makes sense. But when you start rotating it by pressing the spin/pause button in the interface, don't things become much simpler? Maybe the answer is "no" but I really can't understand why.
  - kzrdude 3y ago
    I think you're right.. it looks that way visually. You'd want to render at increased resolution to improve quality and then do a simple rotate?
  - DougBTX 3y ago
    Probably just because it is harder to implement, the CSS would be an optimisation of a specific case on top of the general code. Classic cost (in time and overall complexity) vs performance tradeoff.
    - kristopolous 3y ago
      How would projection code get you rotational animation for free?
      - DougBTX 3y ago
        The projection logic has an orientation parameter (which you'd probably always want, so that you can pick initial rotation), so the rotation animation itself is just updating the param on a timer. Basically line 182 plus the calls to redraw: gamma -= 0.003; To do it with CSS, at a minimum it would require adding support for rendering to two different canvas elements.
        Someone 3y ago
        > To do it with CSS, at a minimum it would require adding support for rendering to two different canvas elements. It might into trouble because rotating a rectangular <img> area varies it in height and width [1], but I would investigate animating a ‘rotate’ transformation. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate https://developer.mozilla.org/en-US/docs/Web/CSS/transform-f.... [1] seems to have a demo without that problem, so it seems this can be made to work https://imagekit.io/blog/image-rotation-html-and-css-imagekit/ https://imagekit.io/blog/image-rotation-html-and-css-imageki...
        brianshaler 3y ago
        Here's an interactive WebGL implementation: https://brian.sh/around/index.html https://brian.sh/around/index.html It doesn't have a satellite image option, but that would arguably be simpler than drawing continents like it does now. It uses a seldom-redrawn base canvas (menu -> debug > show 2d texture) then the discs are drawn with a simple shader.
alanbernstein 3y ago
Before I pushed the rotate button, I expected the rotation to be along a different axis, not the one aligned with the projection. i didn't look at the code, does it support that?
kbrosnan 3y ago
The paper is from 2012 if the visualization is from that era JS makes sense.

axblount 3y ago

It's performing the projection in real time. It has to because you can change the perspective of the projection by clicking on the map.

kristopolous 3y ago
Yeah sure, that feature makes sense. But when you start rotating it by pressing the spin/pause button in the interface, don't things become much simpler? Maybe the answer is "no" but I really can't understand why.
- kzrdude 3y ago
  I think you're right.. it looks that way visually. You'd want to render at increased resolution to improve quality and then do a simple rotate?
- DougBTX 3y ago
  Probably just because it is harder to implement, the CSS would be an optimisation of a specific case on top of the general code. Classic cost (in time and overall complexity) vs performance tradeoff.
  - kristopolous 3y ago
    How would projection code get you rotational animation for free?
    - DougBTX 3y ago
      The projection logic has an orientation parameter (which you'd probably always want, so that you can pick initial rotation), so the rotation animation itself is just updating the param on a timer. Basically line 182 plus the calls to redraw: gamma -= 0.003; To do it with CSS, at a minimum it would require adding support for rendering to two different canvas elements.
      - Someone 3y ago
        > To do it with CSS, at a minimum it would require adding support for rendering to two different canvas elements. It might into trouble because rotating a rectangular <img> area varies it in height and width [1], but I would investigate animating a ‘rotate’ transformation. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate https://developer.mozilla.org/en-US/docs/Web/CSS/transform-f.... [1] seems to have a demo without that problem, so it seems this can be made to work https://imagekit.io/blog/image-rotation-html-and-css-imagekit/ https://imagekit.io/blog/image-rotation-html-and-css-imageki...
      - brianshaler 3y ago
        Here's an interactive WebGL implementation: https://brian.sh/around/index.html https://brian.sh/around/index.html It doesn't have a satellite image option, but that would arguably be simpler than drawing continents like it does now. It uses a seldom-redrawn base canvas (menu -> debug > show 2d texture) then the discs are drawn with a simple shader.

alanbernstein 3y ago

Before I pushed the rotate button, I expected the rotation to be along a different axis, not the one aligned with the projection. i didn't look at the code, does it support that?

kbrosnan 3y ago

The paper is from 2012 if the visualization is from that era JS makes sense.