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 the rectangle using pieces

Draw white square Draw colored square Draw disk

Draw Horizontal Line

Draw Vertical Line

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:8for j=1:8

if (mod(i+j, 2) == 0)drawColoredSquare(i,j, cbx, cby, width, g)

elsedrawWhiteSquare(i,j, cbx, cby, width, g)

end endend

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

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)