let numCircles = 7; // Includes Invisible Integral

let maxRadius;

let centerStage = 0;

let expansionSpeed = 0.005;

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

let stageColors;

let lineLabels = ["Cognitive", "Emotional", "Spiritual", "Interpersonal", "Moral", "Aesthetic", "Self-Identity", "Values"];

let maxLines = lineLabels.length;

let angleOffset;

let growthRates = [];

let frozen = false;

let fadeAlpha = 255;

let fadeOutStarted = false;

let fadeTimer = 0;

let startTime;

let freezeDuration = 10000;

​

// Unique sub-labels for each developmental line

let lineSubLabels = {

  "Cognitive": ["Sensorimotor", "Preoperational", "Concrete Operational", "Formal Operational", "Metasystemic", "Paradigmatic", "Metaparadigmatic"],

  "Emotional": ["Reactivity", "Protoemotional", "Relational", "Social", "Universal", "Integrated"],

  "Spiritual": ["Primal", "Intuitive", "Mythic-Literal", "Synthetic-Conventional", "Individuative-Reflective", "Conjunctive", "Universalizing"],

  "Interpersonal": ["Trust/Mistrust", "Autonomy/Shame", "Initiative/Guilt", "Industry/Inferiority", "Identity/Role", "Integrity/Despair"],

  "Moral": ["Undifferentiated", "Hedonistic", "Preconventional", "Conventional", "Postconventional", "Universal", "Integrated"],

  "Aesthetic": ["Sensorimotor", "Experiential", "Skill Development", "Conventional", "Reflective", "Critical", "Creative/Personal"],

  "Self-Identity": ["Symbiotic", "Impulsive", "Self-centric", "Group-centric", "Self-determining", "Self-questioning", "Self-actualizing"],

  "Values": ["Survivalistic", "Magic-Animistic", "Egocentric", "Absolutistic", "Multiplistic", "Relativistic", "Systemic"]

};

​

function setup() {

  createCanvas(600, 600);

  maxRadius = width / 2 - 20;

  angleOffset = -PI / 4;

​

  stageColors = [

    color(98, 0, 0),

    color(255, 0, 255),

    color(255, 0, 0),

    color(255, 165, 0),

    color(255, 102, 0),

    color(0, 255, 0),

    color(0, 128, 128)

  ];

  restartSimulation();

}

​

function restartSimulation() {

  lines = [];

  frozen = false;

  fadeAlpha = 255;

  fadeOutStarted = false;

  fadeTimer = 0;

  centerStage = 0;

  startTime = millis();

​

  growthRates = [];

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

    let rate = random(0.5, 1.2);

    growthRates.push(rate);

  }

  growthRates[0] = max(growthRates) * 1.5;

​

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

    lines.push(new DevelopmentLine(angleOffset + (i * TWO_PI / maxLines), growthRates[i], lineLabels[i]));

  }

}

​

function draw() {

  background(0, fadeAlpha);

  drawConcentricCircles();

  drawLabels();

​

  let elapsedTime = millis() - startTime;

​

  if (!frozen) {

    if (centerStage < numCircles - 1) {

      centerStage += expansionSpeed;

    }

    for (let line of lines) {

      line.update();

    }

    if (elapsedTime > freezeDuration && !fadeOutStarted) {

      frozen = true;

      fadeOutStarted = true;

      fadeTimer = millis();

    }

  }

​

  for (let line of lines) {

    line.display();

  }

​

  if (fadeOutStarted) {

    let fadeElapsed = millis() - fadeTimer;

    if (fadeElapsed > 2000) {

      fadeAlpha -= 3;

    }

    if (fadeAlpha <= 0) {

      restartSimulation();

    }

  }

}

​

function drawConcentricCircles() {

  noFill();

  stroke(100, 100, 255, fadeAlpha * 0.5);

  strokeWeight(1.5);

​

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

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

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

  }

}

​

function drawLabels() {

  textAlign(CENTER, CENTER);

  textSize(16);

  textStyle(BOLD);

  fill(100, 100, 255, fadeAlpha);

​

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

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

    let labelY = height / 2 - radius + 20;

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

  }

}

​

class DevelopmentLine {

  constructor(angle, growthRate, label) {

    this.angle = angle;

    this.length = 0;

    this.growthRate = growthRate;

    this.label = label;

    this.points = [];

  }

​

  update() {

    if (!frozen && this.length < maxRadius * 1.2) {

        this.length += this.growthRate;

​

        let noiseFactor = noise(this.length * 0.005, this.angle * 0.005); // Smoother noise scaling

        let angleVariation = map(noiseFactor, 0.3, 0.7, -PI / 16, PI / 16); // Smaller and smoother range

​

        // Introduce gentle oscillations instead of bursts

        let waveFactor = sin(this.length * 0.005) * PI / 32; // Subtle oscillation

​

        let currentAngle = this.angle + angleVariation + waveFactor;

​

        // Calculate new position with smooth flow

        let x = width / 2 + cos(currentAngle) * this.length;

        let y = height / 2 + sin(currentAngle) * this.length;

        let stage = floor(map(this.length, 0, maxRadius * 1.2, 0, numCircles));

​

        stage = constrain(stage, 0, numCircles - 1);

        this.points.push({ x, y, stage, length: this.length });

    }

}

​

  display() {

    noFill();

    strokeWeight(3);

​

    for (let i = 1; i < this.points.length; i++) {

      let prev = this.points[i - 1];

      let curr = this.points[i];

​

      let stageIndex = curr.stage;

      let nextStageIndex = min(stageIndex + 1, stageColors.length - 1);

      let transitionFactor = map(curr.length, stageIndex * maxRadius / numCircles, (stageIndex + 1) * maxRadius / numCircles, 0, 1);

      let blendedColor = lerpColor(stageColors[stageIndex], stageColors[nextStageIndex], transitionFactor);

​

      stroke(blendedColor.levels[0], blendedColor.levels[1], blendedColor.levels[2], fadeAlpha);

      line(prev.x, prev.y, curr.x, curr.y);

    }

​

   if (this.points.length > 2) {

    let lastStage = this.points[this.points.length - 1].stage;

    let subLabels = lineSubLabels[this.label] || [];

    let subLabel = subLabels[lastStage] || "";

​

    let labelX = this.points[this.points.length - 1].x;

    let labelY = this.points[this.points.length - 1].y;

​

    fill(255, fadeAlpha);

    noStroke();

    textSize(14);

    textAlign(CENTER);

​

    // Draw primary label slightly above the point

    text(this.label, labelX, labelY - 10); 

​

    // Draw sub-label directly below, smaller for better readability

    textSize(12); 

    text(subLabel, labelX, labelY + 8); 

}

​

  }

}