Hey everyone,

I have a program with lots of variables and I'm using controlP5 to change them. I'd like to introduce interpolation to move smoothly from the old to the new value. Changes are currently instantaneous. To accompany my question I've included three examples below.

1. In essence my current setup without interpolation.
   
2. Basic interpolation, but not linear. It starts with big leaps and goes towards endlessly smaller increments. You could include code to stop interpolating within a certain distance. However both the interpolation and the starting-stopping aren't great with this solution.
3. Multi-variable interpolation. This is 'actual' interpolation, in this example linear but easily substituted by other types of interpolation. The starting-stopping is relatively neat, although the correct handling of values at the edges of the range could possibly be improved. But all in all better than in example 2 on both accounts. However the downside is that you need more variables (at least 3 extra vars for every variable that you want to interpolate) and more code for each individual variable.
   

So the option from example 3 would result in incredible bloat, especially in an already complex program with lots of variables. What I'm looking for is a lean-and-mean alternative to implement interpolation inside a program with as little code and extra variables as possible.

I'm not looking for interpolation methods (linear, cosine, sigmoid, exponential) but rather for best practices of handling interpolation within a program. Does anybody have suggestions, experiences or good practices to share with regard to a code-efficient solution?

Thanks!

Example 1 - DIRECT

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. int diameter = 250;
5.  
6. void setup() {
7.   size(500, 500);
8.   cp5 = new ControlP5(this);
9.   cp5.addSlider("diameter").setPosition(50, 50).setRange(0, width);
10.   smooth();
11.   noStroke();
12.   fill(0);
13. }
14.  
15. void draw() {
16.   background(125);
17.   ellipse(width/2, height/2, diameter, diameter);
18. }

Example 2 - BASIC INTERPOLATION

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. int diameter = 250;
5. float iDiameter = diameter;
6.  
7. void setup() {
8.   size(500, 500);
9.   cp5 = new ControlP5(this);
10.   cp5.addSlider("diameter").setPosition(50, 50).setRange(0, width);
11.   smooth();
12.   noStroke();
13.   fill(0);
14. }
15.  
16. void draw() {
17.   background(125);
18.   iDiameter = 0.95 * iDiameter + 0.05 * diameter;
19.   ellipse(width/2, height/2, iDiameter, iDiameter);
20. }

Example 3 - MULTI-VARIABLE INTERPOLATION

1. import controlP5.*;
2. ControlP5 cp5;
3.  
4. float oldDiameter, newDiameter, currentDiameter = 250;
5. float diameterInterpolation = 1;
6.  
7. void setup() {
8.   size(500, 500);
9.   cp5 = new ControlP5(this);
10.   cp5.addSlider("newDiameter")
11.     .setBroadcast(false)
12.     .setPosition(50, 50)
13.     .setRange(0, width)
14.     .setValue(currentDiameter)
    
15.     .setLabel("diameter")
16.     .setBroadcast(true)
17.   ;
18.   smooth();
19.   noStroke();
20.   fill(0);
21. }
22.  
23. void draw() {
24.   background(125);
25.   if (diameterInterpolation < 1) {
26.     currentDiameter = lerp(oldDiameter, newDiameter, diameterInterpolation);
27.     diameterInterpolation += 0.05;
28.   }
29.   ellipse(width/2, height/2, currentDiameter, currentDiameter);
30. }
31.  
32. void newDiameter(float theValue) {
33.   oldDiameter = currentDiameter;
34.   newDiameter = theValue;
35.   diameterInterpolation = 0;
36. }