===== Slow In & Slow Out – Visualisierung mit p5.js =====

===== Beschreibung des Prinzips ===== Das Prinzip **Slow In & Slow Out** beschreibt eine animierte Bewegung, die nicht abrupt beginnt oder endet, sondern am Anfang langsam startet, in der Mitte beschleunigt und zum Ende hin wieder verlangsamt. In der Realität beobachten wir dieses Verhalten in fast allen natürlichen Bewegungsprozessen – sei es bei einer gehenden Figur, einem fallenden Objekt oder einer Kamerafahrt. In der Animation erzeugt man diesen Effekt durch sogenannte **Easing-Funktionen**, die die Zwischenwerte nicht linear, sondern kurvenförmig interpolieren. Dadurch wirkt eine Bewegung glaubwürdiger, rhythmischer und angenehmer in der Wahrnehmung. In diesem Sketch wird ein Kreis mit einer **sinusbasierten Easing-Funktion** von links nach rechts und wieder zurück bewegt. Die Animation ist loopfähig und lässt sich über einen **interaktiven Slider** in ihrer Geschwindigkeit verändern. ===== Interaktive Komponente ===== Der integrierte Slider verändert die Bewegungsdauer des Kreises. Kürzere Werte führen zu schnelleren Bewegungen, längere Werte erzeugen langsamere, flüssigere Übergänge. Unabhängig von der Geschwindigkeit bleibt der „Slow In & Slow Out“-Charakter erhalten. ===== Beispielcode zum Nachvollziehen =====


let t = 0;
let duration = 60;
let startX = 50;
let endX = 350;
let y = 200;
let forward = true;
let speedSlider;

function setup() {
  let canvas = createCanvas(400, 300);
  canvas.parent("p5sketch");
  noStroke();
  fill(100, 150, 255);
  speedSlider = createSlider(10, 120, 60, 1);
  speedSlider.parent("p5sketch");
}

function draw() {
  background(240);
  duration = speedSlider.value();
  let progress = t / duration;
  let eased = easeInOutSine(progress);
  let x = forward ? lerp(startX, endX, eased) : lerp(endX, startX, eased);
  ellipse(x, y, 50, 50);
  t++;
  if (t > duration) {
    t = 0;
    forward = !forward;
  }
}

function easeInOutSine(p) {
  return -(Math.cos(Math.PI * p) - 1) / 2;
}