CoDEVIANT #21 (10/11/20) — Spiral Motion
So I’ve got a neat doozy of a problem to write about here.
We are to write a problem that takes a two-dimensional array and returns an array of the values when the values are read in a spiral motion.
So…I got a confession to make. I couldn’t figure out how to solve it by myself. After a number of failed attempts, I swallowed my pride and consulted the experts. But I learned a lot and I’m excited to share some knowledge with you!
Before I share the answer, I want to give an example of the kind of information we’ll be providing as an argument to the function.
Assuming we pass in:
[
[1, 2, 3, 4],
[12, 13, 14, 5],
[11, 16, 15, 6],
[10, 9, 8, 7]
]The function should push values to a new array like so
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
Notice that we avoid repeating any of the values. We achieve this by the following steps:
- Read the top row from left to right, including the far right value.
- Read the far right column omitting the very top value and including the very bottom value.
- Read the bottom row from right to left omitting the right-most value and including the left-most value.
- Rad the far left column, omitting the far left bottom value and the far left top value.
What we’re going to do is read the perimeter like this, then once we finish the outer perimeter, we (if there is one present) move into the inner perimeter.
Here’s the solution:
function spiralTraverse(array) {
// Write your code here.
let results = []
let startCol = 0
let startRow = 0
//endRow signifies the start places of each row up and down the verticle side of the block
let endRow = array.length - 1
//endCol signifies the start places of each column across the top of the block
let endCol = array[0].length - 1
while(startCol <= endCol && startRow <= endRow) {
//top
for(let col = startCol; col <= endCol ; col++) {
results.push(array[startRow][col])
console.log('top', results)
}
//right
for(let row = startRow + 1; row <= endRow; row++) {
results.push(array[row][endCol])
console.log('right', results)
}
//bottom
for(let column = endCol - 1; column >= startCol; column --) {
if(startRow === endRow) break
results.push(array[endRow][column])
console.log('bottom', results)
}
//left
for(let row = endRow - 1; row > startRow; row --) {
if(startCol === endCol) break
results.push(array[row][startCol])
console.log(results)
}
startCol++
startRow++
endCol--
endRow--
}
return results
}First we create an empty array called results. Then we create some pointers signifying the coordinates that we’re going to use to point to the value in the two-dimensional array that we want to push into results.
let results = []
let startCol = 0
let startRow = 0
//endRow signifies the start places of each row up and down the verticle side of the block
let endRow = array.length - 1
//endCol signifies the start places of each column across the top of the block
let endCol = array[0].length - 1
We are going to create a while-loop that will be active as long as startCol is less than OR equal to endCol AND startRow is less than OR equal to endRow. At the end of each iteration of this while loop, startCol and startRow will be incremented by one. endCol and endRow will be decremented by one. This prevents the while-loop from running infinitely.
while(startCol <= endCol && startRow <= endRow) {
...
startCol++
startRow++
endCol--
endRow--
}Next we are going to set up for-loops that will read the values from the perimeter in the directions discussed above (lengths too). They are:
- top // left to right
- right //top to bottom
- bottom // left to right
- left //bottom to top
top
for(let col = startCol; col <= endCol; col++) {
results.push(array[startRow][col])
}We say that col equals whatever startCol is at that moment. We keep the for-loop going as long as col is less-than or equal-to endCol at that moment. After each loop, col increments by one. Then we push whatever value is at
array[startRow], [col].
It would be like
array[0][0] //(1),
array[0][1] // (2),
array[0][2] // (3),
array[0][3] // (4)
right
for(let row = startRow + 1; row <= endRow; row++) {
results.push(array[row][endCol])
}We say that row equals startRow plus 1. This for-loop stays active so long as row is less-than or equal-to endRow. After each iteration, row increments by one. We then push the value of whatever array[row][endCol] is into results.
array[1][3] // (5)
array[2][3] // (6)
array[3][3] // (7)
bottom
for(let column = endCol - 1; column >= startCol; column --) {
if(startRow === endRow) break
results.push(array[endRow][column])
console.log('bottom', results)
}We say that column equals endCol minus one. The for-loop stays active as long as column is larger than or equal to startCol. After each iteration, column decrements by one. To avoid repeated integers, we say that if startRow equals endRow, then we break the loop. Meaning we jump out of it and move along with what’s going on in the parent while-loop. Anyways, in most cases we push whatever value we get from array[endRow][column].
At the start the values we’ll be pushing are:
array[3][2] // (8)
array[3][1] // (9)
array[3][0] // (10)
left
for(let row = endRow - 1; row > startRow; row --) {
if(startCol === endCol) break
results.push(array[row][startCol])
console.log(results)
}We then say that row equals endRow minus 1. The for-loop keeps running as long as row is larger than startRow. Each iteration has row decrementing by one. If startCol and endCol equal eachother, then the for-loop breaks. In most other cases, we push the value at array[row][startCol] into results:
array[2][0] // (11)
array[3][0] // (12)
At this point, the startRow and startColumn values increase by one. Then the endRow and endColumn values decrease by one. This makes it so that we can establish a new inner-perimeter so we can push the inner values into our results array.
And that’s basically how this problems works. It’s a pretty cool one and, on the outset, seems like a really impressive problem to be able to solve.
Stay frosty…