Print Spiral Pattern in JavaScript

Web development is going popular every passing day, and in this journey of the web, development javascript plays the most important role. Though javascript is used to make websites dynamic one can also create fun programs.  So in today’s article, we will create a program to Print Spiral Pattern in JavaScript. With the help of this program, you will be able to print a spiral pattern of integers. Practising these types of questions also helps to get an upper edge in Competitive Programming.

 

What’s The Approach?

 

Firstly we will CREATE A 2D ARRAY with size n.

 

Next, we will create variables to store the boundary of the array and the size left to print the spiral.

 

Also, we are going to create a char variable to store the movement of the spiral pattern. It is like  ‘r’ for right, ‘l’ for left, ‘d’ for down, and ‘u’ for up.

 

Now we will execute a loop from 1 to n*2 and will fill up the array in a spiral pattern.

 

Also Read: How to Run Javascript in Visual Studio Code on Mac OS Big Sur

 

Javascript Program To Print Spiral Pattern

 

Input:

n = 5

 

Output: 

 

1  2  3  4  5  
16 17 18 19 6  
15 24 25 20 7  
14 23 22 21 8  
13 12 11 10 9

<script>

function printSpiral(size)
{
    
    // Create row and col
    // to traverse rows and columns
    let row = 0, col = 0;

    let boundary = size - 1;
    let sizeLeft = size - 1;
    let flag = 1;

    // Variable to determine the movement
    // r = right, l = left, d = down, u = upper
    let move = 'r';

    // Array for matrix
    let matrix = new Array(size);
    for(let i = 0; i < size; i++)
    {
        matrix[i] = new Array(size).fill(0);
    }

    for(let i = 1; i < size * size + 1; i++)
    {
        
        // Assign the value
        matrix[row][col] = i;

        // switch-case to determine
        // the next index
        switch (move)
        {
            
            // If right, go right
            case 'r':
                col += 1;
                break;
    
            // If left, go left
            case 'l':
                col -= 1;
                break;
    
            // If up, go up
            case 'u':
                row -= 1;
                break;
    
            // If down, go down
            case 'd':
                row += 1;
                break;
        }

        // Check if the matrix
        // has reached array boundary
        if (i == boundary)
        {

            // Add the left size for the
            // next boundary
            boundary += sizeLeft;

            // If 2 rotations has been made,
            // decrease the size left by 1
            if (flag != 2)
            {
                flag = 2;
            }
            else
            {
                flag = 1;
                sizeLeft -= 1;
            }

            // switch-case to rotate the movement
            switch (move)
            {
                
                // If right, rotate to down
                case 'r':
                    move = 'd';
                    break;
    
                // If down, rotate to left
                case 'd':
                    move = 'l';
                    break;
    
                // If left, rotate to up
                case 'l':
                    move = 'u';
                    break;
    
                // If up, rotate to right
                case 'u':
                    move = 'r';
                    break;
            }
        }
    }

    // Print the matrix
    for(row = 0; row < size; row++)
    {
        for(col = 0; col < size; col++)
        {
            let n = matrix[row][col];
            if (n < 10)
                document.write(n + " ");
            else
                document.write(n + " ");
        }
        document.write("<br>");
    }
}

// Driver Code

// Get the size of size
let size = 5;

// Print the Spiral Pattern
printSpiral(size);

</script>