let numCircles = 7; // Includes Invisible Integral

let maxRadius;

let centerStage = 0; // Start at the innermost stage

let expansionSpeed = 0.008; // Controls outward movement speed

let trickleExponent = 3; // Adjust this to slow down the trickle (higher = slower)

let maxParticles = 400; // Increased max to accommodate balanced density

​

let resetting = false; // Tracks if fade-out is happening

let fadeOutTimer = 300; // **Slower fade before restart**

let integralThreshold = 50; // Number of teal dots before restart

​

let stageLabels = ["Archaic", "Magic", "Heroic", "Mythic", "Rational", "Pluralistic", "Integral"];

let stageColors = [

  [98, 0, 0],   // Crimson (Archaic)

  [255, 0, 255], // Magenta (Magic)

  [255, 0, 0],   // Red (Heroic)

  [255, 165, 0], // Amber (Mythic)

  [255, 102, 0], // Orange (Rational)

  [0, 255, 0],   // Green (Pluralistic)

  [0, 128, 128]  // Teal (Integral - Outside the circles)

];

​

let stageDensityRatios = [10, 30, 50, 70, 90, 110, 130]; // Dot density ratios

​

function setup() {

  createCanvas(600, 600);

  maxRadius = width / 2 - 20;

}

​

function draw() {

  // Handle fade-out and restart

  if (resetting) {

    fadeOutTimer--;

    background(0, map(fadeOutTimer, 0, 300, 0, 80)); // **Slower fade-out**

    if (fadeOutTimer <= 0) {

      restartAnimation();

    }

  } else {

    background(0, 80); // Increased opacity for brighter circles

  }

​

  // Draw concentric circles (excluding Integral)

  drawConcentricCircles();

​

  // Progressively unlock stages

  if (centerStage < numCircles - 1) {

    centerStage += expansionSpeed;

  }

​

  // Track Integral dots

  let integralCount = particles.filter(p => p.stage === numCircles - 1).length;

  if (integralCount >= integralThreshold) {

    resetting = true; // Trigger fade-out if too many teal dots

  }

​

  // Calculate number of particles per stage

  let totalParticles = map(centerStage, 0, numCircles, 50, maxParticles);

​

  // Only add new particles gradually, instead of front-loading

  if (frameCount % 5 === 0) { // **Slows down initial spawning**

    particles.push(new Particle());

  }

​

  // Update and display particles

  for (let i = particles.length - 1; i >= 0; i--) {

    particles[i].update();

    particles[i].display();

​

    if (particles[i].lifespan <= 0) {

      particles.splice(i, 1);

    }

  }

​

  // Draw labels

  drawLabels();

}

​

// Restart function

function restartAnimation() {

  particles = [];

  centerStage = 0;

  resetting = false;

  fadeOutTimer = 300;

}

​

// Function to draw concentric circles

function drawConcentricCircles() {

  noFill();

  stroke(100, 100, 255, 150); // Increased brightness

  strokeWeight(2.0); // Slightly thicker circles

​

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

    let radius = ((i + 1) / (numCircles - 1)) * maxRadius;

    ellipse(width / 2, height / 2, radius * 2, radius * 2);

  }

}

​

// Function to draw labels

function drawLabels() {

  textAlign(CENTER, CENTER);

  textSize(16);

  textStyle(BOLD);

​

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

    let radius = ((i + 1) / (numCircles - 1)) * maxRadius;

    let labelY = height / 2 - radius + 25; // Shift labels **down** slightly

​

    // **Calculate text width dynamically**

    let labelWidth = textWidth(stageLabels[i]) + 10; // Add padding

    let labelHeight = 20; // Fixed height

​

    // **Draw black rectangle behind text**

    fill(0, 180); // Semi-transparent black

    noStroke();

    rectMode(CENTER);

    rect(width / 2, labelY, labelWidth, labelHeight, 5); // Rounded corners

​

    // **Draw blue text on top**

    fill(100, 100, 255);

    noStroke();

    text(stageLabels[i], width / 2, labelY);

  }

}

​

// Particle class

class Particle {

  constructor() {

    this.reset();

  }

​

  reset() {

    let stageProbabilities = this.getStageProbabilities();

    this.stage = this.chooseStage(stageProbabilities);

    let angle = random(TWO_PI);

    let radius;

​

    if (this.stage < numCircles - 1) {

      radius = random(this.stage * (maxRadius / (numCircles - 1)), (this.stage + 1) * (maxRadius / (numCircles - 1)));

    } else {

      radius = random(maxRadius * 1.1, maxRadius * 1.4);

    }

​

    this.x = width / 2 + cos(angle) * radius;

    this.y = width / 2 + sin(angle) * radius;

    this.lifespan = random(120, 200);

  }

​

  getStageProbabilities() {

    let stageProbabilities = Array(numCircles).fill(0);

    let currentStage = floor(centerStage);

    let totalRatio = stageDensityRatios.slice(0, currentStage + 1).reduce((a, b) => a + b, 0);

​

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

      let trickleFactor = pow(map(centerStage, i - 1, i, 0, 1, true), trickleExponent);

      stageProbabilities[i] = (stageDensityRatios[i] / totalRatio) * trickleFactor;

    }

​

    if (currentStage + 1 < numCircles - 1) {

      stageProbabilities[currentStage + 1] = 0.05;

    }

​

    // **Archaic Now Starts at Zero & Gradually Increases**

    if (currentStage === 0) {

      stageProbabilities[0] = pow(map(centerStage, 0.1, 0.5, 0, 1, true), trickleExponent);

    }

​

    // **Ensure Magic starts at zero & activates only when Archaic is strong**

    if (currentStage < 1) {

      stageProbabilities[1] = 0;

    }

​

    let integralUnlock = map(centerStage, numCircles - 2, numCircles, 0, 0.5, true);

    stageProbabilities[numCircles - 1] = constrain(integralUnlock, 0, 0.5);

​

    return stageProbabilities;

  }

​

  chooseStage(stageProbabilities) {

    let r = random();

    let cumulative = 0;

​

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

      cumulative += stageProbabilities[i];

      if (r < cumulative) return i;

    }

​

    return 0;

  }

​

  update() {

    this.lifespan--;

    if (this.lifespan <= 0) {

      this.reset();

    }

  }

​

  display() {

    noStroke();

    let c = stageColors[this.stage] || [255, 255, 255];

    fill(c[0], c[1], c[2], map(this.lifespan, 0, 200, 0, 255));

    ellipse(this.x, this.y, 6, 6);

  }

}

​