let bigRadius = 300; 
let smallRadius = 120; 
let distance = 150; 
let numRotations = 10; 
let layers = 5; 
let colorGradient = [];

function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  strokeWeight(1);
  
  
  generateGradient('#0033FF', '#00FFFF', layers);
  
  translate(width / 2, height / 2); 
  
  for (let layer = 0; layer < layers; layer++) {
    let offsetAngle = (layer * PI) / layers; 
    stroke(colorGradient[layer]);
    drawSpirograph(bigRadius, smallRadius - layer * 20, distance - layer * 10, offsetAngle);
  }
}

function drawSpirograph(R, r, d, phase) {
  beginShape();
  let numPoints = 500; 
  for (let t = 0; t < TWO_PI * numRotations; t += TWO_PI / numPoints) {
    let x = (R - r) * cos(t + phase) + d * cos(((R - r) / r) * (t + phase));
    let y = (R - r) * sin(t + phase) - d * sin(((R - r) / r) * (t + phase));
    vertex(x, y);
  }
  endShape(CLOSE);
}


function generateGradient(startColor, endColor, steps) {
  colorGradient = [];
  let start = color(startColor);
  let end = color(endColor);
  for (let i = 0; i < steps; i++) {
    let inter = lerpColor(start, end, i / (steps - 1));
    colorGradient.push(inter);
  }
}

    
   
    
   
    
    
