Setup

Intro to Swimming Orca

Overview

  • Program the Orca to swim in a circle once, then have it follow where your fingers touch the screen. Complete two additional challenges to make the Orca swim in a circle forever, and see if you can program it to swim in a Figure 8.

Objectives

  • Become familiar with visual programming.

  • Program the Orca to swim using basic motion commands.

  • Understand sequential execution of commands and repetition (forever and repeat loops).

  • Understand the concepts of Cartesian coordinate system.

Steps

Create an Orca Project

  • Open Tickle app and go over the welcome tutorial that shows you how to drag and drop coding blocks. You can replay the tutorial in Settings -> Show Introduction as needed.

  • If you don't already have a Orca project open, create a new one by tapping + New Project in "MY PROJECTS". Choose the template with the name "Orca".

Let's Swim!

  • Tap the green Play button and see how the Orca swims in a circle.

  • Move your fingers to different parts of the ocean, and see how the Orca follows your fingers.

Swim and Follow Finger Touches

  • To make Orca swim in a circle, we program the Orca to move forward 10 steps, and then turn by 10 degrees. Because turning a full circle is 360 degrees, we need to repeat the move and the turn blocks 36 times each.

  • Here we use the repeat 36 times block, and add the move and turn blocks inside this yellow block so that each will executed 36 times.

  • To make the Orca forever follow your finger touches on the ocean stage, add a forever block and add the go to ... block inside it. Set the go to ... block to go to last touch point.

  • Tip: try changing the number of steps to 20 and see what happens. Change the number of degrees to 20 and see what happens.

Challenge 1: Make the Orca Swim in a Circle Forever

  • Tip: By adding a forever block around the repeat 36 times block, the Orca will continue to swim in circles forever (until you hit the Stop button).

Challenge 2 (Advanced) : Make the Orca Swim in Figure 8.

  • A figure 8 is composed of moving in two circles, with the second circle in the opposite direction. In the following sample code, the Orca turns right by 10 degrees each time for the first circle (clockwise for 360 degrees). It then changes direction, and turns left (counter-clockwise) for 360 degrees.

Tickle’s Coordinate System

  • The coordinate system of Tickle is a 2-dimensional Cartesian coordinate system. The origin (0, 0) is at the center of the stage.

  • The X axis ranges from -240 to +240, and the Y axis ranges from -180 to +180.

  • All characters starts with a direction of 0 degrees. The degrees increases counterclockwise from 0° which points to the right.

Swim along the Edges of the Ocean

Overview

  • Program the Orca to swim along the four sides of the ocean.

Objectives

  • Become familiar with visual programming.

  • Program the Orca to swim using basic motion commands.

  • Learn coordinate system with direction (0-360 degrees) and distance.

  • Understand sequential execution of commands and conditional (if-else) statement.

Steps

Let's review the following coding blocks before we start to swim.

  • : The blocks attached to this block start to execute after tapping the Play button.

  • : The block will play the sound of the selected audio file.

  • : The blocks inside this block will be executed n number of times.

  • : The blocks inside this block will execute forever until the stop button is tapped.

  • : The block will check its boolean condition, if the condition is true then the code inside this block will run.

Coordinate system

  • Before digging into the steps, you may need to discuss the coordinate system for Orca. The figure shows the relationship between the direction and the Orca's moving angle.

Create an Orca Project

  • Open Tickle app and go over the welcome tutorial that shows you how to drag and drop coding blocks. You can replay the tutorial in Settings -> Show Introduction as needed.

  • If you don't already have a Orca project open, create a new one by tapping "+ New Project" in "MY PROJECTS". Choose the template with the name "Orca".

Let's Swim!

  • In order to make Orca move across the screen forever, we first drag out the block forever and put it under the block When starting to play, then put the block move 10 steps inside the mouth of the block forever.

  • To make the Orca turn left by 90 degrees, there are several ways to complete this goal. We can use the block repeat 10 times and put the block turn left by 9 degrees inside it, or we can simply use the block turn left by 90 degrees.

  • Here we make use of the conditional block called if ... then. When the condition in the if ... then block occurs (ie. is TRUE), then the code inside that block runs; otherwise, none of the code inside runs.

  • Then we make use of one of the sensing blocks called touching edge?. When the Orca touches the edge of the stage screen, the condition in block if ... then returns TRUE and the code inside the block runs.

  • Combine the blocks from above steps and add a sound block play sound (or you can choose whatever you want in the soundtrack list) inside the conditional block if ... then. The Orca will repeatedly move 10 steps and check to see if it's touching an edge. If the Orca is touching an edge, then it turns left by 9 degrees for 10 times (for a total of 90 degrees).

Swim across the Ocean

Overview

  • Program the Orca to swim left and right across the ocean.

Objectives

  • Become familiar with visual programming.

  • Program the Orca to swim using basic motion commands.

  • Learn coordinate system with direction (0-360 degrees) and distance.

  • Understand sequential execution of commands, conditionals (if-then), and variables.

Steps

Create a Orca Project

  • Open Tickle app and go over the welcome tutorial that shows you how to drag and drop coding blocks. You can replay the tutorial in Settings -> Show Introduction as needed.

  • If you don't already have a Orca project open, create a new one by tapping "+ New Project" in "MY PROJECTS". Choose the template with the name "Orca".

Let's Swim to the Right!

  • In order to make Orca move across the screen, add the block forever to When starting to play. Then add the block move 10 steps inside the forever block.

Swim Left and Right

  • We use a variable to remember the direction the Orca should swim in. In computer science, a variable is a symbolic name associated with a value and whose associated value may be changed.

  • To add a new variable named "Direction" in this project, tap the + Add Variable button and type in the variable name "Direction".

  • To set the variable "Direction", you have to use the block set ... to ... in the newly added Data category. Here we initialize the variable to 1, to represent the direction right, and put it right below the block When starting to play.

  • Here we make use of the conditional block called if ... then, and put it into the forever loop. When the condition in the if ... then block occurs (ie. evaluates to TRUE), then the code inside that block runs; otherwise, none of the code inside runs.

  • Then we make use of one of the Sensing blocks called touching edge?, and put it inside the if ... then block. When the Orca touches an edge of the stage screen, the condition in block if ... then returns true and the code inside it runs.

  • To make Orca move in the opposite direction, change the variable "Direction" into its opposite value using the multiplication block in Operators, and typing in value "-1" (ie. Direction * -1):

  • Back inside the conditional block if ... then, now you can set the variable "Direction" with block set Direction to (Direction * -1). Remember to add the block flip horizontal to flip your Orca, otherwise it will swim backwards.

  • Change the block move 10 steps into move (Direction * 10) steps to make Orca move toward the right direction.

Steer the Orca using Motion Sensors

Overview

  • Sense shaking and tilting of your phones and tablets to make Orca swim and spin. For example, tilt your iPad to the right to make the Orca swim to the right, and make the Orca spin by shaking the iPad.

Objectives

  • Become familiar with visual programming.

  • Program the Orca to swim using basic motion commands.

  • Learn event-driven programming concepts.

  • Use motion sensors in smartphones and tablets to sense motion events (tilt and shake) to steer the Orca.

Steps

Create an Orca Project

  • Open Tickle app and go over the welcome tutorial that shows you how to drag and drop coding blocks. You can replay the tutorial in Settings -> Show Introduction as needed.

  • If you don't already have a Orca project open, create a new one by tapping "+ New Project" in "MY PROJECTS". Choose the template with the name "Orca".

Say Something

  • In order to make Orca say something, we first drag out the block say Hi! from the Looks category and put it under the block When starting to play

Swim Upward using Motion Sensors

  • Under the Events category, add the motion sensing event block When iPad is tilted forward like the following, and move 10 steps at 90 degrees block.

  • Let's start by tapping the Play button. You will discover that if you tilt the iPad forward, the Orca will move upward for 10 steps.

Tickle’s Coordinate System

  • The coordinate system of Tickle is a 2-dimensional Cartesian coordinate system. The origin (0, 0) is at the center of the stage.

  • All characters starts with a direction of 0 degrees. The degrees increases counterclockwise from 0° which points to the right.

Swim in all Four Directions using Motion Sensors

  • Let’s add all the when iPad is tilted … blocks for forward, backward, right, left, with the corresponding direction of 90, -90, 0, and 180 degrees respectively.

Say "Ouch!" when Touching an Edge of the Ocean

  • Add one of the Control blocks called if … then, and put it into the forever loop. This is a conditional block that runs the code inside it when the condition in the if … then block occurs (ie. evaluates to True). Otherwise, none of the code inside runs.

  • Add one of the Sensing blocks called touching edge? from category Sensing, and put it into the if ... then block. When Orca touches any edge of the stage screen, the condition in block if ... then evaluates to TRUE and the code inside runs.

  • Add these blocks under the block say Hi! and play the project. You will discover that as the Orca swims around and touches an edge, it will say "Ouch!".

  • The complete program should look like the following:

Challenge #1: Spin when Shaken

  • Make the Orca spin around when you shake the iPad.

Challenge #2: Change Orca Size by Tapping and Shaking

  • Make the Orca bigger when Orca is tapped on, and smaller when you shake the iPad.

  • Tip: The size of Orca can be changed using the block change scale by … %. To sense when the Orca is tapped on, use the When this character clicked

Event-driven Programming and Event Blocks

  • Event-driven programming is a computer science concept in which the flow of a program is determined by events such as sensor input, user actions (like touching the screen or tilting the device), and messages from other programs.

  • It is the dominant paradigm generally used in modern application like graphical user interfaces (GUI) and web-pages that performing certain actions in response to user input.

  • A simple way to think of it is "When something happens, do something". For example, "When it rains, open your umbrella."

Let's review the coding blocks used in this lesson:

  • : the blocks attached to this block start to execute after tapping the Play button.

  • :the blocks inside this block will execute forever until the stop button is tapped.

  • :The block will check its boolean condition, if the condition is true then the code inside this block will run.

  • :The block is in the Looks category. The block shows a speech bubble with text until an another say ... block runs.

  • : The block is in the Looks category. This block changes the character size by the specified percentage. The default character scale is 100%.

  • :These blocks are in the Events category. When the corresponding events occur, the scripts attached to these blocks will be executed.

Troubleshooting (FAQ)

  • If you have encountered any other problems when following these lessons or using Tickle, we are glad to hear your voice. You can leave a message or feedback on our board and we'll get back to you soon.

  • What should we do if we want to add other characters?

  • You can add other characters by tapping the top right Add button.)