Skip to content

Popcorn.js 0.6 and Google Maps Animation

May 19, 2011

So yesterday was the release date for 0.6 of Popcorn.js.  Over the last week and a half we have been working on finishing up all of the outstanding tickets for 0.6 and getting it ready for release.  The whole process was an awesome as I got to experience first hand what goes into a release, and how much work everyone actually does to get this stuff ready to ship in time.  I got to experience the pressure and expectations that go hand in hand with releasing new software, and how much we truly rely on one another/the community for help.  It really is a massive team effort that goes forth in order to get this done, and everyone plays a vital role in creating a crisp final product.  This being said, some of the new features in 0.6 include:

  • Facebook Plugin
  • Sequencer Player Plugin
  • GoogleMaps Tweening (animation)
  • LinkedIn Pluging
  • Wordriver Plugin (from RadioLab)
  • GML Plugin
  • Performance Improvements
  • Ability to enable/disable plugin types
  • As well as many other performance/bug fixes

The biggest ticket that I undertook over the course of the week was the Google Maps Animation, or “tweening” as were calling it.  The plugin, which is part of the already existing Google Maps plugin, allows the user to create a streetview animation from one point to another through various methods.  The first method, which was devised by Cole Gillespie, allows the user to specify numerous latitude + longitude values as well as specify the heading, pitch, and zoom value for each location along the tween.  This allows the user to create their own path with hardcoded lat+lng values, and really provides alot of flexibility as far as creating their own route is concerned.   My part involved making popcorn and the tweening merge smoothly, as well as creating a way for the user to specify a start and end location and let google generate a route for them which would then be animated along.  This provided to be a bit of a challenge as each route would be different, and I had to take a lot of different factors into account.

After scowering over the Google Maps API I finally got a working version up late last week/early this week and threw in up in the popcorn channel/on twitter to get some feedback.  Rick Waldron quickly pointed out that I was missing a key factor, that the tween was not stopping when the video was paused or the user seeked back in time along the video.  The tween had no relation to the video other than its start and end attributes.  This was a big issue as it didnt integrate into Popcorn.js as it was supposed to, and was really just a detached plugin that had almost no correlation to the video what so ever.  This needed to be fixed.  In doing so, a lot of the code changed, but ultimately finished with a much cleaner final product.  I got it working with the videos timeline and it really did look awesome when it did so.  Seeing the tween move forward and backwards when I seeked through the videos timeline was pretty cool if I do say so myself!

In addition to this there was a few issues that I didn’t get to fix in time for 0.6.  Right now, when the user auto generates a route between two points the heading is all screwed up.  As the tween changes its path and travels along roads, the heading, or direction the streetview camera is facing, never changes.  This makes it look kind of odd as the tween goes along, and really needs to be fixed in 0.7.  It would also be nice to get some much needed performance enchancements as well, as the tween is taking up alot of memory and CPU usage, which is less than desired.  Some ideas that cole mentioned, were pre-loading the images at each instance along the tween in order to generate a much smoother transition.

All in all this was a great first release.  I learned a ton about what goes into making functional, user friendly software, and how much hardwork and how many man hours really go into releasing these final products.  Also, a bit of a backtrack, but another huge part of 0.6 was Rick Waldrons video sequencer, which allows numerous videos to be played one after another.  My colleague Chris DeCairos helped Rick with testing and bug fixes throughout the week, and between the two of them, got the sequencer ready for 0.6, which was really an amazing feat in itself.  So I encourage everyone to give Popcorn.js 0.6 a try (you can fork it on github here for the time being) and also check out the Google Maps Animation stuff here.

Advertisements

From → school

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: