This idea has been a dream of mine for years [0]. As a web developer, I never learned After Effects or any other complex animation software.
But I've always dreamed of creating interactive demos and animations just by using my natural mouse movements. It just feels right.
So last week I took a few days off from my main project to create Animatize [1], a proof-of-concept showing off the idea of using natural movement to create an animation.
What a cool project. You can really fit a lot of concepts into such a refined approach to animation. Thank you for sharing your result with us, I hope you are having fun with it too.
This is really amazing! There's a steep learning curve to do creative work & this is certainly a step in the right direction of WYSIWYG instead of needing to know tool specific operators etc.
This is great. Do you have plans to expand the controls or animation options? For example, adding pauses, or additional animation types like scale or rotate. Thanks for sharing this project.
Not OP, but I thought you might be able to use a canvas export, but alas the output is still javascript. My quick hack on a Mac would be QuickTime screen record + ffmpeg :-)
If SVG is supported as an input type too (good for rotating/scaling), then the output of the tool could all be editable text.
I guess building an IDE for that wouldn't make sense, but it would be nice to generate an HTML page that has all of the assets defined within it, as a single file.
Just trying to get a proof-of-concept out with this first version.
Btw, if anyone knows of a good way to stitch together two images into a gif by passing in coordinates (even a paid API for this), I'd love to know about it.
It's been one of my better decisions. I have so many projects that are 80% complete that I've just been too embarrassed to post.
31 launches is meant to help me get past that fear/hesitation.
But creating Animatize took 18 hours of my week last week and just completely wore me out. I had to take 5 days off just to recuperate and get back on track.
This is what ergonomics looks like. Even small children can convey the movement of actors through space using similar techniques. It's an extremely natural way to communicate how something moves. But we have lost that basic idea in favor of very precise animation tools and the complexity that comes with them.
I've noticed that "animating with mouse" has become an animation style of it's own on youtube recently. Mostly in comedic contexts which does look quite charming but in education videos as well which seems to be very functional.
An easy way to achieve this style in video is to fire up gimp (or some other image editor) and hide cursor in the recording software.
This meme[1] is pretty famous but doesn't hide the cursor or anything. There are a few others like it, I've never seen an educational video done like that though
How do they manage to move multiple “cutouts” independently at the same time, using the mouse? Especially when they’re overlapping. Green screen multiple recordings, and then merge them? Or is there a simpler explanation?
Yes since the background image is static you don't need a greenscreen. From watching just once, I think the guy never overlaps his clone(s). So you make two separate versions where their bounding boxes won't overlap (requires some planning) and then just show the left two-thirds of the bg image with guy 1, and the right one-third with guy 2, divided by a simple vertical cut.
And the overall zooming/panning is done after the merging. That's how I'd approach it.
This reminds me of a video game I played as a kid. Opening Night. You could create plays, dialog, etc and have your characters act for you. You could just choose where they walked and then had a bunch of emotes they could do.
This is great! As someone who has dealt with After Effects (and Flash) this feels like a great stepping stone tool.
Looking at the output code, it seems like you could have an edit mode that displays the Animation History as numbered "dots" on the background to let someone click and move or remove a dot. Then you start to expose things like time between dots, and soon enough you've taught the basics of tweeting. :-)
That's how I generated the red dots in the demo at the top of the page actually! I rendered one dot for every 10 movements and then ran some JS that would delete any element I clicked on.
I never though of that as a way to edit the underlying animation though... that's smart! The dots would be pretty close together though, so you might need a zoom control too.
Very cool idea, thank you! I'm gonna think more about this.
This is such a cool project. Quick suggestion: would be nice to have some way of "smoothening" the animations; I think a simple interface for that would make it a lot more usable in practice. The human hand is a bit shaky :)
Agreed with the suggestion. OP, one cheap trick you can do without having to get into smoothing algorithms is to just make the mouse position affect the velocity of the object rather than the position. It makes it a little more difficult to control but isn't hard to get used to. This was the mouse control method for your spaceship on an old 2d mac game called Crystal Quest[1] and it gives a slight rubber band feeling to the movement.
Lovely! This reminds me to Cartooners [1], a related but totally different game/toy that I lost many rainy days to as a kid. It was a DOS Application with a library of scenes and actors that you could use to put together short cartoons. When EA was still Electronic Arts...
Wondering if modern day equivalents exist. Has this space been swallowed up wholesale by Roblox or are these kinds of games still being made?
Drawing and recording a line path following the movement of the pointer is an extremely simple interaction exercise, and one of the first you learn when programming games or in the demoscene. The sad thing is that, once the base logic is created, the platforms we use make it quite difficult and a lot of effort to transform it into a finished deliverable product.
This project is an interesting effect, but it would be great if doing such effort were simply the natural way to use the available tools.
I make a lot of animations in python using matplotlib (and moviepy for editing)[1]. It works pretty well for data based stuff but requires a lot of trial and error and tricks to get the feel right.
There's definitely space for a python based simple motion graphics package.
58 comments
[ 2.9 ms ] story [ 134 ms ] threadThis idea has been a dream of mine for years [0]. As a web developer, I never learned After Effects or any other complex animation software.
But I've always dreamed of creating interactive demos and animations just by using my natural mouse movements. It just feels right.
So last week I took a few days off from my main project to create Animatize [1], a proof-of-concept showing off the idea of using natural movement to create an animation.
I'd love to know what you think.
[0] http://motioncomicbuilder.storylog.com/
[1] https://github.com/panphora/animatize
Spent more $ on animation creators with lifetime deals that suck my life out.
Animated gifs as background work perfectly ... this is going to be fun!
Thanks again!
Finding an intuitive interface for adding advanced features should be interesting, for sure.
I guess building an IDE for that wouldn't make sense, but it would be nice to generate an HTML page that has all of the assets defined within it, as a single file.
Just trying to get a proof-of-concept out with this first version.
Btw, if anyone knows of a good way to stitch together two images into a gif by passing in coordinates (even a paid API for this), I'd love to know about it.
https://31launches.com/
It's been one of my better decisions. I have so many projects that are 80% complete that I've just been too embarrassed to post.
31 launches is meant to help me get past that fear/hesitation.
But creating Animatize took 18 hours of my week last week and just completely wore me out. I had to take 5 days off just to recuperate and get back on track.
I have some hope VR will bring us closer.
It may literally create whole new industries.
An easy way to achieve this style in video is to fire up gimp (or some other image editor) and hide cursor in the recording software.
Can you point us to the videos you're talking about?
[1]: https://www.youtube.com/watch?v=J-fXTRHApRc
And the overall zooming/panning is done after the merging. That's how I'd approach it.
So fun to be so creative making plays!
I'll probably work on the GIF export next, but I'm low on time this month since I'm trying to get 31 projects out the door [0].
[0] https://31launches.com
Have securtiy concerns putting this on my website. Can nasties be hidden in the code?
Does anyone know if something like this exists for video? Like "motion tweening" but with my mouse in real time?
Example gif: https://ibb.co/w4h7FVD
Link: https://talevideo.com
Looking at the output code, it seems like you could have an edit mode that displays the Animation History as numbered "dots" on the background to let someone click and move or remove a dot. Then you start to expose things like time between dots, and soon enough you've taught the basics of tweeting. :-)
I never though of that as a way to edit the underlying animation though... that's smart! The dots would be pretty close together though, so you might need a zoom control too.
Very cool idea, thank you! I'm gonna think more about this.
How can I contact you?
Anyway, bookmarked!
[1] https://www.youtube.com/watch?v=xpLQAfxSnIk
¹ https://animatize.com/js/main.js?v=131
Wondering if modern day equivalents exist. Has this space been swallowed up wholesale by Roblox or are these kinds of games still being made?
[1] https://www.youtube.com/watch?v=xmjRKd9E7Cw
This project is an interesting effect, but it would be great if doing such effort were simply the natural way to use the available tools.
There's definitely space for a python based simple motion graphics package.
[1] An example: https://www.youtube.com/watch?v=Abo7NZZ8VHs
Sorry to go on a tangent (I think your project is awesome!), but this is why I love the web. So much.
Keep going, I guarantee its going somewhere. I was thinking of making desktop app like that for myself. This being html5 makes it even better.