PowerPoint PresentationSlide 2Slide 5Slide 6Slide 7Slide 8Slide 9Analysis to Design to ProgrammingSlide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Draw House (Gory Detail I)Draw House (Gory Detail II)Slide 21Slide 23Slide 24L-1Lecture 13:Functions and Design© 2000 UW CSEUniversity of WashingtonComputer Programming IL-2OverviewDesign processFunctional decompositionTop down vs. bottom upGraphics primitivesL-5Drawing a HouseL-6Drawing a (Similar) HouseL-7Draw House (Pseudo-code)draw_house (color, ll_x, ll_y, num_windows)draw body as a colored rectangledraw roof as a colored triangleif num_windows is onedraw doordraw windowif num_windows is twodraw doordraw windowdraw windowL-8Functional Decomposition Draw HouseDraw Body Draw Roof Draw Door Draw WindowRectangle Triangle Rectangle Circle Rectangle LineThis is a "calling tree" or "static call graph." Each function is shown, with an arrow down to each function called.L-9Functional Decomposition Draw HouseDraw Roof Draw Body Draw Door Draw WindowTriangle Rectangle Circle Line Each function shown only once (preferred)L-10Analysis to Design to ProgrammingAnalyze the problemThen design a "big-picture" solutionA functional decomposition shows how the pieces fit togetherThen design individual functionsMay depend on low-level ("primitive") functions availableFinal programming may be very detailedL-11Top Down vs. Bottom UpSometimes designers start from the big pictureGradually work down to smaller pieces and then to fine detailsCalled the “top down approach”Sometimes people start with small piecesFigure out how they can fit together pieces to solve ever larger and larger problemsCalled the “bottom up approach”L-12Top Down or Bottom Up?Which approach are we following with DrawHouse?Answer: Generally, top down. But we have to look ahead and know what low level functions will be availableEventually, there will be graphics programming to do. Fortunately, most systems supply a library of graphics “primitives”L-13Graphics PrimitiveTypical functions: clearscreen, draw circle, rectangle, line, ellipse, etc. Typical parameters: location, color, fill, etc.Requires a coordinate system(0, 0)XY(a,b).L-14Typical 'rectangle' and 'line'(x1, y1)(x2, y2)(x1, y1)(x2, y2)void rectangle (int color, int x1, int y1, int x2, int y2);void line (int x1, int y1, int x2, int y2);L-15Big Picture Again Draw HouseDraw Roof Draw Body Draw Door Draw WindowTriangle Rectangle Circle Line Fill in the pieces one at a timeL-16WIN_WWIN_HMID_YWindow ConstantsMID_XOur analysis of how to describe a windowL-17Map Analysis to C CodeIdentify and declare constantsChoose parametersUtilize primitivesGet the picky details right, too!void draw_window(int x, int y) /* (x,y) is the lower left corner of the window */{rectangle( WHITE, x, y, x + WIN_W, y + WIN_H);line( x+MID_X, y, x + MID_X, y + WIN_H);line( x,y + MID_Y, x + WIN_W, y + MID_Y);}L-18Keep Filling in Pieces Draw HouseDraw Roof Draw Body Draw Door Draw WindowTriangle Rectangle Circle Line Analyze and code remaining functionsDoes the order matter?Coding could be bottom-up, even if design was top-down, and vice-versaIf the design is good, the functions can be implemented independentlyL-19Draw House (Gory Detail I)void draw_house (int color, int ll_x, int ll_y, int windows){int roof_ll_x, roof_ll_y ;/* Draw Body */draw_body (color, ll_x, ll_y) ;/* Draw Roof */roof_ll_x = ll_x - OVERHANG ; roof_ll_y = ll_y + BODY_HEIGHT ;draw_roof (color, roof_ll_x , roof_ll_y) ;L-20Draw House (Gory Detail II)/* Draw Door and Window(s) */if (windows == 1){draw_door (ll_x + DOOR_OFFSET_1, ll_y) ;draw_window (ll_x + WINDOW_OFFSET_1, ll_y + WINDOW_RAISE) ;}else ...L-21Draw House (Gory Detail II)/* Draw Door and Window(s) */if (windows == 1){draw_door (ll_x + DOOR_OFFSET_1, ll_y) ;draw_window (ll_x + WINDOW_OFFSET_1, ll_y + WINDOW_RAISE) ;}else if (windows == 2){draw_door (ll_x + DOOR_OFFSET_2, ll_y) ;draw_window (ll_x + WINDOW_OFFSET_2A, ll_y + WINDOW_RAISE) ;draw_window (ll_x + WINDOW_OFFSET_2B, ll_y + WINDOW_RAISE) ;}}L-23Next Step: A NeighborhoodWe could write 6 different functions...Smarter - call 1 function 6 times...L-24Summary of Functional DecompositionLook for common elements (similarities)Parameterize for special features (differences)Determine which functions will use othersDraw a graph to show their
View Full Document
Unlocking...