xxxxxxxxxx
151
//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
}
}