Interpolazioni fra valori

Problema: ricavare i valori intermedi di uno o più parametri, anche con intervalli diversi, per sincronizzare la variazione di più proprietà geometriche e/o cromatiche di una forma.

Soluzione: usare un valore di controllo (con decimali) che va da 0 (inizio interpolazione) a 1 (fine interpolazione).

// height=380

var a;
var a1;
var a2;
var ay = 80;
var b;
var b1;
var b2;
var by = 170;
var t = 0;         // variabile di controllo
var tVel;   // velocità d'interpolazione
var t1;
var t2;
var ty = 290;

function setup() {
    createCanvas(windowWidth, 380);
    textFont( "Roboto", 20 );
    textStyle( BOLD );
    textAlign( CENTER, CENTER );
    strokeCap( SQUARE);
    setupVar();
}

function setupVar() {
    var vel = width*0.000002 + 0.0002;
    tVel = (tVel > 0) ? vel : -vel;
    // print( tVel );
    a1 = width*0.2;
    a2 = width*0.8;
    b1 = width*0.3;
    b2 = width*0.7;
    t1 = width*0.35;
    t2 = width*0.65;
}

function draw() {
    background(255);

    strokeWeight(3);
    stroke(192);
    line( 0,ay, width,ay );
    line( 0,by, width,by );

    strokeWeight(5);
    stroke(160,0,0);
    line( t1,ty, t2,ty );

    strokeWeight(1);

    // tacche fisse

    stroke(0);
    line( a1,ay-10, a1,ay+10 );
    line( a2,ay-10, a2,ay+10 );
    line( b1,by-10, b1,by+10 );
    line( b2,by-10, b2,by+10 );

    stroke(128,0,0);
    line( t1,ty-10, t1,ty+10 );
    line( t2,ty-10, t2,ty+10 );

    // lettere fisse

    noStroke();
    fill(112);
    text( "a1", a1,ay+25 );
    text( "a2", a2,ay+25 );
    text( "b1", b1,by+25 );
    text( "b2", b2,by+25 );

    fill(128,0,0);
    text( "0.0", t1,ty+25 );
    text( "1.0", t2,ty+25 );

    // tacche mobili

    stroke(0);

    a = int(lerp( a1, a2, t ));
    line( a,ay-10, a,ay+10 );

    b = int(lerp( b1, b2, t ));
    line( b,by-10, b,by+10 );

    stroke(128,0,0);

    var tt = int(lerp( t1, t2, t ));
    line( tt,ty-10, tt,ty+10 );

    // lettere mobili

//    stroke(255);
//    strokeWeight(5);
    noStroke();
    fill(0);

    text( "a", a,ay-20 );
    text( "b", b,by-20 );

    fill(128,0,0);

    textSize(24);
    text( "t", tt,ty-22 );
    textSize(20);

    // avanzamento interpolazione

    t += tVel;     // incrementa t
    if (t > 1 || t < 0) {   // interpolazione finita?
        tVel = -tVel;     // ricomincia daccapo
        t += tVel;     // incrementa t
    }
/*
    if (t > 0.4) {
        noLoop();
    }
*/    
}

function windowResized() {
    resizeCanvas(windowWidth, 380);
    setupVar();
}