Spiralen mit p5.js

Grundlagen der Spiralen

Bevor wir in die Details der Codierung eintauchen, werfen wir einen Blick auf die Grundlagen der Spiralen. Spiralen sind gekrümmte Linien, die sich um einen festen Punkt herum winden und sich mit zunehmendem Abstand vom Punkt immer weiter nach außen bewegen. Es gibt verschiedene Arten von Spiralen, darunter logarithmische Spiralen, Archimedische Spiralen und Fibonacci-Spiralen. Jede Art hat ihre eigene einzigartige mathematische Formel, die ihre Gestalt bestimmt.

• 
• 
• 

logarithmische Spirale - archimedische Spirale - Fibonacci Spirale

---

Erstellung einer einfachen archimedische Spirale

Um eine Spirale zu erstellen, verwenden wir eine Programmiersprache namens JavaScript in Verbindung mit der p5.js-Bibliothek, die uns dabei hilft, interaktive Grafiken zu erstellen. In unserem Beispielcode verwenden wir p5.js, um eine animierte Spirale zu zeichnen.

Zuerst definieren wir einige wichtige Variablen:

• centerX und centerY geben die Koordinaten des Mittelpunkts unserer Zeichenfläche an.

• numTurns bestimmt, wie oft sich die Spirale um sich selbst dreht.

• spacing legt den Abstand zwischen den einzelnen Windungen der Spirale fest.

let centerX, centerY;
let numTurns = 10; // Anzahl der Umdrehungen
let spacing = 1; // Abstand zwischen den Windungen

In der setup() Funktion initialisieren wir unsere Zeichenfläche mit einer Größe von 600x600 Pixel und berechnen den Mittelpunkt der Zeichenfläche mit centerX als x-Koordinate und centerY als Y-Koordinate.

function setup() {
  createCanvas(600, 600); // Erstellt eine Zeichenfläche
  centerX = width / 2; // X-Koordinate des Mittelpunkts der Zeichenfläche
  centerY = height / 2; // Y-Koordinate des Mittelpunkts der Zeichenfläche
  drawSpiral(); // Zeichnet die Spirale
}

Die drawSpiral() Funktion zeichnet die Spirale:

• Wir beginnen mit dem Zeichnen der Spirale mit beginShape().

• Mit einer Schleife durchlaufen wir einen Bereich von 0 bis zu numTurns * TWO_PI.

  
  In dieser Schleife durchläuft t den Wertebereich von 0 bis zu numTurns * TWO_PI. TWO_PI entspricht einem Vollkreis, also wenn numTurns 10 ist, würde die Schleife 10 Umdrehungen der Spirale durchlaufen.

  Bei jedem Durchlauf der Schleife berechnen wir die x- und y-Koordinaten des aktuellen Punktes entlang der Spirale. Diese Berechnung erfolgt durch Umrechnung von Polarkoordinaten (t als Winkel und t als Radius) in kartesische Koordinaten.

  Dann fügen wir den berechneten Punkt mit vertex(x, y) zur Spirale hinzu.

  Durch die Schleife werden viele solcher Punkte erzeugt, die dann durch Linien verbunden werden, um die Spirale zu erstellen.

  Die Schrittweite 0.01 in der Schleife steuert die Genauigkeit der Spirale. Je kleiner die Schrittweite, desto glatter wird die Spirale, aber auch langsamer das Rendering. Du kannst damit experimentieren, um das gewünschte Aussehen zu erzielen.

• Schließlich beenden wir das Zeichnen der Spirale mit endShape()

function drawSpiral() {
  // Beginne das Zeichnen der Spirale
  beginShape();
  for (let t = 0; t < numTurns * TWO_PI; t += 0.01) {
    // Berechne die Position des aktuellen Punktes entlang der Spirale
    let x = centerX + t * spacing * cos(t);
    let y = centerY + t * spacing * sin(t);
    
    // Füge den Punkt zur Spirale hinzu
    vertex(x, y);
  }
  endShape(); // Beende das Zeichnen der Spirale
}

Das ist der Zusammengefügter Code mit dem die Spirale entsteht.

zur p5* Umgebung

let centerX, centerY;
let numTurns = 10; // Anzahl der Umdrehungen
let spacing = 1; // Abstand zwischen den Windungen

function setup() {
  createCanvas(600, 600); // Erstellt eine Zeichenfläche
  centerX = width / 2; // X-Koordinate des Mittelpunkts der Zeichenfläche
  centerY = height / 2; // Y-Koordinate des Mittelpunkts der Zeichenfläche
  drawSpiral(); // Zeichnet die Spirale
}

function drawSpiral() {
  // Beginne das Zeichnen der Spirale
  beginShape();
  for (let t = 0; t < numTurns * TWO_PI; t += 0.01) {
    // Berechne die Position des aktuellen Punktes entlang der Spirale
    let x = centerX + t * spacing * cos(t);
    let y = centerY + t * spacing * sin(t);
    
    // Füge den Punkt zur Spirale hinzu
    vertex(x, y);
  }
  endShape(); // Beende das Zeichnen der Spirale
}

---

Animation von Spiralen

Zuerst definieren wir einige Variablen:

• buildTime ist die Zeit, die wir benötigen, um die Spirale aufzubauen.

• startTime speichert den Startzeitpunkt der Animation.

In der draw() Funktion wird die Spirale gezeichnet:

• Überprüfen wir, ob die Aufbauzeit noch nicht abgelaufen ist.

• Wir berechnen die vergangene Zeit seit dem Start der Animation und den Fortschritt des Aufbaus basierend auf dieser Zeit.

• Wenn die Aufbauzeit noch nicht abgelaufen ist, beginnen wir das Zeichnen der Spirale und fügen schrittweise Punkte hinzu, bis der aktuelle Fortschritt erreicht ist.

• Sobald die Aufbauzeit abgelaufen ist, wird die Funktion drawFullSpiral() aufgerufen, um die vollständige Spirale zu zeichnen.

Die Funktion drawFullSpiral() zeichnet die vollständige Spirale, indem sie Punkte für jeden Winkel von 0 bis zur Anzahl der Umdrehungen der Spirale (numTurns * TWO_PI) hinzufügt.

Insgesamt baut sich die Spirale über die Zeit auf und bleibt dann in ihrer endgültigen Form stehen.

zur p5* Umgebung

let centerX, centerY;
let numTurns = 10; // Anzahl der Umdrehungen
let spacing = 1; // Abstand zwischen den Windungen
let maxPoints = 1000; // Maximale Anzahl der Punkte entlang der Spirale
let buildTime = 5000; // Zeit in Millisekunden für den Aufbau der Spirale
let startTime;

function setup() {
  createCanvas(600, 600); // Erstellt eine Zeichenfläche
  centerX = width / 2; // X-Koordinate des Mittelpunkts der Zeichenfläche
  centerY = height / 2; // Y-Koordinate des Mittelpunkts der Zeichenfläche
  startTime = millis(); // Startzeit initialisieren
}

function draw() {
  background(255); // Hintergrundfarbe auf Weiß setzen
  
  // Überprüfen, ob die Aufbauzeit noch nicht abgelaufen ist
  let currentTime = millis() - startTime;
  if (currentTime < buildTime) {
    // Berechne den Fortschritt des Aufbaus basierend auf der vergangenen Zeit
    let progress = map(currentTime, 0, buildTime, 0, maxPoints);
    
    // Beginne das Zeichnen der Spirale
    beginShape();
    for (let i = 0; i < progress; 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);
      let y = centerY + t * spacing * sin(t);
      
      // Füge den Punkt zur Spirale hinzu
      vertex(x, y);
    }
    endShape(); // Beende das Zeichnen der Spirale
  } else {
    // Wenn die Aufbauzeit abgelaufen ist, zeichne die vollständige Spirale
    drawFullSpiral();
  }
}

function drawFullSpiral() {
  // Beginne das Zeichnen der vollständigen Spirale
  beginShape();
  for (let t = 0; t < numTurns * TWO_PI; t += 0.01) {
    // Berechne die Position des aktuellen Punktes entlang der Spirale
    let x = centerX + t * spacing * cos(t);
    let y = centerY + t * spacing * sin(t);
    
    // Füge den Punkt zur Spirale hinzu
    vertex(x, y);
  }
  endShape(); // Beende das Zeichnen der vollständigen Spirale
}

---

Interaktive Spiralen

Interaktion beim Klicken

• 
• 
• 
• 

In diesem Code haben wir eine interaktive Spirale erstellt, die sich verändert, wenn der Benutzer darauf klickt.

Zuerst definieren wir verschiedene Variablen:

• angleOffset bestimmt den Anfangswinkel der Spirale.

• buildTime ist die Zeit, die wir benötigen, um die Spirale aufzubauen und abzubauen.

• startTime speichert den Startzeitpunkt der Animation.

• isBuilding ist eine Variable, die steuert, ob die Spirale aufgebaut oder abgebaut wird.

In der setup() Funktion initialisieren wir unsere Zeichenfläche, setzen die Größe auf 600x600 Pixel und berechnen den Mittelpunkt der Zeichenfläche. Außerdem fügen wir einen Eventlistener hinzu, um auf Mausklicks zu reagieren.

Die draw() Funktion zeichnet die Spirale:

• Zuerst überprüfen wir, ob die Spirale aufgebaut oder abgebaut werden soll, oder ob die Aufbauzeit noch nicht abgelaufen ist.

• Wir berechnen den Fortschritt des Aufbaus und Abbaus der Spirale basierend auf der vergangenen Zeit.

• Anschließend berechnen wir die Anzahl der Punkte entlang der Spirale basierend auf dem Fortschritt.

• Dann zeichnen wir die Spirale, indem wir schrittweise Punkte hinzufügen und den Winkel der Spirale (angleOffset) ändern.

• Die Spirale wird nur gezeichnet, wenn isBuilding true ist oder die Aufbauzeit noch nicht abgelaufen ist.

Die Funktion toggleBuilding() wird aufgerufen, wenn der Benutzer auf die Zeichenfläche klickt. Sie ändert den Wert von isBuilding und startet den Timer neu.

Insgesamt ermöglicht dieser Code eine interaktive Erfahrung, bei der der Benutzer durch Klicken auf die Spirale deren Aussehen ändern kann.

zur p5* Umgebung

let centerX, centerY;
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
}

Interaktion mit dem Cursor

Der Code erstellt eine interaktive Spirale, die dem Cursor folgt und sich währenddessen weiter dreht.

Zuerst werden verschiedene Variablen definiert:

• mousePos speichert die aktuelle Position des Cursors.

• targetPos speichert die Zielposition, zu der sich die Spirale bewegen soll.

• easing ist der Verzögerungsfaktor für die Verfolgung des Cursors.

In der setup() Funktion wird die Zeichenfläche initialisiert und ein Eventlistener für die Mausbewegung hinzugefügt.

Die draw() Funktion zeichnet die Spirale:

• Sie berechnet die Zielposition der Spirale mit einer Verzögerung, um eine sanfte Bewegung zu erzielen.

• Dann wird die Richtung vom aktuellen Mittelpunkt zur Zielposition berechnet.

• Der Mittelpunkt wird basierend auf der Richtung und dem Verzögerungsfaktor aktualisiert, um eine sanfte Verfolgung des Cursors zu ermöglichen.

• Schließlich wird die Spirale gezeichnet, indem schrittweise Punkte hinzugefügt und der Winkel der Spirale geändert wird.

Die Funktion updateMousePos(event) wird aufgerufen, wenn sich die Maus bewegt, und aktualisiert die Mausposition entsprechend.

zur p5* Umgebung

let centerX, centerY;
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;
}

---

Fortgeschrittene Techniken

Punktspirale

Dieser Code erstellt eine Spirale aus verschiedenen farbigen Punkten.

Variablen zur Konfiguration der Spirale:

• angle, offset, scalar: Diese Variablen steuern die Position und Größe der Spirale.

• speed: Bestimmt die Geschwindigkeit, mit der sich die Spirale dreht und wächst.

• col: Ein Objekt, das die RGB-Farbwerte für die Punkte der Spirale speichert. Zu Beginn ist die Farbe rot (255, 0, 0).

setup() Funktion:

• Initialisiert die Zeichenfläche mit einer Größe von 2000x2000 Pixeln.

• Setzt den Hintergrund auf Schwarz (0).

draw() Funktion:

• In jeder Iteration der draw() Funktion wird eine neue Farbe für die Punkte generiert, indem die RGB-Werte zufällig zwischen bestimmten Grenzen eingestellt werden.

• Dann wird die Position eines neuen Punktes der Spirale berechnet. Dies geschieht, indem die x- und y-Koordinaten mit Hilfe von trigonometrischen Funktionen (cos und sin) basierend auf dem aktuellen Winkel (angle) und dem Skalierungsfaktor (scalar) berechnet werden.

• Der Punkt wird mit der generierten Farbe gefüllt und ohne Rand gezeichnet, indem fill() und noStroke() verwendet werden.

• Anschließend wird der Winkel und der Skalierungsfaktor der Spirale erhöht, um die Bewegung und das Wachstum der Spirale zu steuern.

zur p5* Umgebung

// Variablen für den Winkel, den Versatz, den Skalar, die Geschwindigkeit und die Farbe initialisieren
var angle = 2.0; // Der Startwinkel für die Kreisbewegung
var offset = 500; // Der Abstand vom Ursprung zum Mittelpunkt des Kreises
var scalar = 35; // Der Radius des Kreises
var speed = 0.11; // Die Geschwindigkeit, mit der sich der Winkel und der Radius des Kreises ändern
var col = { // Die Farbe des Kreises als Objekt mit den Werten für Rot, Grün und Blau
  r: 255, // Rot
  g: 0,   // Grün
  b: 0    // Blau
};

function setup() { 
  createCanvas(2000, 2000); // Eine Leinwand mit den Maßen 2000x2000 erstellen
  noStroke(); // Keinen Rand für die Kreise zeichnen
  background(0); // Schwarzen Hintergrund setzen
} 

function draw() { 
  // Zufällige Werte für die Farbkomponenten festlegen
  col.r = random(0, 200);
  col.g = random(0, 250);
  col.b = random(100, 250);
  
  // Die x- und y-Koordinaten des Kreises basierend auf dem Winkel und dem Skalar berechnen
  var x = offset + cos(angle) * scalar;
  var y = offset + sin(angle) * scalar;
  
  // Die Farbe des Kreises basierend auf den zufälligen Farbkomponenten festlegen
  fill(col.r, col.g, col.b);
  noStroke(); // Keinen Rand für die Kreise zeichnen
  ellipse(x, y, 5, 5); // Einen Kreis an den berechneten Koordinaten mit einem Durchmesser von 5 zeichnen
  
  // Den Winkel und den Skalar für die nächste Iteration anpassen
  angle += speed;
  scalar += speed;
}

Dieser Code erstellt zwei verschiedene Spiralen mit blauen Punkten, wobei zwei verschiedene Punktgrößen verwendet werden.

In der setup() Funktion wird die Leinwand mit einer Größe von 600x600 Pixeln initialisiert und der Hintergrund auf Schwarz gesetzt.

Die draw() Funktion ruft die Funktionen iris() und iris2() auf, um die beiden Spiralen zu zeichnen.

Die iris() Funktion generiert zufällige Blautöne für die Farbe der Punkte, wobei die Werte für col.r (red) und col.g (green) zwischen 0 und 50 und der Wert für col.b (blue) zwischen 100 und 250 liegen. Anschließend berechnet sie die Position eines Punktes der ersten Spirale mit den gegebenen Werten für Winkel, Skalar und Offset und zeichnet diesen Punkt mit einer Größe von 5x5 Pixeln.

Die iris2() Funktion funktioniert ähnlich wie iris(), jedoch wird die Farbe anders festgelegt, um eine andere Blautönung zu erhalten. Sie zeichnet einen kleineren Punkt mit einer Größe von 1.5x1.5 Pixeln.

zur p5* Umgebung

// Definiere die Variablen für den Winkel, den Offset, den Skalar, die Geschwindigkeit und die Farben
var angle = 2.0; // Startwinkel für die Berechnung der Position
var offset = 300; // Offset von der Zeichenfläche
var scalar = 50.5; // Skalierungsfaktor für die Berechnung der Position
var speed = 0.1; // Geschwindigkeit, mit der sich die Position ändert
var col = { // Farbobjekt für die Augen
  r: 0,
  g: 0,
  b: 0,
};

function setup() { 
  createCanvas(600, 600); // Erstelle eine Zeichenfläche
  noStroke(); // Keine Konturlinien für die Formen
  background (0); // Hintergrundfarbe schwarz
} 

function draw() { 
  iris2(); // Rufe die Funktion für das Zeichnen des zweiten Auges auf
  iris(); // Rufe die Funktion für das Zeichnen des ersten Auges auf
}

// Funktion zum Zeichnen des ersten Auges
function iris(){
  // Zufällige Farbe für das Auge generieren
  col.r = random(0, 50);
  col.g = random(0, 50);
  col.b = random(100, 250);
  
  // Berechne die Position des Auges auf der Zeichenfläche
  var x = offset + cos(angle) * scalar;
  var y = offset + sin(angle) * scalar;
  
  // Fülle das Auge mit der generierten Farbe
  fill(col.r, col.g, col.b);
  noStroke(); // Keine Konturlinien für das Auge
  ellipse(x, y, 5, 5); // Zeichne das Auge als Kreis
  
  // Aktualisiere die Position des Auges für die nächste Iteration
  scalar += speed; // Ändere die Skalierung basierend auf der Geschwindigkeit
  angle += speed; // Ändere den Winkel basierend auf der Geschwindigkeit
}

// Funktion zum Zeichnen des zweiten Auges
function iris2(){
  // Zufällige Farbe für das Auge generieren
  col.r = random(0, 50);
  col.g = random(100, 250);
  col.b = random(0, 50);
  
  // Berechne die Position des Auges auf der Zeichenfläche
  var x = offset + cos(angle) * scalar;
  var y = offset + sin(angle) * scalar;
  
  // Fülle das Auge mit der generierten Farbe
  fill(col.r, col.g, col.b);
  noStroke(); // Keine Konturlinien für das Auge
  ellipse(x, y, 1.5, 1.5); // Zeichne das Auge als Kreis
  
  // Aktualisiere die Position des Auges für die nächste Iteration
  scalar += speed; // Ändere die Skalierung basierend auf der Geschwindigkeit
  angle += speed; // Ändere den Winkel basierend auf der Geschwindigkeit
}

---

Anwendungsbeispiele

Das Auge

• 
• 
• 

Dieser Code erstellt ein animiertes Auge welches per Mausklick blinzelt. Auch ist die Iris eine Spirale bestehend aus Punkten, wodurch nochmehr mit den Abständen der Reihen gespielt werden kann.

Zuerst werden verschiedene Variablen definiert, um die Konfiguration des Auges und der Animationen festzulegen. Dazu gehören Parameter für die Spirale der Iris, die Augenlider und die Animation.

• In der setup() Funktion wird die Zeichenfläche initialisiert und die Startpositionen der Augenlider gesetzt. Außerdem wird ein Eventlistener für Mausklicks hinzugefügt.

• Mit der draw() Funktion wird das Auge aktualisiert und gezeichnet, wobei sowohl die Spirale als auch die Augenlider berücksichtigt werden. Die Augenlider erfahren eine Animation, sobald die Bewegung aktiviert wird.
  

• Durch die generateIrisPoint() Funktion werden Punkte für die Spirale der Iris erzeugt, wobei zufällige Farben verwendet werden. Anschließend erfolgt die Darstellung dieser Punkte als Kreise mittels der drawIris() Funktion.
  

• Die drawEyelids() Funktion ist für das Zeichnen der Augenlider als Halbkreise über dem Auge zuständig. Die Bewegung der Augenlider nach oben oder unten wird durch die moveEyelids() Funktion gesteuert, abhängig davon, ob die Animation vorwärts oder rückwärts erfolgt.
  

• Mittels der easeInOut() Funktion wird eine "Ease-In-Out" Interpolation berechnet, um eine sanfte Bewegung bei Animationen zu gewährleisten. Die animateSpiral() Funktion hingegen generiert kontinuierlich Punkte für die Spirale der Iris, bis die maximale Anzahl erreicht ist.
  

• Sobald auf das Auge geklickt wird, aktiviert die mousePressed() Funktion die Animation der Augenlider.

zur p5* Umgebung

//IRIS
var irisPoints = []; // Ein Array, um die Punkte der Iris zu speichern
var eyelidColor = 0; // Farbe der Augenlider (schwarz)
var spiralAngle = 2.0; // Der Startwinkel für die Spirale
var spiralOffset = 400; // Der Offset für die Spirale
var spiralScalar = 20; // Die Skalierung für die Spirale
var spiralSpeed = 0.13; // Die Geschwindigkeit, mit der sich die Spirale dreht
var maxSpiralPoints = 500; // Die maximale Anzahl von Punkten in der Spirale
var currentSpiralPoints = 0; // Der aktuelle Anzahl von Punkten in der Spirale

//Augenlider
var eyelidSpeed = 0.25; // Die Geschwindigkeit, mit der sich die Augenlider bewegen
var eyelidWidth = 300; // Die Breite der Augenlider
var eyelidHeight = 200; // Die Höhe der Augenlider (Radius)
var upperEyelidY, lowerEyelidY; // Die Y-Positionen der oberen und unteren Augenlider

// Augenlid Animation
var animationActive = false; // Eine Variable, um die Animation der Augenlider zu steuern
var maxEyelidSeparation = 0; // Der maximale Abstand zwischen den Augenlidern
var easingDuration = 3000; // Die Dauer der Animation in Millisekunden
var easingStart; // Der Zeitpunkt, an dem die Animation begonnen hat
var isAnimatingForward = true; // Eine Variable, um den Status der Animation (vorwärts oder rückwärts) zu verfolgen

function setup() {
  createCanvas(800, 800); // Erstelle eine Leinwand mit der Größe 800x800
  frameRate(60); // Setze die Bildrate auf 60 Bilder pro Sekunde
  // Setze die Anfangspositionen der Augenlider so, dass sie weit auseinander stehen
  upperEyelidY = height / 2.65;//oberees Augenlid max Abstand 2.65
  lowerEyelidY = height * 0.63;//unteres Augenlid max Abstand 0.63
  // Setze den Zeitpunkt, an dem die Animation beginnt
  easingStart = millis();
}

// Generiert einen Punkt für die Iris-Spirale
function generateIrisPoint() {
  // Zufällige Farbe für den Punkt generieren
  var col = {
    r: random(0, 200),
    g: random(0, 250),
    b: random(100, 250)
  };
  // Berechne die Position des Punktes in der Spirale
  var x = spiralOffset + cos(spiralAngle) * spiralScalar;
  var y = spiralOffset + sin(spiralAngle) * spiralScalar;
  // Füge den Punkt zum Array der Iris-Punkte hinzu
  irisPoints.push({x: x, y: y, color: col});
  // Aktualisiere die Parameter für die Spirale
  spiralAngle += spiralSpeed;
  spiralScalar += spiralSpeed;
  currentSpiralPoints++;
}

// Zeichnet die Iris-Punkte
function drawIris() {
  for (var i = 0; i < irisPoints.length; i++) {
    fill(irisPoints[i].color.r, irisPoints[i].color.g, irisPoints[i].color.b);
    noStroke();
    ellipse(irisPoints[i].x, irisPoints[i].y, 5, 5); // Größe der Punkte der Spirale
  }
}

// Zeichnet die Augenlider
function drawEyelids() {
  fill(eyelidColor); // Setze die Farbe der Augenlider auf Schwarz
  noStroke(); // Kein Rand für die Halbkreise
  // Zeichne das obere Augenlid als Halbkreis
  arc(width / 2, upperEyelidY, eyelidWidth, eyelidHeight, PI, TWO_PI);
  // Zeichne das untere Augenlid als Halbkreis
  arc(width / 2, lowerEyelidY, eyelidWidth, eyelidHeight, 0, PI);
}

// Bewegt die Augenlider
function moveEyelids() {
  // Wenn die Animation vorwärts abgespielt wird
  if (isAnimatingForward) {
    // Berechne die vergangene Zeit seit dem Start der Animation
    var elapsedTime = millis() - easingStart;

    // Berechne den Fortschritt der Animation (Wert zwischen 0 und 1)
    var progress = constrain(elapsedTime / easingDuration, 0, 1);

    // Wende die "Ease-In-Out"-Funktion auf den Fortschritt an
    var easedProgress = easeInOut(progress);

    // Berechne die neue Position der Augenlider basierend auf dem animierten Fortschritt
    upperEyelidY = height / 2.65 + (height / 2 - maxEyelidSeparation / 2 - height / 4 - 90) * easedProgress;
//Abstand in der Mitte der animation -> aufeinandertreffen ohne viel überschneidung -> height/4-90
    lowerEyelidY = height * 0.63 - (height / 2 - maxEyelidSeparation / 2 - height / 4 - 90) * easedProgress;
//Abstand in der Mitte der animation -> aufeinandertreffen ohne viel überschneidung -> height/4-90

    // Wenn die Animation abgeschlossen ist, ändere den Status der Animation
    if (progress >= 1) {
      isAnimatingForward = false;
      easingStart = millis();
    }
  } 
  else { // Wenn die Animation rückwärts abgespielt wird
    // Berechne die vergangene Zeit seit dem Start der Animation
    var elapsedTime = millis() - easingStart;

    // Berechne den Fortschritt der Animation (Wert zwischen 0 und 1)
    var progress = constrain(elapsedTime / easingDuration, 0, 1);

    // Wende die "Ease-In-Out"-Funktion auf den Fortschritt an
    var easedProgress = easeInOut(progress);

    // Berechne die neue Position der Augenlider basierend auf dem animierten Fortschritt
    upperEyelidY = height / 2.65 + (height / 2 - maxEyelidSeparation / 2 - height / 4 - 90) * (1 - easedProgress);
    //Abstand in der Mitte der animation -> aufeinandertreffen ohne viel überschneidung -> height/4-90
    lowerEyelidY = height * 0.63 - (height / 2 - maxEyelidSeparation / 2 - height / 4 - 90) * (1 - easedProgress);
    //Abstand in der Mitte der animation -> aufeinandertreffen ohne viel überschneidung -> height/4-90

    // Wenn die Animation abgeschlossen ist, ändere den Status der Animation
    if (progress >= 1) {
      isAnimatingForward = true;
      animationActive = false; // Stoppe die Animation, wenn die Augenlider wieder auseinander sind
    }
  }
}

// "Ease-In-Out"-Funktion für sanfte Animationen
function easeInOut(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

// Zeichenfunktion, wird kontinuierlich aufgerufen
function draw() {
  background(0); // Hintergrundfarbe auf Grau setzen
  animateSpiral(); // Zeichne die Iris-Spirale automatisch
  drawIris(); // Zeichne die Iris-Punkte
  if (animationActive) {
    moveEyelids(); // Bewege die Augenlider nur, wenn die Animation aktiviert ist
  }
  drawEyelids(); // Zeichne die Augenlider
}

// Funktion zum Animieren der Spirale
function animateSpiral() {
  if (currentSpiralPoints < maxSpiralPoints) {
    generateIrisPoint(); // Generiere einen Punkt für die Spirale
  }
}

// Mausklick-Event-Handler
function mousePressed() {
  // Aktiviere die Animation der Augenlider, wenn mit der Maus geklickt wird
  if (!animationActive) {
    animationActive = true;
    easingStart = millis(); // Setze den Startzeitpunkt der Animation
  }
}

Viel Spaß beim Nachbauen

---

Quellen:

Bilder:
archimedische Spirale: http://www.maphi.de/mathematik/kurven/archimedische_spirale.html
logarithmische Spirale: http://www.maphi.de/mathematik/kurven/logarithmische_spirale.html
Fibonacci Spirale: https://www.pixolum.com/blog/fotografie/fibonacci-spirale

Inspiration/Code:
Buch über interaktiven p5 code: https://natureofcode.com/examples/
Punktspirale: https://editor.p5js.org/hyershin/sketches/SkG_S5K3W