1. The Smooth Motion: Case Study in Algorithmic Solving
Chapter 22
The Smooth Motion:
Case Study in Algorithmic Solving

2. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

3. Planning Smooth Motion
Apply the Decomposition Principle
Divide a large task into smaller subtasks that can be solved separately and then combine their solutions to produce the overall solution
Principle can be applied again to each subtask, if necessary
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

4. Planning Smooth Motion (cont'd)
Carol Schwartz:
Can we insert the table that appears as part of the text on page 637?
Planning Smooth Motion (cont'd)
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

5. Planning Smooth Motion (cont'd)
Decide on a Problem-Solving Strategy
Strategy on how to solve each part
Order in which we'll solve parts
Build a basic web page first
Don't spend time embellishing page until other tasks are done
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

6. Planning Smooth Motion (cont'd)
Solve Independent Tasks before Dependent Tasks
Some tasks rely on other tasks
Independent tasks should be done first
Tasks that depend on the independent tasks are done next, and so on
PERT Chart
Task dependency graph
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

7. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

8. Build the Basic Web Page GUI
Full GUI has table with heading, grid, keys, controls, instructions
Basic structural page:
Table
Heading
Instructions
Background color, font style and color
Centering of application on page
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

9. Build the Basic Web Page GUI (cont'd)
The Structural Page
Five-row, one-column table
Text for the Smooth Motion heading and Instructions in first and last rows
The Structural Page Heading
<h1> heading for heading, paragraph tag for instructions (set font color for instructions text)
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

10. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

11. Animate the Grid Recall three basic steps of animation:
Define and place initial image
Prefetch frames for updating image
Set timer and build timer event handler to update image
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

12. Animate the Grid (cont'd)
Frames for the Columns of Blocks
Design and organize the column frames
Indexing Columns from Left to Right
On each time step, given column is replaced by column to its right
If columns are indexed left to right, index in column i of grid at a given step is replaced on next time step by image in column i + 1
The last column needs to have a new image assigned
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

13. Animate the Grid (cont'd)
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

14. Animate the Grid (cont'd)
Second Analysis
Define and organize the eight columnar frames
Define and fetch the initial images (0-19)
Prefetch the eight frames for uploading the image
Set a timer with an event handler that shifts the images in columns 1 through 19 to columns 0 through 18, and assign new frame into column 19
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

15. Animate the Grid (cont'd)
Subtask: Define and Organize the Frames
Guidelines for creating frame images
Ensure all images overwriting one another have the same dimensions in pixels
Ensure all frames are saved in .gif or .jpeg format, and that they are used consistently (only overwrite .gifs with .gifs)
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

16. Animate the Grid (cont'd)
Subtask: Define and Place Initial Images
Use <img src> tag to place initial image on page
Use a loop to complete image initialization of 20 images
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

17. Animate the Grid (cont'd)
Subtask: Prefetch the Frame Images
Declare the array into which the images will be fetched
Initialize the array elements to be image objects
Assign the names of the files to the src fields of the image objects, causing browser to record the names and get the files
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

18. Animate the Grid (cont'd)
Subtask: Set Timer and Build Timer Event Handler
Event handler animate() has three operations:
To move all images but the first, one position to the left
To assign a new frame to column 19
To schedule itself for sometime in the future
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

19. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

20. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

21. The Best Laid Plans…
We find it cumbersome not to be able to start and stop animation on demand
Build control task is scheduled for later
Makes more sense to solve it now, to simplify our work
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

22. Build Controls What should happen when the control is clicked?
Go button click-event
Start animation with setTimeout(), keeping track of the handle
Stop button click-event
End animation by clearing the timer using the handle
Radio button click-event
Set the timer interval by assigning to duration
Place this code in the fourth row of the structural page table
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

23. Sense the Keys Ability to recognize when mouse hovers over a given key
We need to learn about mouse motion detection
Browser with OS keeps track of where mouse is at any given time
MouseOver and MouseClick events recognized in JavaScript
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

24. Sense the Keys (cont'd) Subtask: Define and Organize the Frames
Subtask: Place the Initial Images
Placing the images creates the keys
Place seven images in center of third row of the structural table using a loop
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

25. Sense the Keys (cont'd) Subtask: Prefetch the Frames
Analogous to earlier animations
Since there are only two frames to prefetch, it's not worth writing a loop
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

26. Sense the Keys (cont'd) Subtask: Build the Event Handlers
here() for MouseOver
gone() for MouseOut
What should happen when mouse moves over a key
Key must change color to give user feedback
Must tell Grid Animation event handler which new Stack image to draw in the last position in the grid
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

27. Sense the Keys (cont'd) Combine the Subtasks
Add the event handler specifications to the <img src> tags
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

28. Staircase Detection Subtask: Recognizing the Staircase
How do we recognize the seven consecutive frame values?
Keep predicting the next frame value
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

29. Staircase Detection (cont'd)
Subtask: Recognizing Continuity
Modifiy the animate() function at the point where it is about to set the timer for the next tick
If the staircase is found, there should be no next tick
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

30. Assemble Overall Design
Build Controls task was performed out of order
Parts of Assemble Overall Design task performed ahead of time
There is not much left to complete the programming
Make sure the whole application runs as planned
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

31. Primp the Design Make structural page more attractive
Table background color
Cell padding
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

32. Assessment and Retrospective
Three primary topics from earlier chapters used in this design:
Loops
Parameterizing functions for reuse
Managing complexity with functions
Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

33. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.

34. Copyright © 2006 Pearson Addison-Wesley. All rights reserved.