Lesson goal: Create an animated-GIF with programming

Previous: Work with student grades | Home | Next: Make a point move

You've seen those animated GIFs (small, fast-loading videos) around the Internet, right? This lesson will allow you to make them using programming. Here's how.

If you made it through this lesson, you know how to plot things like points, lines and circles on the screen. An animation is just such drawing, but with the pixel drawn in different positions, across multiple frames, all played back in rapid succession. Got it?

Let's start by making a GIF animation that flashes the screen. We'll use some new functions to handle the animation, called gif_start(), gif_add_frame(), and gif_end(). gif_start() starts a new animated-GIF. gif_add_frame() takes what you've drawn and pushes it all out to a single frame in the GIF. gif_end() tells the code to end your GIF animation.

So, to make a GIF-animation, all you have to do is use gif_start() to start a new animation, draw a bunch of stuff to make your scene, add it to the movie with gif_add_frame(), then draw everything again, but in a slightly different position, then add it all as the next frame, again, using gif_add_frame(). When done, wrap it all up using gif_end().

In this first lesson, we'll learn how to clear a whole frame in your animation, using gif_cls().

Your GIF will play below. You may have to scroll down to see it.

gif_cls(color)
Move the mouse over a dotted box for more information.

Now you try. Make a flashing screen GIF!

Type your code here:


See your results here:

Notes:
  • The 5 in gif_add_frame(5) is the speed your movie will have. 5 is about the fastest. Larger numbers will slow down your animation.

  • gif_start() returns an identifier (id) you'll need to play your GIF animation. It should be used like this id=gif_start(). To play your GIF-animation, use the function gif_play(id).

Dismiss.

Show a friend, family member, or teacher what you've done!

Here is a share link to your code:

Does your code work? Want to run it on your iPhone?

Here's your code:

  1. Use [Control]-[C] (Windows) or [⌘]-[C] (MacOS) to copy your code.

  2. Paste it using [Control]-[V] (Windows) or [⌘]-[V] (MacOS) into this page

  3. Then click the "Use on iPhone" button that you'll see.