xxxxxxxxxx
58
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;
}