Exporting GIFs & MP4s

[00:00:00]
>> Mathew DesLauriers: To actually export this as a GIF that we can share, we're gonna have to do a couple things. One thing we're gonna have to do is set a specific size cuz we want our GIF to be a very specific size. So we're just gonna use dimensions again, and we're gonna say 512 by 512.

[00:00:19]
And that should make a square.
>> Mathew DesLauriers: And then we're gonna set a couple of other things. We're gonna set a fps. And this is short for frames per second, and by default it's just using a maximum but we're gonna set a specific frames per second which is gonna be used for our export.

[00:00:41]
So generally speaking, 24 frames per second is pretty good. It's good for GIFs. If you want really high quality animation, you might wanna use 30 frames per second or even higher. If you're just doing a video, you can do 24, 25. I just tend to do 24 a lot.

[00:00:57]
And then lastly we need to specify a duration because right now we're not saying how long our GIF is, and so we can maybe time this, and say okay, it loops in a second or something like that or two seconds. But what we're gonna do is we're gonna specify a duration.

[00:01:10]
I'm gonna do 4 seconds. And now what you might notice is after 4 seconds, it flips. There's a blip where it's rotating nicely, and then all of a sudden it no longer connects and it rotates in this weird way. And it looks like a glitch, and that basically just means that our loop is not actually seamless.

[00:01:35]
Our loop isn't starting and ending in the exact same spot. And so to change that, we're gonna scroll down. And so what's happening is that time is going up, and it's hitting four, and then it's starting again from zero. And what we want it to do is we want it to basically rotate perfectly so that by the time it's finishing its rotation, the loop is starting again, and it becomes a seamless loop.

[00:01:59]
To do that, instead of using time, we can use this different prop called playhead. And playhead is only really useful, it only exists when you have a specified duration on your loop. So if you don't have a duration then there's no sense of playhead. Playhead basically is if you think of watching a movie on QuickTime, it's like that little seek bar is at the very start of the movie, or somewhere in the middle, or maybe at the end.

[00:02:26]
It's just telling you the value between zero, and one for your loop. For however long your loop is, it's gonna be zero when it starts, and when it gets the end, it's gonna be one. So, if I save, it doesn't really look great yet and what we have to do is we have to make it loop in a full circle so we're gonna use playhead times Math.PI times 2.

[00:02:54]
>> Mathew DesLauriers: And so now what we should have is a perfectly seamless GIF where we can export this. And it will actually just loop perfectly. And if you feel like the speed is too fast, you can maybe increase the duration a bit. I would stick, cuz what we're gonna do is export it, I would just stick with duration for now.

[00:03:12]
And I'll show you how to export it. And this is gonna actually end up creating a lot of frames. So just be careful and if you don't wanna create 100 png frames on your computer, maybe don't run the command yet. Maybe just watch me do it. But what I'm gonna do, is I'm gonna open my terminal, and I'm going to cancel this build command.

[00:03:35]
And I'm gonna run canvas sketch again, but with no arguments except for one argument. Which I'm gonna specify as output, and it's gonna look like this output is temp. And what this is gonna do is when we're saving png's, so far they just go into our downloads folder.

[00:03:56]
And what I wanna do is save all these frames as png sequence, and so we're gonna end up with 120 frames or something. And I don't wanna just save it all into my downloads folder cuz it'll get messy. So I'm gonna specify a folder relative to the folder that we're working in right now, canvas sketch, or sorry, genart, wherever you put it on your desktop.

[00:04:16]
And so now it's running and just a test. I'm gonna reload this page. I'm gonna click the canvas to make sure it's focused, and hit command s or Ctrl+s if you're on Windows. And it should say exported temp. You can just test to make sure. Maybe go into your desktop, open up that folder and just double check, and make sure it's exported into that folder.

[00:04:43]
Rather than your downloads folder. And so what I'm gonna do is I'm gonna clear this folder out, just delete it basically, make sure it's empty, the temp folder. And then the command to export an entire sequence with this kind of a sketch tool is Cmd+Shift s. And you just push it once, and it's gonna start exporting.

[00:05:01]
Just be careful if you're not specifying a loop duration. So if you didn't specify this, it's gonna endlessly export hundreds and hundreds of frames. And if it's doing that, you can just close your browser and just be like whoops. Don't do that cuz you'll lose space. But, yeah, this is how you would export all the frames of your artwork.

[00:05:24]
And you'll notice now in our temp folder, we have each individual frame. And the cool thing is that each individual frame is rendered exactly using the time and playhead values. So you can do really specific things, like if you wanted it to be on a specific frame or a specific second, one of these things change colors or something like that, you can do that.

[00:05:47]
And now the next thing we need to do is figure out, okay, how do we take this sequence of images and put it into a GIF or an MP4? So there is a few ways to doing that. If you're using Photoshop, you can use that. If you're using after effects, you can use that.

[00:06:04]
Some people, maybe if you're more like code savvy, you can use this thing called FFmpeg. And this, all right, sometimes used. If you have FFmpeg installed, canvas sketch actually includes a command. But it might not work if you don't have FFmpeg installed, so it's maybe not even. Worth trying, but just so you know what that it's there, you can do canvas-sketch-mp4.

[00:06:31]
But that would probably not work if you don't have FFmpeg, but I'll show you an alternative way. Cuz if you do have an FFmpeg, you immediately have a video like this. But I'll show you sort of the open source, free, like zero setup required version of that. Is to go into the repo, and to scroll down to the bottom.

[00:06:53]
And here we have this list of tools. And the first tool is called giftool, I'll just open it up. And first you set up your size and pixels, so 512 is already good for our scene. You can do 256 or 512 or whatever you want, just the width and height.

[00:07:15]
Then you set a FPS. We're gonna stick to 24. This is just the optimization level. And then when you drag this temp folder, oops, I just lost it. So when you drag this temp folder onto the browser window, it should generate a GIF. And this is a tool that I just created myself and open-sourced it online.

[00:07:42]
It's not perfect, this tool. It probably only works in Chrome, but it's more or less for you guys so that you don't need to install any more complex build tooling or anything like that.
>> Mathew DesLauriers: But yeah, this should generate a GIF. It might not be so perfect, let me just look at why that is.

[00:08:02]
>> Speaker 2: [INAUDIBLE]
>> Mathew DesLauriers: Yeah. Yeah, so one thing I did by accident is I saved a frame. And if you save a frame into the same folder as temp, and then you drag the whole folder into this giftool, it's just gonna include that frame as well. So, just to be safe, you can also just select all of these images and drag them on as well.

[00:08:29]
Let me just try that again. You can see it's pretty like hacky, this tool that I built. The CSS isn't perfect, but I just wanted to have something basic for you guys to work with.
>> Mathew DesLauriers: So this is the new one. Yeah, and it loops perfectly. And you can upload that to GIPHY.

[00:08:51]
You could probably upload it to other places. You can share this on Instagram or on Twitter, and so on and so forth.