Java

OOP GUIDE / WORK

HINT – DRAWING TILES AT RIGHT LOCATION

The array holds the colours of each tile.  To draw the tiles, we need to find a pattern between the element’s r and c in the array and the corresponding x, y, width and height (which we need to draw a rectangle in NOOPDraw).

For now, we will use a width and height of 20. But later, we will change this to the tileSize variable.

To discover a pattern, we will look at a table of tiles and list out the values or r, c, x, y, width and height.

TABLE 1 – TILES IN THE TOP ROW

Here is a table considering the first row of squares.  A pattern is easy to find for the value of x.

Array indexes		Corresponding rectangle’s information
r	c	x	Y	width	Height
0	0	0	0	20	20
0	1	20	0	20	20
0	2	40	0	20	20
0	3	60	0	20	20
0	c	c*20	0	20	20

TABLE 2 – TILES IN THE LEFTMOST COLUMN

Here is a table considering the first column of squares.  Again, a pattern is easy to find for y.

Array indexes		Corresponding rectangle’s information
r	c	x	Y	width	Height
0	0	0	0	20	20
1	0	0	20	20	20
2	0	0	40	20	20
3	0	0	60	20	20
r	0	0	r*20	20	20

TABLE 3 – OTHER TILES

Now we can also consider a few different squares that we randomly picked to find an overall pattern.

Array indexes		Corresponding square’s information
r	c	x	Y	width	Height
2	3	60	40	20	20
7	4	80	140	20	20
4	1	20	80	20	20
0	6	120	0	20	20
r	c	c*20	r*20	20	20

So, the statement

NOOPDraw.fillRectangle(c*20, r*20, 20, 20);

will draw grid[r][c] of the array at its proper location.

ONE LAST STEP

So that the grid can be scaled based on the desired tileSize, we can replace all of the 20s by the variable tileSize (which is an instance variable).

NOOPDraw.fillRectangle(c*tileSize, r*tileSize, tileSize, tileSize);