In brushing up on computer science fundamentals, I came across the topic of matrices. The sight alone of them can seem pretty daunting and requires the introduction of several variables at once, which can add layers of complexity to the problem, but once you see the solution, it’ll make a lot of sense . Thought I’d dissect a matrix example today.
Here’s the problem: Write a function that accepts an integer N and returns a NxN spiral matrix.
Examples:
In the above example, you can see what outputs we should receive when specific input is plugged in. For example, when we call matrix(3), we should see 1, 2, 3 running from left to right on the top row, then the numbers increment as we travel down the matrix vertically, then to the left, up, and inwards towards the center, as a spiral does in a clockwise pattern. You’ll notice that each row is its own subarray. It’s easiest to see the pattern with larger inputs, as shown in the last example.
As you can see, it’s not a straightforward problem to solve and you’d be hard pressed to find a solution if you started simply writing code immediately from the outset. It’s important to draw a diagram to think through and visualize how you’re going to solve the problem before diving into it.
First, below, we create an empty array called results, into which we’re going to be pushing all the subarrays. We will ultimately have n number of subarrays in the results array, so we want to loop through and push n arrays into our results array.
If n = 3 and at this point, we console.log results, we’ll have three empty subarrays within a larger one, or [[], [], []].
We need to create a counter variable starting at one, and variables for the current position of each of the rows and columns indicated above based on the value of n, which is passed into the function. Keep in mind that these values will be changing throughout the course of the problem to remind ourselves what rows and columns we’re working on.
We’re going to be doing a series of loops–starting from the start column and ending in the end column–that will determine the values that need to be inserted in between those by assigning it the counter variable and then incrementing it. While the start column is less than the end column and the start row is less then the end row, we’re going to be looping through and filling out the values in the matrix.
Here, we iterate from the start column to the end column. At results[start_row][i], we assign the counter variable, then we increment the counter.
After the loop has gone through the top row, we then increment the start row value, which moves the start row to the second row – the value of the start row is now one. Then, since the top row values have been completed, we only deal with the remaining values that need to be filled in located in the second and third rows. Our second loop goes from the start row to the end row. Similar to the last loop, at results[i][end_column], or in this case, results[2][2], we assign a counter variable, then increment the counter by one.
After that, we decrement the end column. This gives us the limits of the areas we are trying to figure out the values of. At this point, we’re missing the four digits in the bottom left hand corner of the matrix.
We then do the same for the other two sides.
Here’s what the final solution looks like:
Being aware of the nuances is advantageous, as using these variables accurately helps increase precision and code readability.
Photo credit: Holey Cream
Jil Krusemann 