Have you ever wondered how animated movies make characters look like they’re moving smoothly? If you slow them down, you’ll see that they’re actually made up of lots of individual pictures. Each picture is a little different from the one before it. When you play them quickly, your eyes are tricked into seeing motion. A simple example of this is a flip book, where you flip through pages quickly to see a drawing come to life.
The secret to animation, whether it’s on paper or on a computer, is that parts of the drawing change over time. One easy way to make these changes is by using a random number command to create new random positions, sizes, or colors for the shapes we’re drawing.
Imagine a simple program that draws a rectangle. It picks a random ‘X’ position and a random ‘Y’ position for the rectangle. If you run and reset this program over and over, you’ll see the rectangle appear in a new spot each time. But that’s like having a flip book with only one page! To make real animations, we need to connect these pages together.
In Game Lab, we use something called the ‘draw function’ to create animations. The ‘draw function’ is special because the commands inside it are run from top to bottom. Once the computer finishes the commands, it jumps back to the start and repeats them over and over as long as the program is running. This repeating action is called the ‘draw loop.’
Let’s put our rectangle inside the ‘draw loop’ and see what happens. Now, instead of drawing the rectangle just once, Game Lab calls the commands inside the draw loop many times each second. This means a new random ‘X’ and ‘Y’ location is picked, and a rectangle is drawn repeatedly.
You can add as many commands as you want inside the draw function. For example, let’s change the fill color of the rectangle before drawing it by adding a fill command inside the ‘draw loop.’ Instead of using the same color every time, we can make it more exciting by randomizing the color. We can do this by replacing the red value with a random number command.
Now, in every frame of our flip book, the computer picks a new shade of red and sets it as the fill color. Then it chooses a new ‘X’ and ‘Y’ value and draws a rectangle with those values. In a typical animated movie or flip book, you don’t see all the drawings that came before. Instead, you see the illusion of a single shape or character moving over time. You’ll soon learn how to create that effect using the ‘draw loop.’
By understanding how the draw loop works, you can create amazing animations in Game Lab. Whether it’s changing positions, colors, or sizes, the draw loop helps bring your drawings to life, just like in the movies!
Grab some sticky notes or small pieces of paper and draw a simple shape, like a circle, on each page. Slightly change the position of the shape on each page. Flip through the pages quickly to see your shape come to life! This will help you understand how individual frames create the illusion of motion.
Using Game Lab, write a program that draws a rectangle at random positions on the screen. Experiment by changing the size and color of the rectangle each time it appears. This will help you see how randomness can make animations more dynamic and interesting.
Modify your rectangle program to include a random color change in each frame. Use the draw loop to continuously update the rectangle’s color. Notice how the animation becomes more engaging with the addition of color changes.
In Game Lab, create a simple animation using the draw loop. Start with a shape that moves across the screen. Try changing its speed or direction by adjusting the values inside the draw loop. This will help you understand how the draw loop controls animation timing.
Plan a short animation by drawing a storyboard. Sketch out each frame on paper, showing how your character or object will move. Then, use Game Lab to bring your storyboard to life by coding the animation. This activity will help you connect planning with coding in animation.
Here’s a sanitized version of the provided YouTube transcript:
—
Animated movies create the impression that characters are moving smoothly, but if you slow them down enough, you’ll realize there are many individual images. Each image is slightly different from the one before. Speed them back up, and your eyes are tricked into thinking you’re watching real-life motion. A simple example of this effect is a flip book.
The key to animation, whether on paper or on a computer, is that part of the drawing changes over time. An easy way to achieve this change is to use a random number command to generate a new random location, size, or color for the shape we’re drawing.
Here is a simple program that draws a single rectangle with a random ‘X’ position and a random ‘Y’ position. If we run and reset this program repeatedly, we can see that it draws the rectangle in a new position each time. But that’s like a flip book with only one page! To create real animations, we need to string these pages of the flip book together.
In Game Lab, we’ll do this using the ‘draw function.’ The ‘draw function’ is special in Game Lab. The commands inside the ‘draw function’ are executed line by line from top to bottom. Once the computer reaches the end of the commands inside the draw function, it jumps back to the beginning and repeats the commands over and over again as long as your program is running. Because the code in the draw function repeats in a loop, we’ll refer to this as the ‘draw loop.’
Let’s move our rectangle inside the ‘draw loop’ and see what happens. Now, we can see that a rectangle isn’t just being drawn once anymore! Game Lab is automatically calling the commands inside the draw loop many times a second. In this program, that means a new random ‘X’ and ‘Y’ location is generated, and then a rectangle is drawn repeatedly.
You can place as many commands as you like inside the draw function. For example, let’s choose a new fill color before drawing each rectangle by placing a fill command inside the ‘draw loop.’ Instead of always choosing the same color, we’ll randomize it by replacing the red value with the random number command.
So, in every frame of the flip book, the computer picks a new shade of red and sets that as the fill color. Then it picks a new ‘X’ and ‘Y’ value and draws a rectangle with those values. In a typical animated movie or flip book, you don’t continue to see all of the drawings that came earlier in the animation. Instead, you have the illusion of a single shape or character moving over time. You’ll discover how to make that happen with the ‘draw loop’ soon.
—
This version maintains the original content while ensuring clarity and readability.
Animation – A way to make pictures or objects move on the computer screen. – The animation in the video game made the characters look like they were running and jumping.
Rectangle – A shape with four sides, where opposite sides are equal and all angles are right angles. – In our coding class, we learned how to draw a rectangle on the screen using a simple code.
Draw – To create a picture or shape on the computer screen using code. – We used a special program to draw a circle and a square on the computer screen.
Loop – A set of instructions that repeats over and over until a certain condition is met. – The loop in the program made the robot move forward until it reached the end of the path.
Random – Something that happens without a specific pattern, often used to make games more interesting. – The game used random numbers to decide where the treasure would appear each time we played.
Color – A property of an object that describes how it looks, such as red, blue, or green. – We changed the color of the background in our game to make it look like a sunny day.
Command – An instruction given to a computer to perform a specific task. – By typing the right command, we were able to make the computer draw a star on the screen.
Position – The location of an object on the computer screen, usually described by coordinates. – We had to change the position of the character in the game to avoid the obstacles.
Game – A program designed for entertainment, often involving challenges or puzzles. – We created a simple game where players have to catch falling apples by moving a basket.
Function – A piece of code that performs a specific task and can be used whenever needed in a program. – We wrote a function to calculate the score in our game every time a player caught an apple.
