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.