Lesson goal: Simple animation with for-loops

Previous: The Lorenz Attractor | Home | Next: Animate a more complex shape

Computer animation is the process of making things move on the computer screen. Anything from video games to movies make use of computer animation. In this lesson, you'll learn how to make a single pixel move across the screen.

Computer animation works by drawing an object, erasing it, then moving it to a new location, all in rapid succession. Computers can do this so quickly that it appears as if the object you are drawing is actually moving. Here, we'll use a for-loop to count over some range of horizontal ($x$-coordinate) locations on the screen.

We'll draw a pixel at the $x$ location given by the for-loop (and $y=0$) using pset, then erase the pixel quickly thereafter using pcls(0). As the for-loop continues to count, this draw-erase-draw cycle will make it appear as if the pixel is moving across the screen.

Now you try. Try fixing the for and color statements to make a pixel move.

Type your code here:

See your results here:

This code will not run. You have to fix the for x= for-loop to count over the screen positions that you want your pixel to move over (try starting at -100 and moving to 100). Your step size for this count will control the speed of the pixel. Next, select a color for which the pixel should be drawn in the color() line. 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.