//requires p5.js

//Color variables
backgroundColor = "#7C7A7A";
let shapeColor1
illusionColor1 = "#7C7A7A";
shapeColors = ["#BD159B", "#00FF71", "#0CC0CE"];

//Size variables
const nCircle = 9;
const nInnerSquare = 21;
const nCornerSquare = 15;
diameter = 0;
radiusIncrement = 7;

//Rotation variables
let r1 = 0;
let r2 = 0;
let r3 = 0;
let r4 = 0;
let r5 = 0;
let r6 = 0;


//Draw Shape functions
function fourSquares() {
 
    for (i = nInnerSquare; i > 0; i--) {
    
    diameter = i*radiusIncrement;
      shapeColor1 = shapeColors[i%3];

  push();
    translate(200,200)
    rotate(r1)
    rectMode(CENTER);
    stroke(shapeColor1);
    fill(shapeColor1);
    rect(100, 100, diameter);
    rect(-100, -100, diameter);
    rect(-100, 100, diameter);
    rect(100, -100, diameter);
  pop();
}}

function bigCircle() {
  push();
    translate(200,200)
    rotate(r2)
    stroke(illusionColor1);
    fill(illusionColor1);
    ellipse(0, 0, 300);
  pop()
}

function innerFourCircles() {
  
    for (i = nCircle; i > 0; i--) {
    
    diameter = i*radiusIncrement;
      shapeColor1 = shapeColors[i%3];
  
  push();
    translate(200,200)
    rotate(r3)
    stroke(shapeColor1);
    fill(shapeColor1);
    ellipse(50, 50, diameter);
    ellipse(-50, 50, diameter);
    ellipse(50, -50, diameter);
    ellipse(-50, -50, diameter);
  pop()
}}

function centerSquare() {
  
  push();
    translate(200,200);
    rotate(r4);
    rectMode(CENTER);
    stroke(illusionColor1);
    fill(illusionColor1);
    rect(0, 0, 100);
  pop(); 
}

function outerFourCircles() {
  
  push();
    translate(200,200);
    rotate(r5);
    stroke(illusionColor1);
    fill(illusionColor1);
    ellipse(145, 145, 75);
    ellipse(-145, 145, 75);
    ellipse(145, -145, 75);
    ellipse(-145, -145, 75);
  pop()
}

function cornerSquares() {  
  
    for (i = nCornerSquare; i > 0; i--) {
    
    diameter = i*radiusIncrement;
      shapeColor1 = shapeColors[i%3];
  
  push()
    translate(200,200);
    rotate(r6);
    stroke(shapeColor1);
    fill(shapeColor1);
    rectMode(CENTER);
    rect(200,200, diameter);
    rect(-200,200, diameter);
    rect(200,-200, diameter);
    rect(-200,-200, diameter);
  pop()
}}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  
  background(backgroundColor);

  //Shape functions
  fourSquares();
  bigCircle();
  innerFourCircles();
  centerSquare();
  outerFourCircles();
  cornerSquares();
  
  //fourSquares();
  r1 -= 0.01;
  //bigCircle();
  r2 += 0.02;
  //innerFourCircles();
  r3 += r4 -= 0.001;
  //centerSquare();
  r4 += 0.05;
  //outerFourCircles();
  r5 -= 0.005;
  //cornerSquares();
  r6 += 0.006;
  
 
  // //top right x,y coords
  // fill("#000000");
  // noStroke();
  // textSize(12);
  // text(`${mouseX}, ${mouseY}`, 0, 10);
}