Checkerboard Examples Top Down Design

The Problem On a checkerboard where locations are numbered similar to java coordinates, draw a rectangle using checker pieces. You will be given the top left coordinate of the checkerboard, the size of individual squares, the location and dimensions of the rectangle to be drawn Create disks with radius one third of the square widths

Examples

The Main Algorithm Given : (cbx, cby) : top left corner of checkerboard width : the width of one square rx, ry, rwidth, rheight : rectangle paremeters 1- Draw the checkerboard on screen 2- Put the pieces in a rectangular form (So here the big decision is to separate these two tasks. Instead of drawing 64 more complex pieces, we will draw 64 + rwidth * rheight simpler objects (hopefully))

Observation Here we have two different types of coordinates : coordinates in pixel locations, and coordinates in checkerboard positions. In order to be able to swiftly go back and forth between these two different systems, let’s introduce conversion functions. What type of functions do we need?

Conversions We need a function that, given a checkerboard coordinate, returns the pixel coordinate of the top left corner of that square. Let’s call the function cb2pixels, cb being short for checkerboard. What inputs are needed, and what will cb2pixels output?

cb2Pixels function function [ px, py ] = cb2pixels( rx, ry, x, y, width) %CB2PIXELS Converts a checkerboard position to pixel positions % Given a checkerboard position (rx,ry), and board parameters, % returns x and y coordinates in pixels. px = x + width * (rx-1); py = y + width * (ry-1);

Pixels2cb? Do we need to convert from pixel positions to board locations? No need at this point. We could have needed that if the user could click on the board, and we want to know which location was clicked.

1-Draw the checkerboard For i= 1 to 8 do for j=1 to 8 do if (i+j) is even draw a colored square at (i,j) else draw a white square (i,j)

Draw a White square? Since the background is already white, just draw a boundary rectangle Given x, y, cbx, cby, and width [px py] = cb2pixels(x, y, cbx, cby, width) drawHorizontalLine(px, px + width, py, g) drawHorizontalLine(px, px + width, py + width, g) drawVerticalLine(py, py + width, px, g) drawVerticalLine(py, py + width, px+width, g)

Draw a Colored Rectangle? Homework question

Draw a chessboard Rectangle? We already know how to do this using pixels Given rx, ry, rwidth, rheight, width for i=rx to rx + rwidth – 1 do for j=ry to ry + rheight – 1 do draw a disk to location (i, j)

Draw a Piece? Given cbx, cby, width, x, y [px py] = cb2pixels(x, y, cbx, cby, width) cx = px + width/2 cy = py + width/2 cradius = width/3 Draw a disk centered at (cx, cy) with radius cradius

Decomposition of our problem Draw a checkerboard Rectangle Draw the checkerboard Draw white square Draw Horizontal Line Draw Vertical Line Draw colored square Draw the rectangle using pieces Draw disk

drawCheckerBoardRectangle.m function drawCheckerBoardRectangle(cbx, cby, width, rx, ry, rwidth, rheight, g) %DRAWCHECKERBOARDRECTANGLE Draws a rectangular pattern on checkerboard % cbx, cby being the top left corner of the checkerboard, this function % first draws it with squares of size width, and then draws a rectangle % using pieces. rx,ry is the top left corner of the rectangle, rwidth and % rheight are the dimensions of the rectangle drawCheckerBoard(cbx, cby, width, g); drawRectangularPieces(cbx, cby, width, rx, ry, rwidth, rheight, g);

drawCheckerBoard.m function drawCheckerBoard(cbx, cby, width, g) for i= 1:8 for j=1:8 if (mod(i+j, 2) == 0) drawColoredSquare(i,j, cbx, cby, width, g) else drawWhiteSquare(i,j, cbx, cby, width, g) end

drawWhiteSquare.m function drawWhiteSquare(x, y, cbx, cby, width, g) [px py] = cb2pixels(x, y, cbx, cby, width); drawHorizontalLine(px, px + width, py, g) drawHorizontalLine(px, px + width, py + width, g) drawVerticalLine(py, py + width, px, g) drawVerticalLine(py, py + width, px+width, g)

drawColoredSquare.m function drawColoredSquare( x, y, cbx, cby, width, g ) [px py] = cb2pixels(x, y, cbx, cby, width); drawGreyRectangle(px, py, width, width, g)

drawGreyRectangle.m function drawGreyRectangle(x,y, width, height, g) startsWithBlack = true; for cY=y:y + height isNextBlack = startsWithBlack; for cX = x:x + width if (isNextBlack) putPixel(cX, cY, g); end isNextBlack = ~isNextBlack; end startsWithBlack = ~startsWithBlack; end

drawRectangularPieces.m function drawRectangularPieces(cbx, cby, width, rx, ry, rwidth, rheight, g) for i = rx : (rx + rwidth - 1) for j = ry : (ry + rheight - 1 ) drawBlackPiece(i, j, cbx, cby, width, g); end

drawBlackPiece.m function drawBlackPiece(x, y, cbx, cby, width, g) [px py] = cb2pixels(x, y, cbx, cby, width); cx = px + width/2; cy = py + width/2; cradius = width/3; drawDisk(cx, cy, cradius, g)