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 mousePos = { x: 0, y: 0 }; // Speichert die aktuelle Mausposition

let targetPos = { x: 0, y: 0 }; // Speichert die Zielposition der Spirale

let easing = 0.05; // Verzögerungsfaktor für die Verfolgung

​

function setup() {

  createCanvas(600, 600);

  background(255);

  noFill();

  centerX = width / 2;

  centerY = height / 2;

  // Füge einen Eventlistener hinzu, um die Mausbewegung zu verfolgen

  canvas.addEventListener('mousemove', updateMousePos);

}

​

function draw() {

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

  // Berechne die neue Zielposition mit Verzögerung

  targetPos.x += (mousePos.x - targetPos.x) * easing;

  targetPos.y += (mousePos.y - targetPos.y) * easing;

  // Berechne die Richtung vom aktuellen Mittelpunkt zur Zielposition

  let dirX = targetPos.x - centerX;

  let dirY = targetPos.y - centerY;

  // Aktualisiere den Mittelpunkt basierend auf der Richtung und dem Verzögerungsfaktor

  centerX += dirX * easing;

  centerY += dirY * easing;

  // Beginne das Zeichnen der Spirale

  beginShape();

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

    // Berechne die Position des aktuellen Punktes entlang der Spirale

    let t = map(i, 0, maxPoints, 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 Aktualisieren der Mausposition

function updateMousePos(event) {

  // Setze die aktuelle Mausposition entsprechend der Ereignisdaten

  mousePos.x = event.clientX;

  mousePos.y = event.clientY;

}