let numTurns = 10; // Anzahl der Umdrehungen

let maxPoints = 1000; // Maximale Anzahl der Punkte entlang der Spirale

let spacing = 1; // Abstand zwischen den Windungen

let angleOffset = 0;

let buildTime = 5000; // Zeit in Millisekunden für den Aufbau und Abbau der Spirale

let startTime;

let isBuilding = false; // Variable, um den Aufbau oder Abbau der Spirale zu steuern

​

function setup() {

  createCanvas(600, 600);

  background(255);

  noFill();

  centerX = width / 2;

  centerY = height / 2;

  startTime = millis(); // Startzeit initialisieren

  // Füge einen Eventlistener hinzu, um auf Mausklicks zu reagieren

  canvas.addEventListener('click', toggleBuilding);

}

​

function draw() {

  let currentTime = millis() - startTime;

  if (isBuilding || currentTime < buildTime) {

    background(255); // Hintergrundfarbe auf Weiß setzen

    // Berechne den Fortschritt des Aufbaus und Abbaus der Spirale

    let progress = map(currentTime % (2 * buildTime), 0, buildTime, 0, 1);

    // Berechne die Anzahl der Punkte basierend auf dem Fortschritt

    let numPoints;

    if (progress < 1) {

      numPoints = int(progress * maxPoints); // Aufbau der Spirale

    } else {

      numPoints = int((1 - (progress - 1)) * maxPoints); // Abbau der Spirale

    }

    // Beginne das Zeichnen der Spirale

    beginShape();

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

      // Berechne die Position des aktuellen Punktes entlang der Spirale

      let t = map(i, 0, numPoints, 0, numTurns * TWO_PI);

      let x = centerX + t * spacing * cos(t + angleOffset);

      let y = centerY + t * spacing * sin(t + angleOffset);

      // Füge den Punkt zur Spirale hinzu

      vertex(x, y);

    }

    endShape(); // Beende das Zeichnen der Spirale

    angleOffset += 0.01; // Änderung des Drehwinkels

  }

}

​

// Funktion zum Umschalten zwischen Aufbau und Abbau der Spirale bei Mausklick

function toggleBuilding() {

  isBuilding = !isBuilding;

  startTime = millis(); // Starte den Timer neu

}