Fast and Furious Objects

Variables and Movement

Transcript

The random command lets you draw shapes in changing locations. That's interesting but at times it might be a bit chaotic. How do you create continuous movement, like, imagine a ball rolling across the canvas? Remember that the x-coordinate in the left end of the canvas is 0 and when you move to the right the value gets bigger. I want to roll a ball across the screen so I have to draw it here where the x-coordinate is 0 first. Then I have to move it changing the x-coordinate to a bigger number. And then I'll grow it even more. Like that. and so on. It's a bit slow. It would help if the computer remembered the last location of the ball and then increased that number by one always before drawing a new one. I need one new trick to do this. In programming, we can store information to something called a variable. I'll show you how this works. First I have to create a variable. Variables always have a name, a type and a value. ballX is the name of the variable, int is the type and it means: this variable can only have values that are whole numbers also known as integer-values. I have set the starting value of ballX to 0. Now I can use this variable anywhere in my program. Let's replace the x-coordinate of the ellipse with ballX. When I run the program my ball doesn't move. That's because I don't change the value of the ballX anywhere in the program so it's always zero. Let's see what happens when I type ballX equals ballX plus one. Now it moves! The computer adds one to ball X every time before drawing a new ellipse. On the first round the value is zero and before the second round it becomes zero plus one so that makes one. Before the third round I add one to ballX again so the new value is 2, and so on. If I add two to ballX on every round, the ball moves faster. But why did I create the variable up here outside setup and draw methods? This way I can use the variable anywhere in the program, either in setup or in the draw-method. if I create it inside a method it can only be used inside that method. Variables are fundamental to programming. No matter what programming language you use, no matter what you're making you will be using variables in some way. To get started, practice using variables to change locations of shapes. Have fun!

Do this

Write the program in the video (below) and test it.

Change the value that is added to the variable. Test a negative value as well. There are two examples below.

ballX = ballX + 5;
ballX = ballX - 1;

What does "int" mean in the expression int ballX = 0;

int is part of the name of the variable

int is the value of the varible.

int means that it isn't possible to change the value of the variable after the creation.

int means that the variable can only contain whole numbers (e.g. 1, -50 or 345).

The more the variable increases, the...

...slower the ellipse moves across the screen.

...the faster the ellipse moves across the screen.

...the bigger the ellipse will become.

Educator notes

Variables make it possible to store information. In a way, variables are a tool to make the shapes and objects intelligent because they’re now able to “remember” their previous locations and can act based on that information.

Variables may be hard to understand. You can use different metaphors and techniques when you explain them. Variables can be described as boxes that have a name and contain a value inside them. The computer just opens a certain box and uses the value in the program.

Activity: You can also have a playful activity where students are given roles to act as ballX or ballY. You can then perform some calculations while the students keep track of the value of their variables. You can take the role of the main program yourself. When you want to use a variable, you have to call for a student to come by and tell the current value.

A Meteor, Pipe or a Raindrop?

Transcript

Let's move things around in new ways! It's easy to move a shape vertically too, you just need to replace the y-coordinate with a variable. By the way the name of a variable can be anything as long as every variable has a unique name. The name should also describe the meaning of the variable. I have decided that this ellipse describes a meteor so I've named it meteorY. Let's run this program. Alright. But what if you want to move the meteor in the opposite direction, from down up? For that you have to draw the meteor to the bottom first so the value of meteorY must be the height of the canvas, five hundred. Then instead of increasing the value you must decrease the value by one. Alright. There it goes, It's moving upwards to the opposite direction. The biggest possible value of an y-coordinate is always in the bottom of the canvas and the smallest value is always zero at the top of the canvas. Also keep in mind you can use the same variable in as many parts of the program as you like. I'll use the variable meteorY as both the x- and y-coordinates. I rename the variable now because it's not just y that changes anymore. And I have to rename it everywhere where it exists. There. Let's use the earlier program where the meteor moved from top down. That's it. Now the meteor moves from the top-left corner to the bottom right corner because both the coordinates are zero in the beginning and they increase by one all the time. As the last thing I'll also control the width and height of the meteor with the same variable. I don't know what will happen. Let's put meteor there and there as well. Maybe you can guess what happens but let's see. Whoa! Now the ellipse also gets bigger as the program runs. It looks like an approaching giant pipe. You can change the colors of the outlines with a command stroke. There's also a command noStroke which removes the outlines completely. I'll add that inside the setup-method. Now I creation looks more like a giant raindrop. I'll finalize it by changing the fill color to blue. There it is. Lots of new things here but don't worry, you will understand it by practicing and now it's time for that.

Do this

Write the raindrop-program in the video (below) and test it. Choose your own filling color.

Also try putting the variable “meteor” inside the fill command to change the color-values!

What happens when you use the variable "meteor" as a parameter of fill-command?

The color of the ellipse changes randomly all the time.

The color of the ellipse changes little by little.

There is an error because it's not possible to use a variable in the fill-command.

Educator notes

Usually a variable is used to perform only one specific task with a name given accordingly, such as xLocation or speedY (or e.g. scoreCount, if you are programming games.) But if you consider the visual expression, it’s sometimes fun and fruitful to just play with variables and use them creatively without knowing the exact result beforehand. It may lead to surprising results and new ideas!

Nevertheless, it’s good to add comments to the program after experimenting and explain what the different variables and parts are meant for.

Practicing Variables

Do this

Complete the five multiple-choice -questions below and continue forward!

An ellipse moving to the left. The vertical location (y-coordinate) doesn't change.

An ellipse moving to the right. The vertical location (y-coordinate) doesn't change.

An ellipse moving upwards. The horizontal location (x-coordinate) doesn't change.

An ellipse moving downwards. The horizontal location (x-coordinate) doesn't change.

What does the program above draw?

An ellipse moving to the left. The vertical location (y-coordinate) doesn't change.

An ellipse moving to the right. The vertical location (y-coordinate) doesn't change.

An ellipse moving upwards. The horizontal location (x-coordinate) doesn't change.

An ellipse moving downwards. The horizontal location (x-coordinate) doesn't change.

What does the program above draw?

An ellipse moving from upper-left corner to the lower-right corner.

An ellipse moving from upper-right corner to the lower-left corner.

An ellipse moving from lower-left corner to the upper-right corner.

An ellipse moving from lower-right corner to the upper-left corner.

What happens in the program animated above?

The x-coordinate of the ellipse increases all the time while the y-coordinate doesn't change.

The y-coordinate of the ellipse increases all the time while the x-coordinate doesn't change.

The x-coordinate of the ellipse decreases all the time while the y-coordinate doesn't change.

The y-coordinate of the ellipse decreases all the time while the x-coordinate doesn't change.

What happens in the program animated above?

The x-coordinate of the ellipse increases all the time while the y-coordinate doesn't change.

The y-coordinate of the ellipse increases all the time while the x-coordinate doesn't change.

The x-coordinate of the ellipse decreases all the time while the y-coordinate doesn't change.

The y-coordinate of the ellipse decreases all the time while the x-coordinate doesn't change.

Educator notes

This part contains several multiple choice questions. First, students are asked to think of what kind of a visual result would a certain program produce. Then they are asked the opposite - what is a possible program behind a given visual result. It’s a handy tool to see the logical patterns behind visual phenomena while on the other hand, learning to see code in a visual form. These kind of thinking processes are important for an visual art programmer!