Hacker News Reader

What would it take to add animations?

There's currently no concept of a "scene" (you essentially add shapes which are immediately drawn to the canvas, never saved) so animating a given shape involves changing it slightly and redrawing everything manually.

As for a next step for the project, I'd like to keep track of the objects added to the scene, and draw them intelligently.

A simple way to get there is to store each function and arguments in an object, as a list of draw operations, instead of executing the functions. Add in an object id (list index) to return to the caller, and then the caller can modify parsmter values between frames.

Do you know of any resources or examples that demonstrate basic animation techniques like this? The canvas examples I've found so far seem to be for fluid animations or games, rather than interactive scenes or visualisations that can be stopped or stepped through.

Too late to edit my original comment - but I added a subtle animation to the landing page to show that it's possible.

http://jdan.github.io/isomer/ (at the top)

I'm redrawing the entire structure each time, though. You could optimize it manually by only redrawing surrounding polygons. Performance seems pretty good on my end, decent on mobile.

Reply on news.ycombinator.com