let rectAngle=0;

let spacing = 20;

let minRadius = 10;

let maxRadius = 100;

let numCircles = 5;

let loopRunning = true;

​

function setup() 

{

  createCanvas(400, 400);

  background(0);

  noFill();

  stroke(0);

  colorList=[]

}

​

function draw() 

{

//   textSize(15);

//   fill(0)

//   stroke(0)

//   rect(10,10,100,60)

//   fill(255)

//   text("MouseX: " + mouseX, 20, 20);

//   text("MouseY: " + mouseY, 20, 40);

  noFill()

  // Pick a random color from colorList

    colorList,maxRadius,spacing,numCircles,minRadius=checkPosition()

    let randomColor = color(random(colorList));

    // console.log(randomColor)

    stroke(randomColor);

    makeArt(maxRadius,spacing,numCircles,minRadius)

​

function checkPosition()

  {

    bigColorList=[

      [[247, 8, 69],[248, 35, 89],[249, 62, 110],[250, 90, 131],[251, 145, 172],[253, 200, 214]], //color0

        [[143, 87, 225],[157, 108, 228],[185, 150, 236],[199, 171, 240],[241, 234, 251]], //color1

      [[8, 236, 255],[110, 242, 255],[159, 247, 255],[207, 251, 255]],//color3

    [[65, 134, 38],[79, 163, 47],[94, 193, 55],[138, 213, 109],[162, 222, 138],[185, 230, 168]],//color2

      [[248, 194, 35],[250, 209, 90],[251, 217, 117],[254, 247, 227]]

    ]; //color4

​

  if (

    (mouseX < width / 2 + 40 && mouseX > width / 2 - 40) &&

    (mouseY < height / 2 + 40 && mouseY > height / 2 - 40)

  ) {

    colorList = bigColorList[2];

    maxRadius = 50;

    spacing = 80;

    numCircles = 5;

    minRadius = 30;

  } else if (

    (mouseX < width / 2 - 40 || mouseX > width / 2 + 40) &&

    (mouseY < height / 2 - 40 || mouseY > height / 2 + 40)

  ) {

    colorList = bigColorList[1];

    maxRadius = 70;

    spacing = 130;

    numCircles = 5;

    minRadius = 10;

  } 

    else if (

    (mouseX < width / 2 && mouseY >= height / 2)

  ) {

    colorList = bigColorList[4]; // Set color to color 4

    // Set the desired values for maxRadius, spacing, numCircles, and minRadius

    maxRadius = 70;

    spacing = 160;

    numCircles = 5;

    minRadius = 5;

  }

    else {

    colorList = bigColorList[3];

    minRadius = 20;

    maxRadius = 70;

    spacing = 180;

    numCircles = 5;

  }

      // console.log(colorList)

      return colorList,maxRadius,spacing,numCircles,minRadius;

    }

​

function makeArt(maxRadius,spacing,numCircles,minRadius)

  {

        translate(width / 2, height / 2);

​

  for (let i = 0; i < numCircles; i++) {

    let x = cos(angle) * spacing * i;

    let y = sin(angle) * spacing * i;

    let radius = map(i, 0, numCircles, minRadius, maxRadius);

    let outerRadius = maxRadius*1.25;

  rectMode(CENTER);

  // stroke(255);

  rotate(angle);

  rect(0, 0, outerRadius * 2, outerRadius * 2);

    // rect(outerRadius, outerRadius, outerRadius*2, outerRadius*2 );

    push();

    translate(x, y);

    rotate(-rectAngle);

    ellipse(0, 0, radius);

    pop();

  }

​

  angle += 0.01;

  rectAngle += 0.31;

​

  // if (angle >= TWO_PI) {

  //   // loopRunning = false;

  //   noLoop();

    if (keyIsPressed && key === 's') {

    // // Save the canvas as an image when 's' key is pressed

    // saveCanvas('my_drawing', 'png');

    noLoop(); // Stop the loop after saving

  }

  }

 // loop()

​

​

  }

​