Making a value dynamic in Spark AR via Script

Question

Coming from this Question Tweening Colors on Spark AR via Script i now try to make start and end color dynamically bounded. I propably havn't swallowed the whole concept of reactive programming yet, but i tried to make a factory so the value is a function... yet its not working, or only with the initial values. Using the set function and restarting animation doesnt change a thing. What am i missing? Thank you and best regards!

const pink = [.99, .682, .721, 1];
const blue = [.0094, .0092, .501, 1];
const yellow = [0.9372, .7725, 0, 1];

function ColorFactory() {
    this.sourceCol = pink;
    this.targetCol = blue;

    this.set = function (_col1, _col2) {
        this.sourceCol = _col1;
        this.targetCol = _col2;
    }

    this.get = function (id) {
        switch (id) {
            case 'source': return this.sourceCol;
            default: return this.targetCol;
        }
    }
}


var colfac = new ColorFactory();

const timeDriver = Animation.timeDriver(timeDriverParameters);
const rotSampler = Animation.samplers.easeInQuad(0, 35);
const alphaSampler = Animation.samplers.linear(1, 0);
const colSampler = Animation.samplers.linear(colfac.get('source'), colfac.get('target'));
const colorAnimation = Animation.animate(timeDriver, colSampler);

timedriver.start();

//doesnt make change anything, same colors as before:
colfac.set(blue, yellow);
timedriver.reset();
timedriver.start();

So how could i make the set of colors dynamic? Anyone?

Answer 1

The only "good" option for you is to do something like this:

const colors = [];
const driver = A.timeDriver({ durationMilliseconds : 1000 });

// On NativeUI monitor selected index event 
ui.selectedIndex.monitor.subscribe(
(val) => {
   const sampler = A.samplers.linear(colors[val.oldValue, colors[val.newValue]);
   const colorAnimation = A.animate(driver, sampler);

   // bind here to shader

})