Using pseudocode

While each programming language uses its own structure for setting and finding coordinates, a typical pseudocode expression you may write to set the position of an object looks like this:

setx x-coordinate

sety y-coordinate

Or

setposition (x-coordinate, y-coordinate)

To find the current position of an object, you can write pseudocode for each separate coordinate: x-position for the x-coordinate of the object, and y-position for the y-coordinate of the object. You can also write position to describe the object position as a coordinate pair.

Using Scratch to set position

To set the x-coordinate of an object in Scratch, use the set x to number command in the Motion category (see Figure 5-5). The minimum value of the x-coordinate ranges is -240, and the maximum value is 240.

To set the y-coordinate of an object in Scratch, use the set y to number command in the Motion category (see Figure 5-6). The minimum value of the y-coordinate ranges is -180, and the maximum value is 180.

To set both the x-coordinate and y-coordinate of an object in Scratch, use the go to x: number y: number command in the Motion category (see Figure 5-7). The range of the x-coordinate value is -240 to 240, and the range of the y-coordinate value is -180 to 180.

In Scratch, you can set the size of an object using the set size to number % command in the Looks category as shown in Figure 5-8. This sets the size of the object as a percentage of its original size. Percentages smaller than 100 shrink the object. Percentages larger than 100 grow the object.

Using Scratch to find position

To find the x-coordinate of an object in Scratch, use the x position command in the Motion category. To find the y-coordinate of an object in Scratch, use the y position command in the Motion category. You and your coder can use these commands in your programs when you need to write commands that require information about an object's position.

As you code, sometimes you want to position an object (sprite) onscreen and then get its coordinates. You can do this for any sprite using either of these methods (see Figure 5-9):

• Select the checkbox next to the x position command and the y position command in the Motion category to show these values onscreen.
• On the thumbnail of the sprite, click the “i” icon to expand its information center and then view the x: and y: values displayed there.

In both methods, the coordinates of Scratch Cat are (60, -18).

Using JavaScript

To set both the x-coordinate and y-coordinate of an object in JavaScript, identify the object you want to position, and then use the setPosition command.

Here are the steps for how to position an image of a mouse onscreen in the Code.org App Lab, using JavaScript.

1. In App Lab, click the Design button above the emulator of the mobile device.

2. In the Workspace, select Image ⇒   Choose.

   The Choose Assets dialog box opens.

3. Click the Upload button.

4. Select the file you want, and then click the Choose button.

   The uploaded file appears in the dialog box as shown in Figure 5-10. The name of the uploaded image file shown here is mouse.png.

5. In the App Lab program workspace, type these commands:

   image("character", "mouse.png");

   setPosition("character", 160, 225, 100, 100);

Here is what these commands do: The first command creates an image reference identification, character, and links the file, mouse.png, to this identification. The second command displays the image in character according to four quantities: the x-coordinate of the object, the y-coordinate of the object, the width of the object in pixels, and the height of the object in pixels.

In App Lab, the range of the x-coordinate value is 0 to 320, and the range of the y-coordinate value is 0 to 450. When using JavaScript to program images displayed on a webpage, these values have larger maximum values, representing the larger size of a computer screen.

Figure 5-11 shows the mouse positioned at the coordinates (160, 225), which is the exact center of the screen. You can see that the mouse is positioned by its upper-left corner where the tip of its tail is located. The mouse has a width of 100 pixels and a height of 100 pixels.

To find the x-coordinate of an object in JavaScript, use the getXPosition("character"); command where character is the identification reference of the object. To find the y-coordinate of an object in JavaScript, use the getYPosition("character"); command where character is the identification reference of the object.

You and your coder can write the following code to find and display onscreen the coordinates of an object named character. This assumes you have uploaded an image file and assigned it to the reference identification, character. Type this code in the App Lab program workspace.

var x = getXPosition("character");

var y = getYPosition("character");

textLabel("xcor");

textLabel("ycor");

setText("xcor", "x-coordinate is " + x);

setText("ycor", "y-coordinate is " + y);

Here is how this code works:

• The var x variable gets the x position and the var y variable gets the y position of the object.
• The two textLabel commands create locations onscreen, called xcor and ycor, to display information.
• Each setText command displays a value in a text label. The value of x displays in the xcor label and the value of y displays in the ycor label.

Figure 5-12 shows the output of this code.

Using Scratch

To set a random x-coordinate for an object in Scratch, use two commands: the set x to number command in the Motion category and the pick random number to number command in the Operators category. Assemble the commands as shown in Figure 5-13. The minimum value for the random command is -240, and the maximum value is 240.

Set a random x-coordinate and a constant y-coordinate when you want to create a game in which objects fall from changing locations at the top of the screen. For example, your coder can create a game in which “it's raining cats and dogs” such that the cats and dogs appear to fall from all over the sky, dropping down from the top of the screen at random x positions.

To set a random y-coordinate for an object in Scratch, use two commands: the set y to number command in the Motion category and the pick random number to number command in the Operators category. Assemble the commands as shown in Figure 5-14. The minimum value for the random command is -180, and the maximum value is 180.

Set a constant x-coordinate and a random y-coordinate when you want to create a game in which an objects launches from a random position at the side of the screen. For example, your coder can create a Paddle Bounce game in which the ball enters the playfield from the left side, and the paddle moves vertically along the right side. Your coder wants the ball to enter from different positions up and down the screen to create variety for the player during the game.

To set a random position, including both x-coordinate and y-coordinate, for an object in Scratch, use the go to random position command in the Motion category (see Figure 5-15). Note that the go to command tile can toggle between mouse-pointer and random position.

Your coder can position many objects into random positions at one time to create a scattering effect. This is a common technique for creating a game app that scatters things for a player to collect. This technique also works for creating real-world models when you want to scatter people in random positions in a location, such as shoppers in a mall. See the Asteroid Blaster project at the end of this chapter for a simple game that uses this technique.

Using JavaScript

To set a random x-coordinate of an object in JavaScript, identify the object you want to position, and then use the setPosition command along with a randomNumber command to identify the range of x-values that you want. The minimum of the x-coordinate value is 0 and the maximum is 320.

To set a random y-coordinate of an object in JavaScript, identify the object you want to position, and then use the setPosition command along with a randomNumber command to identify the range of y-values that you want. The minimum of the y-coordinate value is 0 and the maximum is 450.

Here are the steps for setting a random position of an image of a mouse onscreen in the Code.org App Lab, using JavaScript. (See the JavaScript example in the previous section, “Setting and Finding Position” for details on adding an image to the screen.) This code sets both a random x-coordinate and a random y-coordinate for the image:

image("character", "mouse.png");

setPosition("character", randomNumber(0, 320),

randomNumber(0, 450), 100, 100);

Figure 5-16 shows the mouse positioned at randomly selected coordinates. The Run button is pressed three times, with the result of each press shown.

Using pseudocode

A typical pseudocode expression you can write to set the direction of an object is:

setHeading angle

Here, angle can be any value from 0 degrees to 360 degrees.

In some programming languages, angle is measured in a unit called radians. Two pi radians equals 360 degrees — an entire circle.

Using Scratch

When your coder is working in Scratch, use the point in direction angle command to set the angular direction of an object. A direction of 0 degrees is North; measurement around the circle is clockwise so that 90 degrees is East, 180 degrees is South, and 270 degrees (also called -90 degrees) is West. Figure 5-17 shows a command that sets the heading to 120 degrees (which is southeast).

You and your coder can find setdirection commands in programming languages that are geared towards video game creation. This includes GameSalad and Swift. LOGO-based languages and Python, through the Tkinter module, also include directional commands. JavaScript and Java are not especially well-suited to exploring setdirection commands at an introductory level as this type of content is the not the main programming focus of these languages.

To find the direction of an object in Scratch, use the direction command in the Motion category (see Figure 5-18). Your coder can use this command in her programs when she needs to write commands that require information about an object's direction.

As you code, sometimes you want to find an object’s current direction. You can do this for any sprite using either of these methods (refer to Figure 5-9):

• Select the checkbox next to the direction command in the Motion category to show this value onscreen.
• On the thumbnail of the sprite, click the “i” icon to expand its information center and then view the direction value displayed there.

Setting values and finding values of variables is a common activity in programming. In languages such as Java, coders often perform “set” and “get” tasks through small subprograms called methods (see Chapter 15). For example, a programmer writing code for a veterinary office may create an object that represents a pet. The program includes a setter method that allows the vet to create a record for a new client by setting the name, breed, and age of the pet. The program also includes code allowing the vet to get the name, breed, and age of the pet (from the saved information) using a getter method.

Using Scratch

When your coder is working in Scratch, use two commands to point an object in a random direction: the point in direction angle command in the Motion category and the pick random number to number command in the Operators category. The random number range is 0 to 360 degrees (see Figure 5-19).

Because 0 degrees and 360 degrees are the same position, angle measure is often set as 0 to 359, or as 1 to 360. The random number picker only produces whole numbers, so limiting the range this way prevents duplication of the 0 angle position.

You and your coder can set object direction randomly for each object when you want to create multiple objects onscreen that can move in different directions.

Using pseudocode

A typical pseudocode expression you can write to turn an object is:

turn angle

Here, a clockwise turn angle can be any value from 0 degrees to 360 degrees. Similarly, a counterclockwise turn can be any value from 0 to –360 degrees.

A typical pseudocode expression you can write to make an object rotate continuously is:

forever [turn angle]

This command causes the object to keep turning forever. Use a small turn angle to make the object rotate slowly. Increase the turn angle to make the object turn faster. For example, turn 10 creates a faster turn rate than turn 5. You can also add a wait, or delay command inside the forever command to give additional control over the turn speed.

Using Scratch

When you and your coder are working in Scratch, use a turn angle degrees command to turn an object. There are two command tiles for the turn: a turn right command (clockwise) and a turn left command (counterclockwise). Use any number of degrees, including decimal values if needed, from 0 to 360 (see Figure 5-20).

When combining the random command with turns, set the range of whole numbers from 0 to 359 to avoid duplication of the 0 angle position.

See Figure 5-21 to see how you can combine the turn command with forever (in the Control category of commands) to make the object spin without stopping.

Using pseudocode

Each programming language uses its own special command to move an object, and you can write different pseudocode expressions to represent the process of moving an object onscreen. The move number (measured in number of pixels) pseudocode command represents moving an object some distance in the direction in which the object is pointing. An example is move 5 or move 15, with the larger number representing a larger distance moved.

Another way to make an object move is to change its x-coordinate or its y-coordinate.

changex number

changey number

Changing the x-coordinate forever creates horizontal motion. Changing the y-coordinate forever creates vertical motion.

To make an object move constantly, place a motion command inside a forever command:

forever [move number]

forever [changex number]

forever [changey number]

Move forever commands are useful for making games and models. For example, coding several cars to move forever in the horizontal direction allows your coder to create traffic for a Crossy Road-style game.

Using Scratch

To make an object move in Scratch, set the direction of the object using two commands: the point in direction angle command in the Motion category, and the move number steps in the Operators category (see Figure 5-23). The range of point in direction is 0 to 360 degrees. For the move command, use any number; negative numbers move the object backwards. The larger the number, the bigger the move. Note that move makes the sprite object move in a straight line, not spin in place.

To create horizontal motion, use change x by number using any number; negative numbers move the object to the left and positive numbers move the object to the right. See Figure 5-24.

To create vertical motion, use change y by number using any number; positive numbers move the object up and negative numbers move the object down. See Figure 5-25.

To make an object move constantly, place any motion command inside a forever command. Figure 5-26 shows the shows the move number steps inside forever.

Scratch doesn't have a wrapping feature on its stage. When a moving object reaches the edge of the screen, it stops. You can counteract this by making an object bounce off the side of the screen. To do so, add an if on edge, bounce command as shown in Figure 5-27.

Another way you can keep an object moving at the edge of the stage in Scratch is to create your own code for wrapping. You can make an object leave one edge of the stage, and then appear at the opposite edge of the stage. Figure 5-28 shows code for an object that moves right and when it reaches the right side of the stage instantly repositions itself on the left side of the stage. You can find the inequality operators in the Operators category. See Chapter 10 for additional information on forever and repeat until loops.

Using JavaScript

To make an object move in JavaScript, you code the starting position of the object and then make the position change a small quantity during a time interval.

The following code moves a mouse object left to right, across the screen in the Code.org App Lab, using JavaScript. (See the JavaScript example in the previous section, “Setting and Finding Position” for details on adding an image to the screen.) The mouse x-coordinate begins at 0. Its y-coordinate stays constant at 150.

image("character", "mouse.png");

var xpos = 0;

timedLoop(250, function () {

xpos = xpos + 1;

setPosition("character", xpos, 150, 100, 100);

});

Here's what each line of code does in this program:

• Line 1 identifies the object you want to move. For example, image("character", "mouse.png");
• Line 2 creates a variable for x-position of the object (xpos) if you want to make the object move horizontally. Alternatively, create a variable for the y-position of the object (ypos) if you want the object to move vertically. (For more information on working with variables, see Chapter 7.) Initialize the variable by setting it equal to the starting value for the object. For example, var xpos = 0;.
• Line 3 creates a timed loop to indicate how often the object will move. In a timed loop, 1000 equals 1 second. A time loop set at 250 executes one time every quarter-second. (See Chapter 10 for more information on loops.)
• Line 4 increments the position variable inside the timed loop. (For more information on working with variables, see Chapter 7). This causes the position of the object to change a little each time the loop executes. For example, xpos = xpos + 1;.
• Line 5 uses a setPosition command inside the timed loop to set the object x-coordinate to xpos.