a smoth fading demo

easeIneaseOut.pde

import controlP5.*;
ControlP5 cp5;

// Hinzugefügte Variablen für die Interpolation
HashMap<String, Float> startValues = new HashMap<String, Float>();
HashMap<String, Float> targetValues = new HashMap<String, Float>();
float transitionStartTime;
final float transitionDuration = 2000; // 3 Sekunden in Millisekunden
boolean isTransitioning = false;

// Deine ursprünglichen Variablen
float Speed;
float ScaleX, ScaleY;
float Angle;
float Twist, Zoom, Scroll, MoveX, MoveY;

void setup() {
  fullScreen();
  background(0);
  cp5 = new ControlP5(this);

  cp5.addSlider("Twist")
    .setPosition(0, 350)
    .setWidth(320)
    .setHeight(20)
    .setRange(-3, 3)
    .setValue(0.5)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("Speed")
    .setPosition(0, 380)
    .setWidth(320)
    .setHeight(20)
    .setRange(-200, 200)
    .setValue(10)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("ScaleX")
    .setPosition(0, 410)
    .setWidth(320)
    .setHeight(20)
    .setRange(3, 50)
    .setValue(20)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("ScaleY")
    .setPosition(0, 440)
    .setWidth(320)
    .setHeight(20)
    .setRange(3, 50)
    .setValue(20)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("Angle")
    .setPosition(0, 470)
    .setWidth(320)
    .setHeight(20)
    .setRange(0, 5)
    .setValue(1)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("Zoom")
    .setPosition(0, 500)
    .setWidth(320)
    .setHeight(20)
    .setRange(0, 5)
    .setValue(1)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("Scroll")
    .setPosition(0, 530)
    .setWidth(320)
    .setHeight(20)
    .setRange(0, 1)
    .setValue(0.05)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("MoveX")
    .setPosition(0, 560)
    .setWidth(320)
    .setHeight(20)
    .setRange(-1, 1)
    .setValue(0)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addSlider("MoveY")
    .setPosition(0, 590)
    .setWidth(320)
    .setHeight(20)
    .setRange(-1, 1)
    .setValue(0)
    .setColorForeground(color(255, 0, 0)) // Color when not at default
    .setColorBackground(color(128, 0, 0)) // Default background color
    .setColorActive(color(255, 100, 100)); // Color when active or being dragged

  cp5.addButton("shuffleParameters")
    .setLabel("Shuffle")
    .setPosition(0, 620)
    .setSize(60, 60)
    .setColorForeground(color(255, 0, 0)) 
    .setColorBackground(color(128, 0, 0)) 
    .setColorActive(color(255, 100, 100)); 
    
    cp5.addButton("reset")
    .setLabel("Reset")
    .setPosition(70, 620)
    .setSize(60, 60)
    .setColorForeground(color(255, 0, 0)) 
    .setColorBackground(color(128, 0, 0)) 
    .setColorActive(color(255, 100, 100));

  // Initialisiere die Start- und Zielwerte für die Parameter
  initializeParameterValues();
}

void initializeParameterValues() {
  // Initialisiere die Startwerte mit den aktuellen Werten der Schieberegler
  // und setze die Zielwerte gleich den Startwerten
  String[] params = {"Twist", "Speed", "ScaleX", "ScaleY", "Angle", "Zoom", "Scroll", "MoveX", "MoveY"};
  for (String param : params) {
    float value = cp5.getController(param).getValue();
    startValues.put(param, value);
    targetValues.put(param, value);
  }
}

float scale  = 3;                       // global zoom factor for the noise
float c, d, time;                       // some timedependant counters
float r;                                // to store the current noise value
float newdist, newangle, newx, newy;    // parameters for reconstruction
float z;                                // for the noise
float offset_x, offset_y;
float scale_x, scale_y;
float dist, angle;
int x, y;

int num_x = 32;
int num_y = 32;
int size = 21;

float center_x = (num_x / 2) - 0.5;   // the reference point for polar coordinates
float center_y = (num_y / 2) - 0.5;   // (can also be outside of the actual xy matrix)



void draw() {
  if (isTransitioning) {
    float progress = (millis() - transitionStartTime) / transitionDuration;
    if (progress < 1.0) {
      // Verwende die Ease Out Elastic-Funktion für die Interpolation
      for (String key : startValues.keySet()) {
        float startValue = startValues.get(key);
        float endValue = targetValues.get(key);
        // Anpassen des Fortschritts mit der Elastic-Funktion
        
        float elasticProgress = easeInOutCubic(progress);       //   !!!slow in slow out
        
        //float elasticProgress = easeOutElastic(progress);     //   !!!elastic out
        //float elasticProgress = easeOutBounce(progress);      //   !!!bounce out
        
        
        float newValue = lerp(startValue, endValue, elasticProgress);
        cp5.getController(key).setValue(newValue);
      }
    } else {
      // Transition beenden
      isTransitioning = false;
      // Setze die Startwerte auf die aktuellen Zielwerte
      for (String key : targetValues.keySet()) {
        startValues.put(key, targetValues.get(key));
      }
    }
  }

  time = time + (Speed*10);
  c = time / 20000;        

  center_x = (num_x / 2) - 0.5;   // the reference point for polar coordinates
  center_y = (num_y / 2) - 0.5;

  // for every single frame go through all rows and columns
  for (x = 0; x < num_x; x++) {
    for (y = 0; y < num_y; y++) {

      get_polar_values();
      scale_x = ScaleX;
      scale_y = ScaleY;
      newangle = Angle * angle + c - dist/10 * Twist;    
      newdist = dist * Zoom;

      z = z + (Scroll/100000);
      offset_x = offset_x + (MoveX/1000);
      offset_y = offset_y + (MoveY/1000);

      float show1 = render_pixel();
      fill( show1, show1-32, 0);
      rect( 400+x*size, 0+y*size, size, size);
    }
  }
  updatePixels();
}

float render_pixel() {
  // convert polar back to cartesian
  newx = (offset_x + center_x - (cos(newangle) * newdist)) / scale_x;
  newy = (offset_y + center_y - (sin(newangle) * newdist)) / scale_y;
  // render noisevalue at this new point
  r = noise(newx, newy, z);
  return map(r, 0.4, 0.8, 0, 255);
}

void get_polar_values() {
  float xx = x-center_x;           // relative distance from center, the deltas
  float yy = y-center_y;
  dist = sqrt((xx*xx)+(yy*yy));    // hypot(), length of the vector
  angle = atan2(yy, xx);           // fuck yeah!
}


// Beispiel für eine Funktion, die die Parameter mischt und die Transition startet
public void shuffleParameters() {
  // Setze zufällige Zielwerte für jeden Parameter
  
  targetValues.put("Twist", random(-1, 1));
  targetValues.put("Speed", random(-200, 200));
  
 
  targetValues.put("ScaleX", random(3, 50));
  targetValues.put("ScaleY", random(3, 50));
  
  float caleido = 1+int (random(4));
  
  targetValues.put("Angle", caleido);
 
  
  targetValues.put("Zoom", random(1, 2));
  targetValues.put("Scroll", random(0, 1));
  targetValues.put("MoveX", random(-0.3, 0.3));
  targetValues.put("MoveY", random(-0.3, 0.3));
  
  
  
  
  
  
  // Starte die Transition
  transitionStartTime = millis();
  isTransitioning = true;
}



public void reset() {
  cp5.getController("Twist").setValue(0);
  cp5.getController("Angle").setValue(1);
  cp5.getController("Speed").setValue(0);
  cp5.getController("MoveX").setValue(0);
  cp5.getController("MoveY").setValue(0);
  
}

float easeOutBounce(float x) {
  float n1 = 7.5625;
  float d1 = 2.75;

  if (x < 1 / d1) {
    return n1 * x * x;
  } else if (x < 2 / d1) {
    return n1 * (x -= 1.5 / d1) * x + 0.75;
  } else if (x < 2.5 / d1) {
    return n1 * (x -= 2.25 / d1) * x + 0.9375;
  } else {
    return n1 * (x -= 2.625 / d1) * x + 0.984375;
  }
}

float easeOutElastic(float x) {
  float c4 = (2 * PI) / 3;

  return x == 0
    ? 0
    : x == 1
      ? 1
      : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
}

float easeInOutCubic(float x) {
  return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2;
}