CODE TO ANIMATE

In our lives, animated movies and video games have been a source of joy. How can we create a captivating visual content that is equally enjoyable using variables and conditions?

This project aims to explore different concepts of variables and conditions to create a code for movement and learn about flowcharts, that is used to create a logical sequence for a program.

• To understand different concepts of variables and conditions to create a code for movement.

​

• To learn about flowcharts: a method used to create a logical sequence for a program.

When was the last time you travelled on a bus or a train? Do you remember looking out of the window and watching trees move backwards?

When we’re on a train or a bus, everything outside appears to be moving backwards. But in reality, the train or bus is moving and not the objects outside. This phenomenon is called relative motion and it is the principle, computer-generated graphics work on.

In this session, we will use the concepts of variables and conditions to create a code for moving airplane animation based on the concept of relative motion. We will also learn about flowcharts: a method used to create a logical sequence for a program.

Part 1 - Create an airplane using various shapes and variables

Let us create an airplane using various shapes and variables to position objects to make them move.

Step 1: First, open p5js editor

• Change the background colour to light blue with r=100, g=200, b=250.

Part 1 - Create an airplane using various shapes and variables

We will create an airplane using shapes ellipses, triangles, and rectangles at the centre of the canvas at width/2 and height/2.

Step 2: Add two ellipses for the body and cockpit of the plane at the centre of the canvas. Use appropriate colours without a border.

Use default variables width, height, and division (/) operators to place the ellipse at the centre of the canvas.

Part 1 - Create an airplane using various shapes and variables

Step 3: To move the cockpit of the plane at an appropriate position, reduce the y position by 20 pixels to move it upwards. Use a subtraction operator.

Part 1 - Create an airplane using various shapes and variables

If we want to change an object’s position, we need to change the x and y positions of all shapes in it. Currently, it is width/2 and height/2. To avoid this tedious work, we use variables.

Step 4: Create two variables x_plane and y_plane at the start of the code for x and y locations of the airplane respectively. Set their initial values as x_plane = width/2 and y_plane = height/2 in setup() function.

Part 1 - Create an airplane using various shapes and variables

Now we can replace x and y position values in all shapes by variables x_plane and y_plane. If we want to change the position, we only change the values in these variables.

Step 5: Update x, y positions (width/2 and height/2) in the shapes drawn. Replace them with variables x_plane and y_plane.

Part 1 - Create an airplane using various shapes and variables

Even after this, the shapes are still in the same position. We will now create the front and back wings of the airplane using the newly created variables to add x and y positions.

Step 6: Add the front wing by drawing a coloured triangle and rectangle.

Part 1 - Create an airplane using various shapes and variables

• Use rectMode(CENTER) to correctly place the rectangle.

Part 1 - Create an airplane using various shapes and variables

Step 7: Use the same process to add the back wing.

Part 1 - Create an airplane using various shapes and variables

• As the airplane body should be over the plane wing, move the code for both wings before the code for the plane’s body.

Part 1 - Create an airplane using various shapes and variables

Side Quest:

Create a throttle effect using the ‘random’ command:

• random() - This command provides a random number between the input range to the command. For example,
• random(60) command gives a random number between 0 and 60.
• random(30,60) command will give a random number between 30 and 60.

We can add an ellipse at the end of the plane and set its length as a random value. It will vary randomly to create an effect resembling a flame-like throttle.

Part 1 - Create an airplane using various shapes and variables

• Add a white coloured semi-transparent ellipse(x_plane, y_plane, 10, 40); before the code for the plane body.

Part 1 - Create an airplane using various shapes and variables

• Instead of height = 40, add random(40,80). This will give it a random height between 40 to 80.

It will appear as a throttle, spitting fire out just like in a flying airplane!

Part 1 - Create an airplane using various shapes and variables

Let us create clouds using variables.

Step 8: Create variables cloud1_x and cloud1_y for positioning and initialize their initial values in setup().

Part 1 - Create an airplane using various shapes and variables

Step 9: Create a cloud using multiple white coloured ellipses overlapping each other.

If a plane is flying forward, clouds will appear to move backwards, in the opposite direction. If we move the airplane, it will move out of the screen. Instead, if we move clouds in the opposite direction and the plane will appear to move forward. This is also called as Moving Background Effect.

To update the position of the clouds, we will use the increment/decrement operator.

Increment/decrement operators: Repeatedly incrementing or decrementing (increasing or decreasing) the value inside a variable by a certain number is an important operation in programming.

For example: A variable y_cloud1 is used for the y location of the plane with its initial value as 0. We want to continuously increase its value by 1. It can be done as follows:

y_cloud1 = y_cloud1 + 1;

The process of incrementing and decrementing works like this:

Part 1 - Create an airplane using various shapes and variables

Step 10: To move the cloud downwards, its y position needs to be increased. As the draw() function runs repeatedly, we can increment the value in the y_cloud1 variable inside the draw() function.

Our cloud is moving downwards now! But it disappears after it reaches the bottom edge. So, we will have to create new clouds each time to show a continuous streak of clouds.

There is a simpler method to do this than creating new clouds every time. We will learn about conditions and how to use them to always keep the cloud on the canvas. This way it will appear as though new clouds are continuously passing by.

Before we start coding further, can you solve a problem first? Observe the following image and write the steps of all the actions in a sequence, such that the turtle will reach the pond. We will verify the answer soon.

So far, we have written smaller codes. As we learn more, codes become larger and more complex. Planning the logic and flow of the code before writing it helps to improve accuracy and reduces errors. This planning is done using diagrams called flowcharts. Before we start coding, let’s learn about flowcharts.

Flowchart: A flowchart is a special type of diagram that shows the logical steps for the instructions in a process, or for a code to achieve its desired output.

For example: For the turtle to reach the pond, the sequence of actions can be shown through the following flowchart:

Different shapes are used to show various actions while drawing a flowchart.

Let’s make a flowchart to record the code we have created so far, to make the airplane look like it is flying.

Next, we need to keep the cloud continuously moving on the canvas. This can be done with if condition.

In the If condition, the 'if' statement executes a snippet of code only if a specified condition is true. The condition is added inside round brackets after the word ‘if’. The code to be executed is added in curly brackets.

If (condition) {

…

}

In the airplane example, we can use if the condition so that the cloud doesn’t exit the screen. There two parts to an if conditions.

1) Condition: The condition states that the cloud will move out of the bottom edge if its y location is greater than the height of the canvas.

2) Statements to be executed if the condition is true - As a result, we want to move the cloud to the upper edge, so that it can move downwards again. i.e. change ‘y’ position to 0.

If (y_cloud1 > height) {

Y_cloud1 = 0 ;

}

We will update the flowchart to change the initial position of the cloud and use if condition to reposition the cloud if it moves out of the canvas.

Part 1 - Create an airplane using various shapes and variables

Step 11: To show the cloud coming in from the upper edge, change the initial value of y_cloud1 = 0 in setup().

Part 1 - Create an airplane using various shapes and variables

• Add if condition in draw() command with condition y_cloud1 > height.

Part 1 - Create an airplane using various shapes and variables

• If the condition is met, set variable y_cloud1 = 0.

Part 1 - Create an airplane using various shapes and variables

Now, the cloud goes out of the screen from the bottom edge and comes in from the top edge.

This feels unnatural and boring since the cloud keeps moving on the same path. To change this, we can change the cloud’s x position to a random value, such that the cloud comes out from the top edge from a random spot.

• Add x_cloud1 = random(width); inside the if condition statement.

Part 1 - Create an airplane using various shapes and variables

Use the similar code to add some more clouds that will move simultaneously.

• Add a smaller cloud and place its commands before the code for the airplane. This way, the plane will appear to move above the cloud.

Part 1 - Create an airplane using various shapes and variables

• Since cloud2 is farther than cloud1, it will appear to move slower than cloud1. To move it at a slower speed, we will add a lower value to the y position.

Part 1 - Create an airplane using various shapes and variables

The plane seems to be moving above the second cloud that is moving slower than the first cloud.

• Add a similar if condition for cloud 2 to make it come back on the screen at a random x position from the upper edge.

When the code runs, we can watch the airplane flying through the sky!

The airplane flying through the sky!

• Explain random() command.

​

• State the steps to create the airplane.

.

In this lesson, we learnt about flowcharts that are pictorial representations of a step-by-step approach to solving a task. Following the steps from our flowchart, we created an animation of a plane flying through the sky.