Check out a free preview of the full Creative Coding with Canvas & WebGL course

The "Making a GIF" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

Matt explains why a GIF may be a solution for showing solutions to clients, and transforms the example from the last section.


Transcript from the "Making a GIF" Lesson

>> Speaker 1: Let's just try and add a bit of animation,
>> Speaker 1: And then once we do some animation we'll just export it as a GIF. And then we can move a little bit into shaders and we'll try and sort of take a bit more chill in the rest of the afternoon.

Just cuz I'm sure it's like a lot of knowledge to absorb all in one go. So what I'm gonna do is just remember this settings here. We have it set to true, which means starts it up with a random loop. So actually right now even if though looks the same, it's rendering 60 time a second and it's rendering the scene many, many times.

And what we can do is just rotate our entire scene just to produce some animation. So we can do scene, which is, remember it's something we defined up there. We can do scene.rotation.y = time. And this is where our thumb trick gets really, really useful. So I'm saying rotation.y = time.

You can change this to be a different coordinate, like x or z. And you'll start to see it looks a bit different. And so going back to our thumb trick. If you go back to doing this finger pointing and you remember that the thumb is the y-axis, that means we're actually rotating our entire scene around that axis.

And it's the same if we were to set this to be x. Imagine you take your middle finger and you're just cranking it like you would a motorcycle handle or something like that. And it's rotating the entire object like that, it's the same with zed. So I am totally guilty of constantly when I'm doing creative coding, you'll see me sometimes just with my hand there like this.

And I'll be trying to visualize what I'm trying to do based on my thumbs and fingers. So now we have a loop, basically, and we can make this a bit more complicated. But before we do that, I just wanna talk about how do we export loops and how do we create a GIF?

Because quite often, when you're showing a client something, you can show them the website. Or if you're sharing something over Twitter, or if you're showing something over email, maybe you wanna show them a GIF, or maybe you wanna show them an MP4. And generally speaking, I've been doing a lot more GIFs and a lot more animation lately.

And it's kind of opened me up into this new world of motion graphics, where a lot of clients, they might see a web page even though the web page is real time. They might not really think of it as real-time motion graphics. And for some reason, when you show them a GIF, or when you show them an MP4, they start to realize that they can use that in their own branding.

Whether it's for a commercial, or whether it's for something that they're projecting on a wall, or showing at a screen at a client event or something like that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now