{"id":1558,"date":"2023-09-20T15:30:47","date_gmt":"2023-09-20T15:30:47","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=1558"},"modified":"2025-08-25T18:06:51","modified_gmt":"2025-08-25T18:06:51","slug":"magic-squares-in-javascript","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/magic-squares-in-javascript\/","title":{"rendered":"Magic Squares in JavaScript"},"content":{"rendered":"

\"magic<\/p>\n

In mathematics, a “<\/span>magic square<\/a>” is a matrix of numbers where each row, column, and diagonal add-up to the same number. That number is called the “<\/span>magic constant<\/a>“. The integers used are only positive, and do not repeat<\/span>. The constant sum is determined by the size of the square and is described by a formula:<\/span><\/p>\n

M = n * ((n^2 + 1) \/ 2)\n<\/pre>\n
Facts about the properties and classifications of these numeric formations have been discussed by scholars for millennia. Knowledge of this topic goes back thousands of years, and can be found referenced throughout the world.<\/p>\n
History & Culture<\/h2>\n
Magic squares have a fascinating historical and cultural significance, often with mystical undertones. They are mentioned in the I Ching<\/em><\/a>, Brhat Samhita<\/em>, and other works concerned with the transcendental and occult. They can be seen used in art, divination, perfumery, recreational gaming, computer science, and more.<\/p>\n
\"a
AI images generated using Midjourney<\/figcaption><\/figure>\n
In the Brhat Samhita<\/em>, the magic square is used as a symbolic representation of the planets. It makes use of magic squares in the creation of talismans for astrological purposes.<\/p>\n
For the purposes of this blog post, we’ll view them through the lens of software engineering.<\/p>\n
3×3 Magic Squares<\/h2>\n
There’s so much to cover on this topic. I’ll narrow it down to 3×3 lattices (magic squares can actually be any size), specifically in the context of the JavaScript programming language. A quad of numbers, like the one pictured above, can be described as a two-dimensional array:<\/p>\n
const magicSquare = [[4, 9, 2], [3, 5, 7], [8, 1, 6]];\n<\/pre>\n
Squares of this size always have a magic constant of 15<\/strong>. And, the number 5 will be in the middle. There’s additional logic that explains which numerals can appear where and why. Those ideas are explored in the comments section of a HackerRank coding challenge<\/a> titled “Forming a Magic Square”.<\/p>\n
HackerRank Coding Challenge<\/h2>\n
This coding problem found on HackerRank<\/a> asks programmers to figure out what it would take to convert a 3×3 matrix of integers into a magic square. The input array is almost valid, but requires a few replacements. For each change, we must track the difference between the numbers and return the total variance – referred to as the “cost”. The correct answer will be the lowest cost<\/strong> required to convert the input data into a magic square.<\/p>\n
\"hackerrank<\/p>\n
The difficulty of this assignment is considered “medium”. The first step is realizing that there are a finite number of valid magic square configurations. As it turns out, there are exactly eight 3×3 permutations:<\/p>\n
const magicSquares = [[[4, 9, 2], [3, 5, 7], [8, 1, 6]],\n                [[6, 1, 8], [7, 5, 3], [2, 9, 4]],\n                [[8, 1, 6], [3, 5, 7], [4, 9, 2]],\n                [[2, 9, 4], [7, 5, 3], [6, 1, 8]],\n                [[8, 3, 4], [1, 5, 9], [6, 7, 2]],\n                [[4, 3, 8], [9, 5, 1], [2, 7, 6]],\n                [[6, 7, 2], [1, 5, 9], [8, 3, 4]],\n                [[2, 7, 6], [9, 5, 1], [4, 3, 8]]];\n<\/pre>\n
Starting with any one of these, we can generate the other seven programmatically. The subsequent arrangements can be derived through rotation and reflection. Using JavaScript, I rotate an initial seed square three times to have the first four series. Then, I flip each one of those to get the final records.<\/p>\n
function generateMagicSquares(magicSquare1){\n\tconst magicSquares = [];\n\tmagicSquares.push(magicSquare1);\n\n\t\/\/ we need to rotate it 3 times to get all rotations\n\tfor(let i = 0; i < 3; i++){\n\t\tvar rotation = magicSquares[i].map((val, index) => magicSquares[i].map(row => row[index]).reverse());\n\t\t\/\/ console.log(rotation)\n\t\tmagicSquares.push(rotation);\n\t}\n\n\t\/\/ and then flip each one\n\tfor(let i = 0; i < 4; i++){\n\t\tvar flipped = magicSquares[i].map((_, colIndex) => magicSquares[i].map(row => row[colIndex]));\n\t\tmagicSquares.push(flipped);\n\t}\n\n\treturn magicSquares;\n}\n\nconst magicSquare1 = [[4, 9, 2], [3, 5, 7], [8, 1, 6]];\nconst magicSquares = generateMagicSquares(magicSquare1);\nconsole.log(magicSquares);<\/pre>\n
To solve this exercise, we’ll take the input array and compare it to each of the valid magic squares. We keep track of the cost on each iteration, and finally return the minimum.<\/p>\n
function formingMagicSquare(s){\n\tconst magicSquares = [[[4, 9, 2], [3, 5, 7], [8, 1, 6]], [[6, 1, 8], [7, 5, 3], [2, 9, 4]], [[8, 1, 6], [3, 5, 7], [4, 9, 2]], [[2, 9, 4], [7, 5, 3], [6, 1, 8]], [[8, 3, 4], [1, 5, 9], [6, 7, 2]], [[4, 3, 8], [9, 5, 1], [2, 7, 6]], [[6, 7, 2], [1, 5, 9], [8, 3, 4]], [[2, 7, 6], [9, 5, 1], [4, 3, 8]]];\n\n\t\/\/ let minCost = 100000;\n\tlet minCost = Number.MAX_SAFE_INTEGER;\n\tlet cost = 0;\n\tfor(let i = 0; i < magicSquares.length; i++){\n\t\tcost = determineCost(s, magicSquares[i]);\n\t\tif(cost < minCost){\n\t\t\tminCost = cost;\n\t\t}\n\t}\n\treturn minCost;\n}\n<\/pre>\n
You’ll notice that the initial minimum cost is set to a very high number<\/a>. As I loop through each of the valid magic squares, I check if the cost is lower than the current minimum and then replace the value.<\/p>\n
With each comparison, subtraction is used to determine the cost to complete the transformation. That code loops through each digit of each row on both 2D arrays. The absolute value of the difference between each coordinate is tallied and returned.<\/p>\n
function determineCost(inputArray, validMagicSquare){\n\tlet cost = 0;\n\tfor(let i = 0; i < 3; i++){ \/\/ each row\n\n\t\tfor(let j = 0; j < 3; j++){ \/\/ each digit\n\n\t\t\tcost += Math.abs(inputArray[i][j] - validMagicSquare[i][j]);\n\t\t}\n\t}\n\treturn cost;\n}\n<\/pre>\n
The working code all stitched together looks like this:<\/p>\n
<script>\n\nfunction generateMagicSquares(magicSquare1){\n\tconst magicSquares = [];\n\tmagicSquares.push(magicSquare1);\n\n\t\/\/ we need to rotate it 3 times to get all rotations\n\tfor(let i = 0; i < 3; i++){\n\t\tvar rotation = magicSquares[i].map((val, index) => magicSquares[i].map(row => row[index]).reverse());\n\t\t\/\/ console.log(rotation)\n\t\tmagicSquares.push(rotation);\n\t}\n\n\t\/\/ and then flip each one\n\tfor(let i = 0; i < 4; i++){\n\t\tvar flipped = magicSquares[i].map((_, colIndex) => magicSquares[i].map(row => row[colIndex]));\n\t\tmagicSquares.push(flipped);\n\t}\n\n\treturn magicSquares;\n}\n\nfunction determineCost(inputArray, validMagicSquare){\n\tlet cost = 0;\n\n\tfor(let i = 0; i < 3; i++){ \/\/ each row\n\n\t\tfor(let j = 0; j < 3; j++){ \/\/ each digit\n\n\t\t\tcost += Math.abs(inputArray[i][j] - validMagicSquare[i][j]);\n\t\t}\n\t}\n\n\treturn cost;\n\n}\n\nfunction formingMagicSquare(s){\n\t\/\/ const magicSquares = [[[4, 9, 2], [3, 5, 7], [8, 1, 6]], [[6, 1, 8], [7, 5, 3], [2, 9, 4]], [[8, 1, 6], [3, 5, 7], [4, 9, 2]], [[2, 9, 4], [7, 5, 3], [6, 1, 8]], [[8, 3, 4], [1, 5, 9], [6, 7, 2]], [[4, 3, 8], [9, 5, 1], [2, 7, 6]], [[6, 7, 2], [1, 5, 9], [8, 3, 4]], [[2, 7, 6], [9, 5, 1], [4, 3, 8]]];\n\tconst magicSquare1 = [[4, 9, 2], [3, 5, 7], [8, 1, 6]];\n\tconst magicSquares = generateMagicSquares(magicSquare1);\n\n\t\/\/ let minCost = 100000;\n\tlet minCost = Number.MAX_SAFE_INTEGER;\n\tlet cost = 0;\n\tfor(let i = 0; i < magicSquares.length; i++){\n\t\tcost = determineCost(s, magicSquares[i]);\n\t\tif(cost < minCost){\n\t\t\tminCost = cost;\n\t\t}\n\t}\n\treturn minCost;\n}\n\nconst finalCost = formingMagicSquare([[4, 9, 2], [3, 5, 7], [8, 1, 5]]);\nconsole.log(finalCost);\n<\/script>\n<\/pre>\n
This solution was not intuitive to me and took some research and experimentation. It was interesting to learn about the concept of magic squares (and other shapes) along the way.<\/p>\n
\"HackerRank<\/p>\n
Additional References<\/h4>\n