CS320n Elements of Visual Programming

1
CS320n Elements of Visual Programming

• Sending Parameters to Event Handler Methods
• (Slides 5-2)

Thanks to Wanda Dann, Steve Cooper, and Susan
Rodger for slide ideas.
2
What We Will Do Today

• Learn how to use parameters in methods that
  respond to events. (Event handler methods)
• Do a programming example in the lab

3
Mouse clicks

• Interactive programs often allow the user to
  mouse click an object in the display.
• buttons in a windows-based interface
• targets in a game
• checklist of items on a form
• In this session, we look at how to pass
  information about a mouse clicked object to
  an event handler method.

4
Example

• People are trapped in a burning building
• The user selects which person will be rescued
  next.

5
Storyboard

• Three people are to be rescued. So, we could
  write three different methods.

Event 1 click on girl2 Responding Method
Save guy on second floor
Event 1 click on guy1 Responding Method
Save guy on first floor
Event 1 click on girl3 Responding Method
Save guy on third floor
6
A Better Solution

• Write one event handler method
• send in the information needed to perform the
  action.

firetruck.savePerson parameters whichFloor,
whichPerson, howFar Do in order point ladder
at whichFloor extend the ladder howFar
meters whichPerson slide down the ladder to
the fire truck pull the ladder back howFar
meters
whichFloor, whichPerson and howFar
parameters What should their types be?
7
Demo

• Demonstration of the code for
  firetruck.savePerson

8
Three events

• The argument sent to the parameters depends on
  which person is mouse clicked.
• Note the fire truck is positioned so distance
  between floor X is X meters (distance to floor 3
  is 3 meters)

9
Example 2

• Zeus is a powerful god in Greek mythology.
• When Zeus is angry, he shoots a thunderbolt out
  of the heavens to strike anyone is bothering him
• The user chooses the philosopher who will be the
  next target of Zeuss anger.

10
Storyboard

• A possible design is a method with an Object
  parameter, named who, for the object that was
  clicked.
• The actions in this storyboard are complex.
  
• We can break the actions down into simpler steps
  using stepwise refinement.

Event an object is mouse-clicked Event handler
shootBolt Parameter who object clicked Do in
order prepare to strike object that was
clicked thunder plays and lightning strikes
object clicked lighting is repositioned for next
strike
11

Event An object is mouse-clicked Event
handler shootBolt Parameter who the object
that was clicked Do in order call
prepareToShoot method send who as the
target call lightningAndThunder method send who
as the target lightning move to clouds position

prepareToShoot Parameter target Do together
turn Zeus to face the target make the
lightning bolt visible
lightningAndThunder Parameter target Do
together play sound call
specialEffects method send target
12
specialEffects Parameter target Do in order
Do together lightning bolt move
to target smoke move to target Do
together set smoke to visible
set lightning to invisible call
smoke cycle built-in method set
target color to black move target up
and down
13
A driver

• The shootBolt method is at the top level of our
  design.
• It calls other methods (prepareToShoot and
  lightningAndThunder) and controls the overall
  action of the program we call this a driver.

14
One link

• In the fire rescue example, we used three links
  one for each person in the burning building.
• In this example, we use only one link by
  selecting object under mouse cursor as the
  argument.

15
prepareToShoot

• In setting up the initial scene, we made the
  lightning bolt invisible by setting its opacity
  to 0 (0).
• (Review Tips Techniques 4 for more details
  about opacity.)
• To prepare to shoot the lightning bolt, it must
  be made visible set the opacity back to 1
  (100).

16
lightningAndThunder

• Coordinate the sound of thunder with lightning
  and other special effects.

17
specialEffects

• The smoke.cycleSmoke is a built-in instruction
  with a duration of about 2 1/2 seconds.

18
move to

• Several statements in the shootBolt and
  specialEffects methods use a move to instruction
• The move to instruction moves an object to a
  particular position in the world.
• In the example above, where is the lighting bolt
  moved to?
• (The move to instruction is described in
  detail in Tips Techniques 2.)

19
move to with an object parameter

• If an object parameter is used to specify a
  target position, the process of creating a move
  to statement involves two steps
• Drag in an arbitrary object as the parameter
• Substitute the object parameter name
• This is necessary because an Object parameter is
  only a placeholder for an object not an actual
  object.

20
Demo

• Test run of Zeus world.
• When parameters are used in interactive
  programming, it is especially important to test
  that all possible parameter values work as
  expected.
• What happens if you click on each philosopher,
  one at a time?
• Also try things that shouldnt work.
• What happens if you click on a column?
• What happens if you click on a philosopher twice?
• What happens if you click on Zeus?

21
Classwork Monday in Lab

• Create 2 worlds (or combine into 1 world)
• Problem 14, page 140. Penguin slide Create a
  world with a lake (environments) and at least 3
  penguins on the slope. Make the program event
  driven. When a penguin is clicked it slides on
  its belly and spins as it slides. Each penguin
  should spin some number of times. When the
  penguin reaches the pond make it disappear into
  the pool. Write only one event handler method.

22
Penguin Slide
23
Exercise 2

• Problem 15, Page 141.
• Create an interactive hockey game. Create a scene
  with a person on a lake. Set up a hockey net and
  give the person a hockey stick (both in the
  sports folder). Create 3 buttons (bumps from the
  shape folder) that determine how hard the player
  swings the stick and how fast the puck (another
  bump)travels towards the net

24
Hockey Game