What is a magic Square ? Algorithm to generate it
0
/
2202
All of you might be aware of what a magic square is. Those who are not, definition given below for them:-
A magic square is a nxn matrix in which the sum of the numbers in all columns, rows and diagonals is the same. Below is an excerpt taken from Wikipedia about the same.
In recreational mathematics, a magic square is an arrangement of distinct numbers (i.e. each number is used once), usually integers, in a square grid, where the numbers in each row, and in each column, and the numbers in the main and secondary diagonals, all add up to the same number. A magic square has the same number of rows as it has columns, and in conventional math notation, “n” stands for the number of rows (and columns) it has. Thus, a magic square always contains n2 numbers, and its size (the number of rows [and columns] it has) is described as being “of order n“.[1] A magic square that contains the integers from 1 to n2 is called a normal magic square. (The term “magic square” is also sometimes used to refer to any of various types of word squares.)
Normal magic squares of all sizes except 2 × 2 (that is, where n = 2) can be constructed. The 1 × 1 magic square, with only one cell containing the number 1, is trivial. The smallest (and unique up to rotation and reflection) nontrivial case, 3 × 3, is shown below.
Wiki link for the above is here:
I have created a small HTML/javascript based magic square and below is the demo followed by source code for the same:-
Select an option from the dropdown
Code:-
<html>
<head>
<title>
Magic square demo
</title>
<style>
.boundary {
height:100px;width:100px; min-height:100px;background:#285B12;font-weight:bold; font-size:200%; color:#00ffff;
}
.select {margin:auto;}
.dropdown {margin:auto;};
</style>
</head>
<center><select autofocus align = "center" class="dropdown" id = "dd" onchange = 'createTable()' onfocus = 'createTable()'>
<option value="9x9 Magic Square">9x9 Magic Square</option>
<option value="7x7 Magic Square">7x7 Magic Square</option>
<option value="5x5 Magic Square">5x5 Magic Square</option>
<option value="3x3 Magic Square">3x3 Magic Square</option>
</select></center><br><br>
<table id = "tab" class = "select" border = "1" cellpadding = "0" cellspacing = "0" >
</table>
</html>
<script>
var gridSizes = [9,7,5,3];
window.onload = init;
function init() {
document.getElementById('dd').focus();
}
function createTable() {
var gridSize = gridSizes[document.getElementById("dd").selectedIndex],
table = document.getElementById('tab'), numCount = 1,x = '0', y = Math.floor(gridSize/2).toString(),
numRows = document.getElementById('tab').rows.length; initVal = 1;
while (numRows !== 0) {
table.deleteRow(0);
numRows--;
}
table.height = table.width = gridSize * 100;
for (var row = 0; row < gridSize; row++) {
var tr = document.createElement('tr');
for (var col = 0; col < gridSize; col++) {
var td = document.createElement('td');
td.align = 'center';
td.className = 'boundary';
//td.innerHTML = col;
td.id = row.toString()+col.toString();
tr.appendChild(td);
}
document.getElementById('tab').appendChild(tr);
}
// starting point of magic square
document.getElementById(x+y).innerHTML = initVal;
x_val = parseInt(x);
y_val = parseInt(y);
while (numCount < gridSize*gridSize) {
y_offset = y_val - 1;
x_offset = x_val - 1;
if (y_offset < 0) {
y_offset += gridSize;
}
if (x_offset < 0) {
x_offset += gridSize;
}
gridId = x_offset.toString()+y_offset.toString();
var grid = document.getElementById(gridId);
if (grid.innerHTML === '') {
grid.innerHTML = ++initVal;
x_val = x_offset;
y_val = y_offset;
numCount++;
}
else {
x_offset = x_val+1;
y_offset = y_val;
gridId = x_offset.toString() + y_offset.toString();
var grid = document.getElementById(gridId);
grid.innerHTML = ++initVal;
x_val = x_offset;
y_val = y_offset;
numCount++;
}
}
}
</script>
Comments
