FluencywithInformationTechnology

ThirdEditionby

LawrenceSnyderChapter22:TheSmoothMotion:

CaseStudyinAlgorithmicProblemSolvingTheSmoothMotionApplicationTheSmoothMotionapplicationisacoordinationtestNotenamesofcomponentsHeadingGridKeysControlsInstructions23HowtheSmoothMotionApplicationShouldWorkStackofblocksmovingfromrighttoleftRandomstackgenerationuntiluserplacescursoroveroneofthebrownkeysBrownkeyscontrolstackheight(1-7)Goalistomovemouseacrossbrownkeysassmoothlyaspossibletocreateaperfectstaircaserisingtotheright4PlanningSmoothMotionApplytheDecompositionPrincipleDividealargetaskintosmallersubtasksthatcanbesolvedseparatelyandthencombinetheirsolutionstoproducetheoverallsolutionPrinciplecanbeappliedagaintoeachsubtask,ifnecessaryListtheTasks5PlanningSmoothMotion(cont'd)6PlanningSmoothMotion(cont'd)DecideonaProblem-SolvingStrategyStrategyonhowtosolveeachpartOrderinwhichwe'llsolvepartsBuildaBasicWebPageFirstDon'tspendtimeembellishingpageuntilothertasksaredone7PlanningSmoothMotion(cont'd)SolveIndependentTasksBeforeDependentTasksSometasksrelyonothertasksIndependenttasksshouldbedonefirstTasksthatdependontheindependenttasksaredonenext,andsoonPERT(ProgramEvaluationandReviewTechnique)ChartTaskdependencygraph89BuildtheBasicWebPageGUIFullGUIhastablewithheading,grid,keys,controls,instructionsBasicstructuralpage:TableHeadingInstructionsBackgroundcolor,fontstyleandcolorCenteringofapplicationonpage10BuildtheBasicWebPageGUI(cont'd)TheStructuralPageFive-row,one-columntableTextfortheSmoothMotionheadingandInstructionsinfirstandlastrowsTheStructuralPageHeading<h1>headingforheading,paragraphtagforinstructions(setfontcolorforinstructionstext)1112AnimatetheGridFirstAnalysisRecallthreebasicstepsofanimation:DefineandplaceinitialimagePrefetchframesforupdatingimageSettimerandbuildtimereventhandlertoupdateimage13AnimatetheGrid(cont'd)FramesfortheColumnsofBlocksDesignandorganizethecolumnframesIndexingColumnsfromLefttoRightOneachtimestep,givencolumnisreplacedbycolumntoitsrightIfcolumnsareindexedlefttoright,indexincolumniofgridatagivenstepisreplacedonnexttimestepbyimageincolumni+1Thelastcolumnneedstohaveanewimageassigned14AnimatetheGrid(cont'd)15AnimatetheGrid(cont'd)SecondAnalysisDefineandorganizetheeightcolumnarframesDefineandfetchtheinitialimages(0-19)PrefetchtheeightframesforuploadingtheimageSetatimerwithaneventhandlerthatshiftstheimagesincolumns1through19tocolumns0through18,andassignnewframeintocolumn1916AnimatetheGrid(cont'd)Subtask:DefineandOrganizetheFramesGuidelinesforcreatingframeimagesEnsureallimagesoverwritingoneanotherhavethesamedimensionsinpixelsEnsureallframesaresavedin.gifor.jpegformat,andthattheyareusedconsistently(onlyoverwrite.gifswith.gifs)1718AnimatetheGrid(cont'd)Subtask:DefineandPlaceInitialImagesUse<imgsrc="gifpix/Stack0.gif"/>tagtoplaceanimageonpageUsealooptocompleteimageinitializationof20images19AnimatetheGrid(cont'd)Subtask:PrefetchtheFrameImagesDeclaretheArrayintowhichtheimageswillbefetchedInitializethearrayelementstobeImageobjectsAssignthenamesofthefilestothesrcfieldsoftheImageobjects,causingbrowsertorecordthenamesandgetthefiles20AnimatetheGrid(cont'd)Subtask:SetTimerandBuildTimerEventHandlerEventhandleranimate()hasthreeoperations:Tomoveallimagesbutthefirst,onepositiontotheleftToassignanew(random)frametoimage19Toscheduleitselfforsometimeinthefuture212223TheBestLaidPlans…WefinditcumbersomenottobeabletostartandstopanimationondemandBuildControlstaskisscheduledforlaterMakesmoresensetosolveitnow,tosimplifyourwork24BuildControlsWhatshouldhappenwhenthecontrolisclicked?Gobuttonclick-eventStartanimationwithsetTimeout(),keepingtrackofthehandleStopbuttonclick-eventEndanimationbyclearingthetimerusingthehandleRadiobuttonclick-eventSetthetimerintervalbyassigningtodurationPlacethiscodeinthefourthrowofthestructuralpagetable25SensetheKeysAbilitytorecognizewhenmousehoversoveragivenkeyWeneedtolearnaboutmousemotiondetectionBrowserwithhelpoftheOSkeepstrackofwheremouseisatanygiventimeMouseOverandMouseOuteventsrecognizedinJavaScript26SensetheKeys(cont'd)Subtask:DefineandOrganizetheFramesSubtask:PlacetheInitialImagesPlacingtheimagescreatesthekeysPlacesevenimagesincenterofthirdrowofthestructuraltableusingaloop27SensetheKeys(cont'd)Subtask:PrefetchtheFramesAnalogoustoearlieranimationsSincethereareonlytwoframestoprefetchBrownBox.gifandOrangeBox.gif),it'snotworthwritingaloop28SensetheKeys(cont'd)Subtask:BuildtheEventHandlershere()forMouseOvergone()forMouseOutWhatshouldhappenwhenmousemovesoverakeyKeymustchangecolortogiveuserfeedbackMusttellGridAnimationeventhandlerwhichnewStackimagetodrawinthelastpositioninthegrid29SensetheKeys(cont'd)CombinetheSubtasksAddtheeventhandlerspecificationstothe<imgsrc="…"/>tags30StaircaseDetectionSubtask:RecognizingtheStaircaseHowdowerecognizethesevenconsecutiveframevalues?Keeppredictingthenextframevalue31StaircaseDetection(cont'd)Subtask:RecognizingContinuityModifytheanimate()functionatthepointwhereitisabouttosetthetimerforthenexttickIfthestaircaseisfound,thereshouldbenonexttick32AssembleOverallDesignBuildC