Animated Trail within a Panorama

  • I have a requirement to display an animated trail within a panorama, revealing the trail in the panorama from one end bit by bit over a period of time. To do this, I have created the trail within the panorama XML not as a single polyline hotspot, but as a series of polylines that only has two points representing a small segment of the trail. Since each of the hotspots is defined in the XML as not being visible, I can make them visible progressively one by one within a render loop through the javascript interface to perform the animation. But this does not result in a smooth animation since the position within the animation may not exactly correspond to the end of the last revealed segment. When I planned this out, I figured that I could handle this issue by having a single 'floater' polyline that could always be at the tip of the revealed line, with its two line coordinates always being changed within the render loop to match the required position within the animation. Where I am now stuck is that I have not figured out how to modify the coordinates of the two points of the 'floater' polyline hotspot on the fly through the javascript interface. So if anyone can tell me how to dynamically update the point coordinates within a polyline hotspot on the fly I will be very grateful, or if someone knows of another technique to create an animation like this that I have not thought of please let me know. Thanks.

    Larry Wieland

  • That's a very interesting question. Perhaps you could rely on a hotspot whose content is an SVG path that you animate with CSS. A simple action makes the hotspot visible and triggers the animation.

    Quick test: https://scenicview.ch/animate_trail/

  • Interesting. That appears that it would work, but only so long as the panorama was not in motion as well while the animation was taking place, since the trail SVG is defined in screen coordinates instead of ath and atv panorama coordinates. For it to work while the panorama is in motion, you would need to have to redefine the path, converting from panorama coordinates to screen coordinates for each frame of the animation within the render loop. I see that I didn't include the requirement that the panorama be in motion in my original post. In the past I've played around with defining SVG paths for panoramas in ath atv coordinate paths that are stored in JSON outside of the panorama and then converting them on the fly to screen coordinates, in Javascript, but the performance was too poor for it to work when the panorama was in motion, which eventually led me to using polylines within the panorama xml which performs smooth as silk for a static polyline. But now I'm pushing the envelope further to add the animation of the path.

  • If I understand correctly what you're trying to achieve, you can do this by creating a distorted hotspot and applying Klaus's tutorial for extracting the area concerned, then recalculating its position in the panorama.

    klaus.krpano
    May 14, 2012 at 7:24 PM

    Once the area has been extracted, you draw on the image your vector path and an invisible rectangle corresponding to the entire area of the image extracted from PTGUI or Hugin.

    As you can see in my little example below, the SVG animation is perfectly in place and runs smoothly as the panorama moves.

    krpano - GE_Carouge_Etoile_aerien_05

    I hope this helps.

  • Well I think I've found the solution, though I will not have an opportunity to test it for a few days, and it's actually quite simple. If I am reading Klaus's XML documentation currently, I can use the point[...].ath and point[...].atv hotspot attributes of the 'floater' polyline hotspot to dynamically reposition it to the tip of the animated path. I am presuming that ... is the zero-based index of the point within the XML definition of the path, and if so I simply use the set command of the Javascript interface to reset the coordinates of the two points defining the line in the floater polyline to dynamically move it as the animation progresses. I'll post the results again when I've had a chance to test it.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!