The smooth motion application
This presentation is the property of its rightful owner.
Sponsored Links
1 / 39

The Smooth Motion Application PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

The Smooth Motion Application

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

The Smooth Motion Application

The Smooth Motion application is a coordination test

Note names of components






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)

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

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 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:




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

Animate the Grid (cont'd)

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

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)

Animate the Grid (cont'd)

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

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

Animate the Grid (cont'd)

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

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

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

Sense the Keys (cont'd)

Combine the Subtasks

Add the event handler specifications to the <img src="…" /> tags

Sense the Keys (cont'd)

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:


Prefetching images and placing grid images

Parameterizing functions for reuse

here( pos ) and gone( pos )

Managing complexity with functions

shiftGrid() and checkStairAndContinue()


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.


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.


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

  • Login