the smooth motion application

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

A Case Study in Algorithmic Problem Solving

The Smooth Motion Application

lawrence snyder

c h a p t e r 22

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley22-2

The Smooth Motion Application

• The Smooth Motion application is a coordination test

• Note names of components– Heading– Grid– Keys– Controls– Instructions


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


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


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



• 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 next, and so on

• PERT Chart (Program Evaluation and Review Technique) – Task dependency graph


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


• 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)

Build the Basic Web Page GUI (cont’d)


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


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



• 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



• 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)



• Subtask: Define and Place Initial Images

– Use <img src="gifpix/Stack0.gif" /> tag to place an image on page

– Use a loop to complete image initialization of 20 images


• 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



• 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



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


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


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


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



• 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


• 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



• Combine the Subtasks– Add the event handler specifications to the

<img src="…" /> tags



Staircase Detection

• Subtask: Recognizing the Staircase– How do we recognize the seven

consecutive frame values?– Keep predicting the next frame value


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


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


Primp the Design

• Make structural page more attractive– Cell padding

• try these in the table element properties padding : 5% padding : 15px

– Sense key color upgrade• Create new images YellowBox.gif, OrangeBox.gif • Use for mouse over and base case in the GUI


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()


Summary

The Decomposition Principle allows creation of programs that are too complex to produce directly:

• Define the tasks and strategize about the order in which to solve them; dependencies among the tasks will necessitate a feasible plan

• Use a dependency diagram to show which tasks depend on others; plan an order consistent with the diagram (no task is scheduled ahead of the tasks it depends on); produce a workable plan

• Consider other features, such as ease of testing, and adjust the schedule to address these aspects.


Summary

• In developing the Smooth Motion application, we decomposed each task into subtasks. There was similarity among the subtasks; for example, the timer-driven animation and the key-driven animation used a similar set of subtasks

• The tasks were solved out of plan-order, to give us the ability to start and stop the animation. Convenience motivated us to depart from the original schedule, but originally it was not possible to predict the benefits of the alternative plan.


Summary

• We learned about mouse events. This was not hard to grasp, but it illustrated a common feature of any large task: it is often necessary to learn new information to solve a complex problem

• Used our programming tools (loops, functions, parameters, conditionals, etc.) to instruct both the computer and humans looking at the program.

• We learned powerful, general problem-solving techniques; decomposition will apply in many other problem solving situations (not just programming).

the smooth motion application

Documents