let lastSpawnTime = 0;

let spawnInterval = 2000; // 2 seconds

let maxMandalas = 5;

let angleX = 0;

let angleY = 0;

let zoom = -500;

let zoomIncrement = 3;

let zoomfactor = 1;

​

function setup() {

    createCanvas(windowWidth, windowHeight,WEBGL);

  colorMode(HSB, 255);

  noFill();

  initializeMandalas(1);

}

​

function draw() {

  background(0);

  print(zoom);

​

  //zoomIncrement = map(sin(frameCount), -1, 1, 1, 5);  // Mapping zoomIncrement to sinusoidal wave

  zoom += zoomIncrement*zoomfactor;

 if (zoom > -4000 || zoom < -5000) 

    zoomfactor = 1.2;

  else

    zoomfactor = 1;

  // Looping behavior

  if (zoom > -400 || zoom < -5000) 

    zoomIncrement = zoomIncrement*-1;   // Adjust these values as necessary for your desired zoom loop range

  translate(0, 0, zoom);

  rotateY(angleY); // Rotate the whole scene around Y-axis based on mouse position

  rotateX(angleX); // Rotate the whole scene around X-axis based on mouse position

​

  mandalas.forEach(mandala => {

    mandala.update();

    mandala.display();

  });

​

  if (millis() - lastSpawnTime > spawnInterval && mandalas.length < maxMandalas) {

    createNewMandala(0, 0);

    lastSpawnTime = millis();

  }

}

​

function mousePressed() {

  createNewMandala(0, 0);

}

​

function mouseDragged() {

  angleY = map(mouseX, 0, width, -PI, PI); // Maps mouseX to a range of -PI to PI for rotation around Y

  angleX = map(mouseY, 0, height, -PI, PI); // Maps mouseY to a range of -PI to PI for rotation around X

}

​

function initializeMandalas(count) {

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

    createNewMandala(0, 0);

  }

}

function createNewMandala(x, y) {

  let mandalaRadius = random(50, 200);

  let layerCount = int(random(50, 100));

  let rotationSpeed = random(0.005, 0.02);

  mandalas.push(new Mandala(x, y, mandalaRadius, layerCount, rotationSpeed));

}

​

class Mandala {

  constructor(x, y, radius, numLayers, speed) {

    this.x = x;

    this.y = y;

    this.radius = radius;

    this.numLayers = numLayers;

    this.speed = speed;

    this.rotationAngle = 0;

    this.baseColor = random(255);

    this.alpha = 0;                  // Initialize the alpha to 0

    this.fadeInSpeed = 10;         // Speed of fading in

  }

​

  update() {

    this.rotationAngle += this.speed;

    this.alpha = constrain(this.alpha + this.fadeInSpeed, 0, 255); // Increase alpha gradually

  }

​

  display() {

    push();

    translate(this.x, this.y);

    rotateZ(this.rotationAngle);

    this.drawLayers();

    pop();

  }

​

  drawLayers() {

    for (let i = 0; i < this.numLayers; i++) {

      this.drawLayer(i);

    }

  }

​

  drawLayer(layerIndex) {

    let layerRadius = this.calculateLayerRadius(layerIndex);

    let numPoints = this.calculateNumPoints(layerIndex);

    let layerSpacing = this.calculateLayerSpacing();

    let layerColor = this.calculateLayerColor(layerIndex);

​

    stroke((this.baseColor + layerColor) % 255, 150, this.alpha);  // Use the alpha value for opacity

    beginShape();

​

    for (let j = 0; j < numPoints; j++) {

      let angle = TWO_PI / numPoints * j;

      let x = layerRadius * cos(angle);

      let y = layerRadius * sin(angle);

      let z = layerSpacing * layerIndex;

      vertex(x, y, z);

    }

​

    endShape(CLOSE);

    translate(0, 0, layerSpacing);

  }

​

  calculateLayerRadius(layerIndex) {

    return this.radius * ((layerIndex + 1) / this.numLayers);

  }

​

  calculateNumPoints(layerIndex) {

    return int(map(layerIndex, 0, this.numLayers - 1, 2, 12));

  }

​

  calculateLayerSpacing() {

    return map(sin(frameCount/10) * 0.08, -1, 1, 5, 30);

  }

​

  calculateLayerColor(layerIndex) {

    return 0;

    // return map(layerIndex, 0, this.numLayers - 1, 100, 255);

  }

}

​