My brother had some art pieces that he had created that he wanted to talk about on his Instagram. This involved moving a camera over the image. Unfortunately there was no good way to get this to be smooth manually.
I created Image Motion as a tool to turn static images into videos. With a normal Ken Burns effect you can define two frames and it will tween between them. This is a superpowered version of that, allowing you to define multiple frames (at differing zooms and locations) and seamlessly pan over them, for however long a video you want to make.
My first use of Web Workers and WebASM through the fmpeg port. If you want to check it out, it's live at https://alexbeals.com/projects/image-motion. Read more about the project on my blog.
Thanks to a variety of resources.
- Repository: ffmpeg.js
- License: LPGL 2.1 License
- Author: Kagami
- Repository: feather
- License: MIT License
- Author: feather
- This blog post around reparameterized bezier curves by arc length (and how there's not a closed form solution).
- This Gist with some practical examples of ffmpeg web workers
You can locally create an instance by running python3 -m http.server 8000 in the repo checked out. This is necessary because Chrome by default doesn't allow web workers with file://.
No project is ever truly done. These are the things that I could work on, were I to spend more time on it. Until someone asks though, these will remain here.
- Show errors properly in modal
- Make it so that you can't select out of bounds.
- Make it so that you can see the full path that it will follow?
- Fix the overlapped frames
- Should mostly linear frames use a different tension?
- Customize aspect ratio
- Preview?
If you're interested in programatically following bezier curves with ffmpeg's zoompan, I used to have this functionality until I ran into an inability to reparametize the curves by arc-length for smooth camera moves, and swapped to a fully in-browser solution. The relevant code is working around 62379f45044fd8b7254680064ad89b1367d3c420 or 9cdc77ba912cbb9914bdb120afd2f9cbf168a77e.
Created by Alex Beals © 2023