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

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

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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