let canvasHeight = 400;

let grid = canvasWidth / 10;

let baseRotationSpeed = 0.01;

let fastRotationSpeed = 0.1;

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  angleMode(DEGREES);

  colorMode(HSB); // Use HSB color mode to assign different hues

}

​

function draw() {

  background(255);

  noStroke();

​

  translate(width / 2, height / 2);

​

  let dotSpace = 10;

  let radiusStep = 40;

  let circleCount = 5;

  let timeOffset = frameCount * 0.01;

​

  let rotationSpeed; // Declare the variable

  if (mouseIsPressed) {

    rotationSpeed = fastRotationSpeed; 

  } else {

    rotationSpeed = baseRotationSpeed; 

  }

  // Loop through each circle

  for (let j = 1; j <= circleCount; j++) {

    let radius = j * radiusStep; // Increase radius for each circle

​

    // Alternate direction for even and odd circles

    if (j % 2 == 0) {

      rotate(frameCount * rotationSpeed); // Clockwise rotation

    } else {

      rotate(-frameCount * rotationSpeed); // Counterclockwise rotation

    }

​

    // Draw dots on the current circle

    for (let i = 0; i < 360; i += dotSpace) {

      let x = radius * cos(i); // X position using cosine

      let y = radius * sin(i); // Y position using sine

​

      let noiseVal = noise(x * 0.05, y * 0.05, timeOffset);

​

      let ellipseSize = map(noiseVal, 0, 1, 5, 20);

​

      let hue = map(i, 0, 360, 0, 360); // Map the angle to a hue value from 0 to 360

      fill(hue, 100, 100); // Set fill color using  HSB mode

​

      ellipse(x, y, ellipseSize); // Draw each dot with varying size and unique color

    }

​

    // Reset the rotation before moving to the next circle

    rotate(-frameCount * rotationSpeed);

  }

}

​