1. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter 22: The Smooth Motion: Case Study in Algorithmic Problem Solving

2. 1-2 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-2 The Smooth Motion Application The Smooth Motion application is a coordination test Note names of components –Heading –Grid –Keys –Controls –Instructions

3. 1-3 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-3

4. 1-4 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-4 How the Smooth Motion Application Should Work Stack of blocks moving from right to left Random stack generation until user places cursor over one of the brown keys Brown keys control stack height (1-7) Goal is to move mouse across brown keys as smoothly as possible to create a perfect staircase rising to the right

5. 1-5 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-5 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 List the Tasks

6. 1-6 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-6 Planning Smooth Motion (cont'd)

7. 1-7 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-7 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

8. 1-8 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-8 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 (Program Evaluation and Review Technique) Chart –Task dependency graph

9. 1-9 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-9

10. 1-10 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-10 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

11. 1-11 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-11 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 – heading for heading, paragraph tag for instructions (set font color for instructions text)

12. 1-12 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-12

13. 1-13 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-13 Animate the Grid First Analysis 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

14. 1-14 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-14 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

15. 1-15 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-15 Animate the Grid (cont'd)

16. 1-16 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-16 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

17. 1-17 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-17 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)

18. 1-18 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-18

19. 1-19 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-19 Animate the Grid (cont'd) Subtask: Define and Place Initial Images –Use tag to place an image on page –Use a loop to complete image initialization of 20 images

20. 1-20 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-20 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

21. 1-21 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-21 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 (random) frame to image 19 To schedule itself for sometime in the future

22. 1-22 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-22

23. 1-23 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-23

24. 1-24 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-24 The Best Laid Plans… We find it cumbersome not to be able to start and stop animation on demand Build Controls task is scheduled for later Makes more sense to solve it now, to simplify our work

25. 1-25 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-25 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

26. 1-26 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-26 Sense the Keys Ability to recognize when mouse hovers over a given key We need to learn about mouse motion detection –Browser with help of the OS keeps track of where mouse is at any given time –MouseOver and MouseOut events recognized in JavaScript

27. 1-27 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-27 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

28. 1-28 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-28 Sense the Keys (cont'd) Subtask: Prefetch the Frames –Analogous to earlier animations –Since there are only two frames to prefetch BrownBox.gif and OrangeBox.gif), it's not worth writing a loop

29. 1-29 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-29 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

30. 1-30 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-30 Sense the Keys (cont'd) Combine the Subtasks –Add the event handler specifications to the tags

31. 1-31 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-31 Staircase Detection Subtask: Recognizing the Staircase –How do we recognize the seven consecutive frame values? –Keep predicting the next frame value

32. 1-32 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-32 Staircase Detection (cont'd) Subtask: Recognizing Continuity –Modify 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

33. 1-33 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-33 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 –Change how image 19 is assigned –Clean up animate() – relegate work to functions Make sure the whole application runs as planned

34. 1-34 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-34

35. 1-35 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-35 Primp the Design Make structural page more attractive –Table background color –Cell padding

36. 1-36 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 22-36 Assessment and Retrospective Three primary topics from earlier chapters used in this design: –Loops Prefetching images and placing grid images –Parameterizing functions for reuse here( pos ) and gone( pos ) –Managing complexity with functions shiftGrid() and checkStairAndContinue()