Red Pill or Blue Pill | Matrix Algorithm

5 min readOct 28, 2020

Since graduating from Flatiron school a little over a month ago, I have spent a little time each day studying JavaScript algorithms. One question that gave me some trouble is the matrix dilemma. It goes as such:

Write a function that accepts an integer and returns a spiral matrix with NxN dimension.

This is based on an array of arrays. So if a 3 is passed into the function, your output would be expected to be:

matrix(3) //=> [[1, 2, 3],
[8, 9, 4], 
[7, 6, 5]]

As you can see, the inner arrays do not simply count up. You are instead given a 3x3 square and need to count around from the outer layer to the inner layer.

To complete this problem, you first need to set up your base. To do this, you define an empty array to hold the entire matrix.

Then, you must create the appropriate amount of subarrays to be held inside ‘results.’ You can do this through an iteration, pushing in empty arrays as many times as the number given to the function.

You’ve now setup your matrix base!

Next, you need to fill it in. The first step here is defining a set of variables. These will include:

A counter that indicates what number we are pushing into the array. Each time we add a number into one of the boxes, we will increment the counter.

A starting variable for both the columns and the rows. These will both start at 0 since arrays indices start at 0.

An end variable for both the columns and the rows. As you can see above, there are n columns and rows, so the end indices will be n-1 (ex: 3-1 = 2)

From there, we need a loop to run until we’ve completed the matrix. A while loop works perfectly for this situation.

As you’ll see in a minute, each step will use ‘for loops’, continuously incrementing/decrementing the column and row variables to move around the matrix. We’ll know we’ve reached the end of a row or column when the start equals the end. However, we won’t be completely finished working out way through the matrix until both the column and the row have reached this point.

Before we move on, you need to recognize how we would access each position in the array of arrays.

Results[row][column]

We will start with the top row.

The startColumn variable is originally set to 0, so this loop will iterate until you’ve reached the endColumn, being the last position on the top row. For each iteration, you will take the position you’re at, set it equal to the counter and finally increment the counter.

Considering the first three loops:

results[0][0] = 1

results[0][1] = 2

results[0][2]* = 3 — you’ve reached endColumn.

From here, we will increment the startRow variable since there is nothing else to fill in on the top.

startRow++;

However, recognize that we are not simply filling in the next row in a similar fashion. The matrix needs to go around the box.

Incrementing the startRow variable moved us down, however the next step is to go down the endColumn.

There are two boxes to hit between start and end row.

results[1][2] = 4

results[2][2] = 5

After we’ve finished the right side column, we are going to decrement endColumn since there is nothing left to fill in there.

endColumn--

The bottom row is up next and I think you’re picking up the pattern here. However, the key piece is that we are now moving right to left, iterating until the endColumn is with the start column.