Exporting Animations in canvas-sketch

[00:00:00]
>> And this is more of a review for those who've never done it in canvas-sketch, but just a way to export animations. So let's say we had this, we're able to export PNGs. But let's say we wanted a very simple animation of this spinning. And then we wanted to export it as a 5 second GIF, or a 5 second MP4.

[00:00:22]
So what we're gonna do is we're going to set a duration in the settings. And the duration is going to make it so that time goes from 0, all the way to the duration in seconds, and then it resets back at 0. So now I'm gonna scroll down into my render function.

[00:00:43]
I'm gonna say mesh.rotation.y = time. And you'll see what will happen is after 5 seconds, this is gonna snap and start again at 0. So this is what this duration just did, is it makes it so that the loop is gonna restart at 0 every time it hits 5.

[00:01:04]
But instead of using time, which we could use for animations, let's say we wanted this to be a perfectly seamless loop. We're gonna use a value called playhead. Playhead is a value that goes from 0 to 1, depending on how far along we are in the loop. And so I just made an error.

[00:01:25]
But you have to still probably include time if you're using it somewhere else in your function, like for the uniform. So I've just extracted both. So yeah, playhead goes from 0 to 1. And by multiplying this playhead by, let's say math.PI times 2, all of a sudden, what we're gonna do is we're gonna create a perfectly seamless rotation.

[00:01:47]
Because by the time it hits a full circle, the end of the loop is going to have been hit. And the start of the loop will begin again. And so now we have this seamless rotation, and we can slow it down by slowing down the duration, or by increasing the duration of the loop.

[00:02:05]
So a 10 second loop, or a 2 second, or 3 second. So how do I finally export this as an MP4? So let's say we wanna export this as a MP4, that would be maybe a 1080 by 1080 pixel MP4. I'm gonna set the dimensions to 1080. And then what I need to do is first, I need to install a little utility.

[00:02:33]
And it's outlined in the docs in the repo, in the workshop repo. If we scroll down to Intro to canvas-sketch, And we look at the Exporting MP4 and GIF. So the default wave of exporting frames is to export each frame as it renders as a different PNG into a Download folder.

[00:03:02]
Now, you're not gonna wanna copy and paste what I'm doing here. You're not gonna wanna do this, but I'll just show you how it looks. If I hit Cmd+S, that exports a single image. If I hit Cmd+Shift+S, or Ctrl+Shift+S, that begins exporting each frame of this animation into my Downloads folder.

[00:03:23]
And so you don't wanna do that, because it's just gonna populate your Downloads folder. So I'm gonna delete all these for now. But you could use this Cmd when you're creating the server. So you could kill the server and recreate it, specify an output folder. And then that will save all of these frames into the Output folder, and then you can compile that into an MP4 with maybe some software.

[00:03:48]
But we're gonna make it easier. And this is a new feature of canvas-sketch that's been included more recently. So we're just going to copy and paste this line. And this is going to install FFMPEG globally for us, a version that's gonna work nicely with canvas-sketch. So you pretty much just copy this line in.

[00:04:07]
And once it installs, then we're going to go to our server that's running our sketch. So find whichever one is running the same server here, the same thing. We're gonna kill it, and we're gonna start again. But this time, we're gonna pass this argument stream. You're gonna say canvas-sketch shader.js --stream.

[00:04:28]
What this is going to do is it's going to use FFMPEG to stream all these these frames directly into an MP4 file. So now I'm gonna reload the page and hit Cmd+Shift+S. You'll notice it's saying streaming into MP4. And it might take a little while. It's a 10 second loop, so it has to render each of these frames.

[00:04:49]
But eventually, in our Downloads, now we have an MP4 file, which loops perfectly seamlessly. We can specify things like frame rate by going into our settings, and saying maybe the frame rate is gonna be 60. Because before, it was using, let's say the default might be 30. I can't remember if it's 25 or 30.

[00:05:14]
And so now the frame rate's 60, so there's gonna be more frames. That's just something to keep in mind. If you hit Cmd+Shift+S, well, it's running while it's recording. It's just gonna stop recording. So I'll just do a quick 4 second loop. So for MP4, if you wanna create a high resolution MP4, you would do something like this, FPS is 60, maybe 1080 P dimensions.

[00:05:42]
So now I've created this very fluid 60 FPS animation. Compare that to this, which is not as fluid, because this is using probably 25 or 30 frames per second. And then one little thing would be GIFs. So if you're doing a GIF instead of doing 1080, you might wanna use lower numbers.

[00:06:02]
Otherwise, this is gonna be a huge 20 megabyte GIF, so you might wanna use 24, 25, or 30 for FPS. And then dimensions might be 512 by 512, or smaller, bigger, depending on what you wanna do. And if you wanna make GIFs with this stream approach, you'll just kill the server, do the same thing.

[00:06:19]
But pass in stream = GIF, and that's gonna stream it as a GIF file instead of an MP4 file. So now when I hit Cmd+Shift+S, I'll be given a GIF file. And so on Twitter, I often use GIF for exporting and for sharing these kinda things, cuz on Twitter, it loops very nicely.

[00:06:42]
You get true colors, and that kinda thing. But on Instagram, you can't really easily share GIFs. I don't think it's possible to just drag and drop a GIF into Instagram, so you're gonna have to use MP4. And before it has some color loss, because it's not a totally lossless color format, but that's okay, it still looks pretty good.

[00:06:59]
And that's kinda the last little thing, which is, again, just a bit of a review around canvas-sketch, but it's a nice, helpful thing.