This morning I remembered a program that I haven’t used in years: Pivot Stickfigure. The program was a pretty simple animation tool for making 2D stickfigure based animations and it was fairly popular a few years back and there are many thousands of videos that have been made with it on YouTube. I thought it would be interesting to make a similar tool to Pivot Stickfigure that allowed me to create simple animations, however I figured it would be more interesting if I made it with HTML5 Canvas.
Before I started I decided that rather than having individual frames I would have a keyframes system. This would allow me to create smoother animation (even though I’m not that great at it). I put together a load of JavaScript that stores the animation in JSON format (and also displays it so that you can ‘save’ your animation). Unfortunately my version doesn’t really allow for more than one stick figure however it could, in theory, be added at a later date. I also added in a bunch of sliders so you could manipulate each frame and choose at what time point you wanted it at.
The above video shows my shocking first attempt at making an animation. Unfortunately my computer’s least favorite activity is screen capture so its a bit slow but if you want to check out the web app please click here and if you want the JSON for my animation click here (you can just copy and paste it in).
Comments on: "HTML5 Canvas Stick figure animator" (4)
Thank you for the thoughtful review. The main advantage of html5 player seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,
Great work came at a perfect time for me, html5 music playerwould be really cool if we could at least get an option to enable the HTML5 mode player in the next Subsonic release. Not only would it bypass the need for flash, but it also has some extra features (wav playback, etc).It seems the biggest issue would be with flv video, but by transcoding to mp4 instead of flv, that could be solved. Even without the video fix, making it optional would allow those of us the mainly use Subsonic for music to benefit from the new player.
Just what I need. I’m working on an open source html5 game (wrapped in sencha touch…sigh) for the coming Israeli elections and would love to use your code, can I?
Sure, go ahead although you probably ought to optimize the code first if you are running on mobile; it was designed to perform OK on desktop but I can’t imagine it is as fast elsewhere.