var n = 3;
let numArray = [2, 9, 4, 7, 5, 3, 6, 1, 8];
var c = 0;
let solved = 0;
let sum1 = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(240);
if (solved == 1) {
background(219, 255, 153)
}
text('Magic Square Transforms', 40, 20)
fill(255);
rect(25, 30, 160, 150);
fill(0)
checkSq();
makeSq();
makeTransform();
}
function makeSq() {
j = 0;
w = (width - 300) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 100 + (i % 3) * w - 3 / 2 * w;
y = 100 + j * w - 3 / 2 * w;
fillC(c);
rect(x, y, w, w);
stroke(0);
fill(0);
str1 = str(numArray[c]);
text(str1, x + 10, y + 20)
c = c + 1;
}
}
}
function mouseClicked() {
if (mouseX > 50 && mouseX < 84 && mouseY < 84 && mouseY > 50) {
numArray[0] = (numArray[0] + 1) % 9;
if (numArray[0] == 0) {
numArray[0] = 9
}
}
if (mouseX > 50 && mouseX < 84 && mouseY < 117 && mouseY > 84) {
numArray[1] = (numArray[1] + 1) % 9;
if (numArray[1] == 0) {
numArray[1] = 9
}
}
if (mouseX > 50 && mouseX < 84 && mouseY < 150 && mouseY > 117) {
numArray[2] = (numArray[2] + 1) % 9;
if (numArray[2] == 0) {
numArray[2] = 9
}
}
if (mouseX > 84 && mouseX < 117 && mouseY < 84 && mouseY > 50) {
numArray[3] = (numArray[3] + 1) % 9;
if (numArray[3] == 0) {
numArray[3] = 9
}
}
if (mouseX > 84 && mouseX < 117 && mouseY < 117 && mouseY > 84) {
numArray[4] = (numArray[4] + 1) % 9;
if (numArray[4] == 0) {
numArray[4] = 9
}
}
if (mouseX > 84 && mouseX < 117 && mouseY < 150 && mouseY > 117) {
numArray[5] = (numArray[5] + 1) % 9;
if (numArray[5] == 0) {
numArray[5] = 9
}
}
if (mouseX > 117 && mouseX < 150 && mouseY < 84 && mouseY > 50) {
numArray[6] = (numArray[6] + 1) % 9;
if (numArray[6] == 0) {
numArray[6] = 9
}
}
if (mouseX > 117 && mouseX < 150 && mouseY < 117 && mouseY > 84) {
numArray[7] = (numArray[7] + 1) % 9;
if (numArray[7] == 0) {
numArray[7] = 9
}
}
if (mouseX > 117 && mouseX < 150 && mouseY < 150 && mouseY > 117) {
numArray[8] = (numArray[8] + 1) % 9;
if (numArray[8] == 0) {
numArray[8] = 9
}
}
}
function checkSq() {
sum1[0] = numArray[0] + numArray[3] + numArray[6];
text(str(sum1[0]), 158, 100 - 32);
sum1[1] = numArray[1] + numArray[4] + numArray[7];
text(str(sum1[1]), 158, 100 - 32 + 35);
sum1[2] = numArray[2] + numArray[5] + numArray[8];
text(str(sum1[2]), 158, 100 - 32 + 70);
sum1[3] = numArray[0] + numArray[4] + numArray[8];
text(str(sum1[3]), 158, 100 - 32 + 102);
sum1[4] = numArray[6] + numArray[7] + numArray[8];
text(str(sum1[4]), 158 - 35, 100 - 32 + 102);
sum1[5] = numArray[3] + numArray[4] + numArray[5];
text(str(sum1[5]), 158 - 70, 100 - 32 + 102);
sum1[6] = numArray[0] + numArray[1] + numArray[2];
text(str(sum1[6]), 158 - 98, 100 - 32 + 102);
sum1[7] = numArray[0] + numArray[1] + numArray[2];
text(str(sum1[7]), 158 - 98, 100 - 32 + 102);
sum1[8] = numArray[6] + numArray[4] + numArray[2];
text(str(sum1[8]), 158 - 128, 100 - 32 + 102);
sum1[9] = 0
for (i = 0; i < 9; i++) {
sum1[9] = numArray[i] + sum1[9];
}
if (sum1[0] == sum1[1] && sum1[1] == sum1[2] && sum1[2] == sum1[3] && sum1[3] == sum1[4] && sum1[4] == sum1[5] && sum1[5] == sum1[6] && sum1[6] == sum1[7] && sum1[7] == sum1[8] && sum1[9] == 45) {
solved = 1;
}
if (sum1[0] != sum1[1] || sum1[1] != sum1[2] || sum1[2] != sum1[3] || sum1[3] != sum1[4] || sum1[4] != sum1[5] || sum1[5] != sum1[6] || sum1[6] != sum1[7] || sum1[7] != sum1[8] || sum1[9] != 45) {
solved = 0;
}
}
function fillC(c) {
if (numArray[c] == 1) {
fill(252, 61, 61)
}
if (numArray[c] == 2) {
fill(255, 148, 61)
}
if (numArray[c] == 3) {
fill(252, 223, 58)
}
if (numArray[c] == 4) {
fill(154, 255, 59)
}
if (numArray[c] == 5) {
fill(59, 255, 232)
}
if (numArray[c] == 6) {
fill(77, 157, 255)
}
if (numArray[c] == 7) {
fill(175, 125, 250)
}
if (numArray[c] == 8) {
fill(240, 146, 252)
}
if (numArray[c] == 9) {
fill(171, 171, 171)
}
}
function makeTransform() {
stroke(0);
fill(0);
text('Reflect y-axis', 300, 50)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 300 - (i % 3) * w - 3 / 2 * w;
y = 50 + j * w - 3 / 2 * w;
fillC(c);
rect(x, y, w, w);
fill(0);
c = c + 1;
}
}
text('Reflect x-axis', 300, 120)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 267 + (i % 3) * w - 3 / 2 * w;
y = 150 - j * w - 3 / 2 * w;
fillC(c);
rect(x, y, w, w);
fill(0);
c = c + 1;
}
}
text('Reflect x and y', 300, 190)
text('Rotate 180', 300, 205)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 300 - (i % 3) * w - 3 / 2 * w;
y = 220 - j * w - 3 / 2 * w;
fillC(c);
rect(x, y, w, w);
fill(0);
c = c + 1;
}
}
text('Reflect over y=x', 300, 260)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 290 - (i % 3) * w - 3 / 2 * w;
y = 300 - j * w - 3 / 2 * w;
fillC(c);
rect(y, x, w, w);
fill(0);
c = c + 1;
}
}
text('Reflect over y=-x', 300, 330)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 330 + (i % 3) * w - 3 / 2 * w;
y = 267 + j * w - 3 / 2 * w;
fillC(c);
rect(y, x, w, w);
c = c + 1;
fill(0)
}
}
text('Rotate 90CW', 10, 210)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 240 + (i % 3) * w - 3 / 2 * w;
y = 80 - j * w - 3 / 2 * w;
fillC(c);
rect(y, x, w, w);
fill(0)
c = c + 1;
}
}
text('Rotate -90CW', 10, 287)
j = 0;
w = (width - 350) / n;
c = 0;
for (i = 0; i < 3; i++) {
for (j = 0; j < 3; j++) {
x = 350 - (i % 3) * w - 3 / 2 * w;
y = 46 + j * w - 3 / 2 * w;
fillC(c);
rect(y, x, w, w);
c = c + 1;
fill(0);
}
}
}
