Prashnikaप्रश्निका
Code
About

2D array visualiser

Fill in a 2D array (up to 6 rows and 6 columns) and pick a walk. Press Play and every cell is numbered in the order it is printed, while i and j, the Java line that is running and the values printed so far are shown. The spiral also shows top, bottom, left and right closing in.

How to use it

  1. 1Fill in the array (up to 6 rows and 6 columns), or tap an example, and pick a walk: row by row, column by column, a diagonal, the boundary or the spiral.
  2. 2Press Play. Each cell is numbered in the order it is printed, and i and j are shown while the Java line runs.
  3. 3Watch the loops: row by row changes j fastest, column by column changes i fastest, and the spiral closes top, bottom, left and right in.
Not sure what to type? Tap an example:
the spiral of a 4 x 4 arrayrow by row: a 3 x 4 arraycolumn by column: a 3 x 4 arraythe main diagonal of a 4 x 4 arraythe other diagonal of a 4 x 4 arraythe boundary elements of a 4 x 5 arraythe spiral of a 3 x 5 array
Which walk

Rows apart with ; and values with spaces, e.g. 1 2 3; 4 5 6.

The animation needs JavaScript. Every step is written out below.

Result

Result
16 cells: 1 2 3 4 8 12 16 15 14 13 9 5 6 7 11 10
Every step in words (33 steps)
  1. Walk round the edge of the array, then the edge of what is left inside it, and so on. top = 0, bottom = 3, left = 0, right = 3.
  2. top <= bottom (0 <= 3) and left <= right (0 <= 3) is true, so there is another ring.
  3. Top row: print a[0][0] = 1, going right.
  4. Top row: print a[0][1] = 2, going right.
  5. Top row: print a[0][2] = 3, going right.
  6. Top row: print a[0][3] = 4, going right.
  7. top++: the top row is done, so top becomes 1.
  8. Right column: print a[1][3] = 8, going down.
  9. Right column: print a[2][3] = 12, going down.
  10. Right column: print a[3][3] = 16, going down.
  11. right--: the right column is done, so right becomes 2.
  12. top <= bottom (1 <= 3) is true, so there is a bottom row left.
  13. Bottom row: print a[3][2] = 15, going left.
  14. Bottom row: print a[3][1] = 14, going left.
  15. Bottom row: print a[3][0] = 13, going left.
  16. bottom--: the bottom row is done, so bottom becomes 2.
  17. left <= right (0 <= 2) is true, so there is a left column left.
  18. Left column: print a[2][0] = 9, going up.
  19. Left column: print a[1][0] = 5, going up.
  20. left++: the left column is done, so left becomes 1.
  21. top <= bottom (1 <= 2) and left <= right (1 <= 2) is true, so there is another ring.
  22. Top row: print a[1][1] = 6, going right.
  23. Top row: print a[1][2] = 7, going right.
  24. top++: the top row is done, so top becomes 2.
  25. Right column: print a[2][2] = 11, going down.
  26. right--: the right column is done, so right becomes 1.
  27. top <= bottom (2 <= 2) is true, so there is a bottom row left.
  28. Bottom row: print a[2][1] = 10, going left.
  29. bottom--: the bottom row is done, so bottom becomes 1.
  30. left <= right (1 <= 1) is true, so there is a left column left.
  31. left++: the left column is done, so left becomes 2.
  32. top <= bottom (2 <= 1) and left <= right (2 <= 1) is false: every cell has been printed.
  33. Done. 16 cells printed: 1 2 3 4 8 12 16 15 14 13 9 5 6 7 11 10.
Start again

About the 2D array visualiser

What it does

Prints a 2D (double-dimensional) array with the walk you pick and shows every step: the cell being printed, the loop variables i and j, a number in each cell for the order it was printed, and the values printed so far. The Java loops are shown with the line that is running lit. It is the dry run ISC Computer Science array questions ask for.

The walks

  • Row by row (row-major): i is the outer loop, j the inner one, so each row is printed from left to right.
  • Column by column: j is the outer loop, so each column is printed from top to bottom.
  • Main diagonal: the cells a[i][i]. Other diagonal: the cells a[i][c - 1 - i]. For an array that is not square they run as far as the smaller side.
  • Boundary elements: the cells on the first or last row or the first or last column; the inside prints blanks.
  • Spiral: the top row, the right column, the bottom row and the left column, and then the same for what is left inside, using top, bottom, left and right.

The limits

Up to 6 rows and 6 columns, each value from -99 to 999. Rows are written apart with a semicolon, values with spaces.

Common questions

How do you print a 2D array row by row in Java?

With two nested loops: the outer loop runs i over the rows and the inner loop runs j over the columns, printing a[i][j]; System.out.println() after the inner loop starts a new line.

What is the difference between row-major and column-major order?

Row-major visits a whole row before the next one (j changes fastest); column-major visits a whole column before the next one (i changes fastest). Only which loop is outside changes.

How do you print the diagonals of a square matrix?

The main diagonal is a[i][i]; the other diagonal is a[i][n - 1 - i]. One loop over i is enough for each.

How does the spiral traversal work?

Keep four limits, top, bottom, left and right. Print the top row and move top down, print the right column and move right in, then, if rows are left, print the bottom row backwards and move bottom up, and, if columns are left, print the left column upwards and move left in. Repeat until the limits cross.

Can I see the code in Python, JavaScript or C++?

Yes. Choose the language in the menu above the code. Only the listing changes: the steps are always worked out from the Java program that ISC uses, and the highlighted line moves to the matching line of the language you chose.

Practise on real ISC questions

More Computer Science tools

All study tools →