Creative Technologies Lab | dokuWiki

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.

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.

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