Unravelling the Matrix Array.

Recently I had a code challenge where I had to unroll a NxN matrix array. I’m going to go through my thought process in hopes of reinforcing my thinking or finding a more efficient solution.

Rules of the Challenge

Given an array matrix, unroll the array in clockwise rotation.

At first I asked, can i flatten the array and sort it? The answer was a no. Couldn’t hurt to ask lol.

Step 1

Before coding anything I immediately grabbed a pen and paper and drew out the matrix array. I drew a spiral and thought, what do I need to do to grab these numbers in this order.

The way I saw it was, I need to get the top row. Then the right side. Followed by the bottom. Up the left. Repeat.

Step 2

Once I thought I had the logic figured out I started planning out my code.

Step 3

How to grab the top row…

I know the top row is the first index in the array. So I’ll move that row into a new array and mutate it at the same time.

Step 4

Ok… now the right column.

My thought was to iterate through each remaining set of arrays and grab the last item while also mutating it.

Step 5

So now I have [ [ 1, 2, 3, 4 ], [ 5, 6, 7 ] ]. Not exactly the expected output but I can flatten it later. Moving on to the bottom row. I can pop the last index, but then I have to reverse it.

Step 6

Almost there. unrolled at this point = [ [ 1, 2, 3, 4 ], [ 5, 6, 7 ], [ 8, 9, 10 ] ]. Now to grab the left column. Just like I did the right column, I could do the left column and then reverse it.

Step 7

So now that I’m grabbing everything in a spiral, I just have to keep repeating this process until its done. What came to my mind was to create a while loop that will repeat until there’s nothing left in the matrix array and everything is in the new unrolled array. Also need to fix the output so I’ll flatten the return.

With the while loop, the function should be able to complete any size matrix the same way.

Fullstack Software Engineer