JavaScript Number Pattern 62

Posted in JavaScript Tutorial

Updated on Jan 10, 2024

By Mari Selvan

👁️ 255 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

JavaScript Number Pattern 62

Here`s a program that prints the above number pattern using JavaScript Programming:

example.html

Copied

<!DOCTYPE html>
<html>
 <head>
  <style>
   div{
    display: inline-block;
    text-align: center;
    width: 25px;
   }
  </style>
 </head>
<body>

<script>
var a = [
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
var i, j = 0, n = 1;
var low = 0, high = 9;
for(i=0; i<5; i++, low++, high--)
{
 for(j=low; j<=high; j++, n++)
  a[i][j] = n;
 for(j=low+1; j<=high; j++, n++)
  a[j][high] = n;
 for(j=high-1; j>=low; j--, n++)
  a[high][j] = n;
 for(j=high-1; j>low; j--, n++)
  a[j][low] = n;
}
document.write("Perfect Square Spiral<br>");
for(i=0; i<10; i++)
{
 document.write("<br>");
 for(j=0; j<10; j++)
  document.write("<div>" + a[i][j] +"</div>");
}
document.write("<br>");
</script>
</body>
</html>

💻 Testing the Program

When you run the above program, it will print the following output:

Output

1   2   3   4   5   6   7   8   9  10
36  37  38  39  40  41  42  43  44  11
35  64  65  66  67  68  69  70  45  12
34  63  84  85  86  87  88  71  46  13
33  62  83  96  97  98  89  72  47  14
32  61  82  95  100 99  90  73  48  15
31  60  81  94  93  92  91  74  49  16
30  59  80  79  78  77  76  75  50  17
29  58  57  56  55  54  53  52  51  18
28  27  26  25  24  23  22  21  20  19

🧠 How the Program Works

Let's break down the logic behind the code:

Array Initialization: An array a with 10x10 dimensions is initialized. All elements of this array are set to 0. This array will be used to construct the perfect square spiral pattern.
Variable Initialization: Variables i, j, and n are declared and initialized. i and j will be used for loop counters, and n will keep track of the numbers being assigned to the spiral pattern. Additionally, low and high are initialized to 0 and 9, respectively. These will be used to determine the range of indices for each spiral loop.
Spiral Loop Construction: There's a loop that runs for i from 0 to 4. This loop controls the construction of the spiral pattern. Inside this loop, four sub-loops are used to fill the numbers in the four sides of the spiral:
1. Top Side: A loop runs from the low index to the high index along the i-th row. For each iteration, the value of n is assigned to the current position, and n is incremented.
2. Right Side: A loop runs from low + 1 to high along the j-th column, for each row from low + 1 to high. The value of n is assigned to the current position, and n is incremented.
3. Bottom Side: A loop runs from high - 1 to low in reverse along the i-th row (the last but one row). The value of n is assigned to the current position, and n is incremented.
4. Left Side: A loop runs from high - 1 to low + 1 in reverse along the j-th column (the last but one column), for each row from high - 1 to low + 1. The value of n is assigned to the current position, and n is incremented.
Output Construction: After the spiral pattern is constructed in the array a, there's another loop that iterates through the array to output the pattern. This loop uses two nested loops, one for the rows and one for the columns. It creates a <div> element for each array element and writes the value of that element to the document.
Document Output: The program uses document.write() to output the "Perfect Square Spiral" label at the beginning and a line break. Then, it outputs the pattern in the array a using <div> elements for each number, row by row.
Final Line Break: Finally, another line break is added at the end of the document output.

💯 Tips for Enhancement:

Explore the versatility of this pattern by adjusting its parameters. Whether you increase or decrease the size, tweak the spacing, or modify the characters used, each change opens up a world of possibilities, allowing you to customize and create your unique visual effects.

✔ Conclusion:

Creating visually appealing patterns is not only a fun endeavour but also a great way to enhance your programming or design skills. We hope this tutorial has inspired you to explore the world of creative coding. Share your creations with us, and let your imagination run wild!

🤗 Closing Call-to-Action:

We'd love to see your unique interpretations of the number pattern. Share your creations in the comments below, and don't hesitate to reach out if you have any questions or suggestions for future tutorials. Happy coding!